echarts折线图阴影渐变 前端

要实现echarts折线图的阴影渐变，可以通过设置series中的areaStyle属性来实现。具体的做法如下：

1. 在option中设置series的type为line，并设置data属性为对应的数据。

2. 在series中添加一个areaStyle属性，用来设置阴影渐变的样式。

3. 在areaStyle中设置color属性为一个数组，数组中的每个元素都是一个对象，用来表示每个阶段的颜色和渐变方式。例如：

areaStyle: {
color: [{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(255, 0, 0, 0.8)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(255, 0, 0, 0)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}]
}

4. 在color属性中，设置type为'linear'表示使用线性渐变，x和y表示渐变起点的坐标，x2和y2表示渐变终点的坐标。

5. 在colorStops属性中，设置每个颜色的位置和颜色值。

6. 最后，在全局中设置tooltip的trigger为'axis'，可以让折线图的每个点都显示tooltip。

下面是一个示例代码：

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {
            color: [{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: 'rgba(255, 0, 0, 0.8)' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'rgba(255, 0, 0, 0)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            }]
        }
    }]
};

运行后，可以看到折线图的区域被设置为了红色的线性渐变阴影。