折现双轴渐变色echarts 配置项内容和展示

折现双轴渐变色

      let list = [{
    time: "2016",
    cjNum: "10",
    changeNum: "9"
}, {
    time: "2017",
    cjNum: "8",
    changeNum: "8"
}, {
    time: "2018",
    cjNum: "6",
    changeNum: "5"
}, {
    time: "2019",
    cjNum: "4",
    changeNum: "3"
}, {
    time: "2020",
    cjNum: "2",
    changeNum: "1"
}]


let xAxisData = []
let seriesData1 = []
let seriesData2 = []
list.map((item, index) => {
    xAxisData.push(item.time)
    seriesData1.push(item.cjNum)
    seriesData2.push(item.changeNum)
})

option = {
    backgroundColor: "#000",
    tooltip: {
        trigger: "axis",
        axisPointer: {
            lineStyle: {
                color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                            offset: 0,
                            color: "rgba(0, 255, 233,0)",
                        },
                        {
                            offset: 0.5,
                            color: "rgba(255, 255, 255,1)",
                        },
                        {
                            offset: 1,
                            color: "rgba(0, 255, 233,0)",
                        },
                    ],
                    global: false,
                },
            },
        },
    },
    legend: {
        data: ["采集数量", "有变化数量"],
        top: 0,
        textStyle: {
            color: "#fff",
        },
    },
    grid: {
        left: 10,
        right: 10,
        top: 50,
        bottom: 10,
        containLabel: true,
    },
    xAxis: [{
        type: "category",
        data: xAxisData,
        axisLine: {
            lineStyle: {
                color: "rgba(255,255,255,0.12)",
            },
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(255,255,255,0.1)",
            },
        },
        axisLabel: {
            color: "#fff",
            fontSize: 14,
        },
    }, ],
    yAxis: [{
        minInterval: 5,
        type: "value",
        name: "数量（次）",
        nameTextStyle: {
            color: "#fff",
        },
        axisLabel: {
            margin: 20,
            fontSize: 14,
            textStyle: {
                color: "#e2e9ff",
            },
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(255,255,255,0.1)",
            },
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,0.12)",
                width: 2,
            },
        },
    }, ],
    series: [{
            name: "采集数量",
            type: "line",
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: 5,
            data: seriesData1,
            lineStyle: {
                color: "#69c4fe",
            },
            itemStyle: {
                color: "#69c4fe",
                borderColor: "#69c4fe",
                borderWidth: 2,
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [{
                                offset: 0,
                                //渐变色----------------
                                color: "rgba(105,196,254,0.3)",
                            },
                            {
                                offset: 1,
                                color: "rgba(105,196,254,0)",
                            },
                        ],
                        false
                    ),
                    shadowColor: "rgba(105,196,254, 0.9)",
                    shadowBlur: 20,
                },
            },
        },
        {
            name: "有变化数量",
            type: "line",
            data: seriesData2,
            stack: "总量",
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: 5,
            lineStyle: {
                color: "#6c50f3",
            },
            stack: "总量",
            itemStyle: {
                color: "#6c50f3",
                borderColor: "#6c50f3",
                borderWidth: 2,
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [{
                                offset: 0,
                                //渐变色----------------
                                color: "rgba(108,80,243,0.3)",
                            },
                            {
                                offset: 1,
                                color: "rgba(108,80,243,0)",
                            },
                        ],
                        false
                    ),
                    shadowColor: "rgba(108,80,243, 0.9)",
                    shadowBlur: 20,
                },
            },
        },
    ],
}