面积折线图的绘制

通过areaStyle设置区域填充样式。设置后显示成区域面积图。

绘制简单面积折线图

        areaStyle: {
            color: 'rgba(1, 191, 236)'
        }

• areaStyle：设置区域填充样式。
• color：设置区域颜色。
• opacity：图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {
            color: 'rgba(1, 191, 236)'
        }
    }]
};

图形区域的起始位置

默认情况下，图形会从坐标轴轴线到数据间进行填充。如果需要填充的区域是坐标轴最大值到数据间，或者坐标轴最小值到数据间，则可以通过这个配置项进行设置。

可选值包括 ‘auto’（默认值）、 ‘start’、 ‘end’。

• ‘auto’ 填充坐标轴轴线到数据间的区域；
• ‘start’ 填充坐标轴底部（非 inverse 情况是最小值）到数据间的区域；
• ‘end’ 填充坐标轴顶部（非 inverse 情况是最大值）到数据间的区域。

        areaStyle: {
            color: 'rgba(1, 191, 236)',
            origin:'end' //可选值包括 'auto'（默认值）、 'start'、 'end'
            }

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {
            color: 'rgba(1, 191, 236)',
            origin:'end'
            }
    }]
};

图形阴影

• shadowBlur：图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
• shadowColor：阴影颜色。支持的格式同color。
• shadowOffsetX：阴影水平方向上的偏移距离。
• shadowOffsetY：阴影垂直方向上的偏移距离。

        areaStyle: {
            color: 'rgba(1, 191, 236)',
            origin:'end',
            shadowOffsetX:10,
            shadowOffsetY:10,
            shadowColor:'rgba(211, 121, 216)',
            shadowBlur: 10,
            }

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {
            color: 'rgba(1, 191, 236)',
            origin:'end',
            shadowOffsetX:10,
            shadowOffsetY:10,
            shadowColor:'rgba(211, 121, 216)',
            shadowBlur: 10,
            }
    }]
};

线性渐变填充

线性渐变时参考如下设置。

        areaStyle: {
           // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                    offset: 1, color: 'blue' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        }

完整代码片段：

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {
           // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                    offset: 1, color: 'blue' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        }
    }]
};

线性渐变填充

径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变

    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {
            color: {//径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变            	
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.9,
                colorStops: [{
                    offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                 offset: 1, color: 'blue' // 100% 处的颜色
                 }],
                global: false // 缺省为 false
            }
        }
    }]

完整代码片段：

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        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: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.9,
                colorStops: [{
                    offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                 offset: 1, color: 'blue' // 100% 处的颜色
                 }],
                global: false // 缺省为 false
            }
        }
    }]
};