echarts - 折线面积图

• 技术栈：vue2、echarts

• 总结：面积图相比于折线图只多了一个配置项 series.areaStyle

• 效果：渐变背景面积图

  • 默认展示

    

  • 鼠标悬浮

    

{
                xAxis: {
                    data: data.xAxis,
                    boundaryGap: false,
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#d1dae2"
                        }
                    }
                },
                grid: {
                    left: 20,
                    right: 20,
                    bottom: 20,
                    top: 60,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    padding: [5, 10]
                },
                yAxis: {
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false, // 不显示坐标轴线
                        lineStyle: {
                            color: "#d1dae2"
                        }
                    },
                    splitArea: {
                        show: false,
                    },
                    splitLine: { show: false },   //去除网格线
                },
                legend: {
                    data: [data.name],
                    top: 20,
                    left: 16,
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [{
                    name: data.name,
                    symbol: 'none', // 节点展示
                    areaStyle: { // 设置面积图
                        // 设置渐变背景色 
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0, color: 'rgba(4, 181, 248)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(4, 181, 248,0)' // 100% 处的颜色
                            }]
                            ),
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: '#13abe4',
                            lineStyle: {
                                color: '#13abe4',
                                width: 2
                            }
                        }
                    },
                    smooth: true,
                    type: 'line',
                    data: data.series,
                    animationDuration: 2800,
                    animationEasing: 'cubicInOut'
                },
                ],

            }

• 测试数据

        {
                name: '使用频率',
                series: [100, 120, 161, 134, 105, 160, 165],
                xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }