销售量曲线图echarts 折线配置项内容和展示

在有促销和无促销的区域标记不同颜色

      var effectDTOList = [{
    "date": "10-30",
    "salesCnt": 22,
    "status": 0
}, {

    "date": "2016-10-31",
    "salesCnt": 27,
    "status": 0
}, {

    "date": "2016-11-01",
    "salesCnt": 44,
    "status": 0
}, {
    "date": "2016-11-02",
    "salesCnt": 64,
    "status": 0
}, {

    "date": "2016-11-03",
    "salesCnt": 77,
    "status": 1
}, {

    "date": "2016-11-04",
    "salesCnt": 99,
    "status": 1
}, {

    "date": "2016-11-05",
    "salesCnt": 102,
    "status": 1
}, {

    "date": "2016-11-06",
    "salesCnt": 116,
    "status": 1
}, {

    "date": "2016-11-07",
    "salesCnt": 99,
    "status": 0
}, {

    "date": "2016-11-08",
    "salesCnt": 77,
    "status": 0
}, {

    "date": "2016-11-09",
    "salesCnt": 64,
    "status": 0
}, {

    "date": "2016-11-10",
    "salesCnt": 70,
    "status": 0
}];
var xAxis = [],
    yAxis = [],
    data = [],
    series = [],
    seriesItem;
var st = effectDTOList[0].status;
for (var i = 0; i < effectDTOList.length; i++) {
    var date = effectDTOList[i].date.substring(5);
    xAxis.push(date);
    yAxis.push(effectDTOList[i].salesCnt);
    data.push([date, effectDTOList[i].salesCnt]);
    if (st != effectDTOList[i].status || (i == effectDTOList.length - 1)) {
        var color = st == 1 ? '#ff8c66' : "#e2e2e2";
        var name1 = st == 1 ? '有促销' : "无促销";
        seriesItem = {
            name: name1,
            type: 'line',
            smooth: true,
            symbolSize: 7,
            data: data,
            areaStyle: {
                normal: {
                    color: color,
                    opacity: 1
                }
            },
            lineStyle: {
                normal: {
                    color: '#ff8c66'
                }
            },
            itemStyle: {
                normal: {
                    color: color,
                    borderWidth: 2,
                    borderType: 'solid'
                }
            }
        };
        series.push(seriesItem);
        data = [
            [date, effectDTOList[i].salesCnt]
        ];
        st = effectDTOList[i].status;
    }
}

option = {
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    title: {
        text: '销售量曲线图',
        subtext: '不同时间段面积标记不同颜色'
    },
    legend: {
        right: 50,
        top: 20,
        data: [{
                name: '无促销',
                icon: 'circle',
                textStyle: {
                    color: '#333',
                    fontSize: '14'
                }
            }, {
                name: '有促销',
                icon: 'circle',
                textStyle: {
                    color: '#333',
                    fontSize: '14'
                }
            }

        ]
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    dataZoom: [{
        type: 'inside',
        xAxisIndex: [0]
    }],
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            for (let i = 0; i < params.length; i++) {
                if (params[i].value) {
                    return params[i].value[1];
                }
            }
            return 'loading';
        },
        backgroundColor: '#ff6633',
        padding: [10],
        axisPointer: {
            lineStyle: {
                color: '#ddd'
            }
        }

    },
    xAxis: {
        axisTick: {
            show: true
        },
        type: 'category',
        boundaryGap: false,
        data: xAxis,
        axisLine: {
            lineStyle: {
                color: '#ddd'
            }
        },
        axisLabel: {
            textStyle: {
                color: '#333'
            }
        }
    },
    yAxis: {
        axisTick: {
            show: false
        },
        type: 'value',
        axisLine: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: '#ddd'
            }
        }
    },
    series: series
};