渐变双色echarts category配置项内容和展示

      option = {
    backgroundColor: 'rgba(0,0,0, .9)',
    title: {
        text: '水质(mg/L)',
        textStyle: {
            color: '#fff',
            fontSize: 12,
        },
        left: '20px',
        top: '10px',
    },
    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,
                },
            },
        },
        renderMode: 'html',
        backgroundColor: 'rgba(15, 45, 83, 0.9)',
        borderWidth: 0,
        borderColor: 'rgba(15, 45, 83, 0.9)',
        textStyle: {
            color: '#fff',
        },
        formatter: (val) => {
            const style = 'display: inline-block;width: 10px;height: 10px;background: #fff;border-radius: 50%;';
            const tooltip = val
                .map((i) => {
                    const { seriesName, color, value } = i;
                    return `<span class="border" style='${style} border:2px solid ${color}'></span> ${seriesName}: ${value} mg/L`;
                })
                .join('<br />');
            return tooltip;
        },
    },
    grid: {
        top: '15%',
        left: '16%',
        right: '5%',
        bottom: '10%',
        containLabel: false,
    },
    xAxis: [
        {
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#39608F',
                },
            },
            splitArea: {
                color: '#f00',
                lineStyle: {
                    color: '#f00',
                },
            },
            axisLabel: {
                color: '#fff',
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            boundaryGap: true,
            data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
        },
    ],

    yAxis: [
        {
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#39608F',
                },
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#d1e6eb',
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#39608F',
                },
            },
        },
    ],
    series: [
        {
            name: '氨氮',
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 10,
            lineStyle: {
                normal: {
                    color: '#2A74FF',
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 5,
                    shadowOffsetX: 5,
                },
            },
            label: {
                show: false,
            },

            itemStyle: {
                color: '#2A74FF',
                borderColor: '#fff',
                borderWidth: 2,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 6,
                shadowOffsetX: 2,
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(42, 116, 255, 0.2)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(42, 116, 255, 0)',
                            },
                        ],
                        false
                    ),
                    shadowColor: 'rgba(0,179,244, 0.9)',
                    shadowBlur: 20,
                },
            },
            data: [45, 55, 63, 45, 32, 47, 31],
        },
        {
            name: 'COD',
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 10,
            lineStyle: {
                normal: {
                    color: '#FFE867',
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 5,
                    shadowOffsetX: 5,
                },
            },
            label: {
                show: false,
            },

            itemStyle: {
                color: '#FFE867',
                borderColor: '#fff',
                borderWidth: 2,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 1,
                shadowOffsetX: 1,
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(254, 205, 54, 0.2)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(254, 205, 54, 0)',
                            },
                        ],
                        false
                    ),
                    shadowColor: 'rgba(0,179,244, 0.9)',
                    shadowBlur: 20,
                },
            },
            data: [35, 31, 45, 22, 14, 24, 14],
        },
    ],
};