分区域颜色设置echarts 折线配置项内容和展示

      option = {
    title: {
        text: '统计1',
        left: '45%',
        top: '0%'
    },
    animation: false,
    yAxis: {
        type: 'value',
        min: 36,
        max: 39,
        splitNumber: 20,
        axisLine:{
            show:true,
            lineStyle:{
                color:'#d1d1d1'
            }
        },
        axisTick:{
            show:false
        },
        axisLabel: {
            color:'#343434'
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#d1d1d1'
            }
        }, //去除网格线
        splitArea: {
            show: false
        }, //保留网格区域

    },
    xAxis: {
        type: 'category',
        boundaryGap: true,
        axisLine:{
            show:true,
            lineStyle:{
                color:'#d1d1d1'
            }
        },
        axisTick:{
            show:false
        },
        axisLabel: {
            color:'#343434'
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#d1d1d1'
            }
        }, //去除网格线
        splitArea: {
            show: true,
            areaStyle: {
                color: ['rgba(255,93,93,0.3)',
                    'rgba(255,93,93,0.3)',
                    'rgba(255,93,93,0.3)',
                    'rgba(255,93,93,0.3)',
                    'rgba(255,93,93,0.3)',
                    'rgba(255,93,93,0.3)',
                    'rgba(255,93,93,0.3)',
                    'rgba(90,207,173,0.3)',
                    'rgba(90,207,173,0.3)',
                    'rgba(90,207,173,0.3)',
                    'rgba(90,207,173,0.3)',
                    'rgba(90,207,173,0.3)',
                    'rgba(90,207,173,0.3)',
                    'rgba(214,206,255,0.3)',
                    'rgba(214,206,255,0.3)',
                    'rgba(214,206,255,0.3)',
                    'rgba(214,206,255,0.3)',
                    'rgba(170,153,254,0.3)',
                    'rgba(214,206,255,0.3)',
                    'rgba(214,206,255,0.3)',
                    'rgba(214,206,255,0.3)',
                    'rgba(214,206,255,0.3)',
                    'rgba(90,207,173,0.3)',
                    'rgba(90,207,173,0.3)',
                    'rgba(90,207,173,0.3)',
                    'rgba(90,207,173,0.3)',
                    'rgba(90,207,173,0.3)',
                    'rgba(90,207,173,0.3)'
                ]
            },
        }, //保留网格区域
        data: [
            '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
            '21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
            '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
            '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
            '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'
        ]
    },
    grid: {
        top: '5%',
        bottom: '0%',
        left: '0%',
        right: '1%',
        containLabel: true
    },

    dataZoom: [{
        type: 'inside',
        show: false,
        xAxisIndex: [0],
        startValue: 0,
        endValue: 30,
        zoomLock: true,
        throttle: 0,
        moveonmousemove: 'ctrl'
    }],
    series: [ //就是从这个地方开始的    主要用的是markArea 和legend
        {
            type: 'line',
            smooth: true,
            offset: 500,
            symbol:'circle',
            itemStyle: {
                color:'#ff5690',
                borderColor:'#ff5690',
                borderWidth:4
            },
            data: ['36.6', '36.7', '37.4', '36.5', '36.7', '36.5', '36.7', '37.3', '36.6', '37.2', '36.5', '37.6', '36.9', '37.2', '36.5',
                '36.7', '36.9', '37.5', '36.9', '37.6', '36.9', '36.7', '36.9', '36.4', '37.0', '36.6', '37.5', '37.5', '37.3', '36.7',
                '37.0', '37.4', '36.5', '37.5', '37.0', '37.3', '36.4', '37.2', '37.2', '37.3', '36.6', '37.1', '37.1', '37.1', '37.3',
                '37.2', '37.4', '36.5', '37.0', '36.4', '36.6', '36.8', '37.1', '36.9', '36.5', '36.9', '37.2', '37.3', '36.5', '37.5', '36.6', '36.7', '37.4', '36.5', '36.7', '36.5', '36.7', '37.3', '36.6', '37.2', '36.5', '37.6', '36.9', '37.2', '36.5',
                '36.7', '36.9', '37.5', '36.9', '37.6', '36.9', '36.7', '36.9', '36.4', '37.0', '36.6', '37.5', '37.5', '37.3', '36.7',
                '37.0', '37.4', '36.5', '37.5', '37.0', '37.3', '36.4', '37.2', '37.2', '37.3', '36.6', '37.1', '37.1', '37.1', '37.3',
                '37.2', '37.4', '36.5', '37.0', '36.4', '36.6', '36.8', '37.1', '36.9', '36.5', '36.9', '37.2', '37.3', '36.5', '37.5'
            ],
        }
    ],
};