有阴影的折线图echarts 折线配置项内容和展示

配置项如下
      option = {
    tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'line', // 默认为直线,可选为:'line' | 'shadow'
            //修改指识线的颜色
            lineStyle: {
                color: "transparent"
            }
        },
        formatter: function(params) {
            console.log(params)
        },
    },
    grid: {
        top: 20,
        bottom: 20,
        left: 30,
        right: 20
    },
    xAxis: [{
        type: 'category',
        axisTick: {
            show: false,
            alignWithLabel: true, //true 的时候有效,可以保证刻度线和标签对齐
        },
        axisLine: {
            lineStyle: {
                color: "#889fcc"
            }
        },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    }, ],
    yAxis: [{
        type: 'value',
        splitLine: {
            show: true,
            lineStyle: {
                color: "rgba(136, 159, 204, .2)"
            }
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: "#889fcc"
            }
        },
        axisTick: {
            show: false
        },
    }],
    //手势放大柱状图折线图
    dataZoom: {
        type: "inside"
    },
    series: [{
        //给折线图下方添加阴影
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                            offset: 0,
                            color: 'rgba(59, 34, 201,.4)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(16, 25, 112,0.2)'
                        }
                    ],
                    false
                ),
                shadowColor: 'rgba(59, 34, 201,1)',
                shadowBlur: 10
            }
        },
        name: '2017 降水量',
        type: 'line',
        smooth: true,
        itemStyle: {
            normal: {
                show: false,
                color: "#3282FF", //改变折线点的颜色
                lineStyle: {
                    color: "#3282FF" //改变折线颜色
                },
                label: {
                    show: false, //开启显示
                    position: 'top', //在上方显示
                    textStyle: { //数值样式
                        color: '#999999',
                        fontSize: 10
                    }
                },

            },
            emphasis: {
                show: true,
                color: "#3282FF",
                borderColor: "#ffffff",
                label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                    textStyle: { //数值样式
                        color: '#fff',
                        fontSize: 16,
                        padding: [10, 10, 10, 10],
                        backgroundColor: "rgba(24, 71, 185, .6)",
                        borderRadius: 4,
                    }
                }
            }
        },
        data: [5.9, 6.9, 10.1, 11.7, 4.3, 6.2, 21.6, 43.6, 51.4, 10.4, 17.3, 0.7]
    }]
};
    
截图如下