【无标题】

echart电量显示案例参考，销售预测折线图分段

以今天为结点，今天之前为实际历史销量，今天之后为预测销量

 draw_graph(){
                this.salesChart = this.$echarts.init(document.getElementById('recommend_graph'))
                let option = {
                title: {
                    text: `${this.cur_sellerSku}`,
                },
                dataZoom:[{
                    type:'slider',            
                    orient: 'horizontal',
                    rangeMode: "value",
                    backgroundColor: 'rgba(0,0,0,0)',       
                    dataBackgroundColor: '#eee',            
                    fillerColor: 'rgba(144,197,237,0.2)',   
                    handleColor: 'rgba(70,130,180,0.3)',
                    start:0,
                    end:100
                },{
                    type: 'inside',
                    realtime: true,
                }],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross'
                    },
                    formatter:(params)=>{
                    var res = "<div style='width:100%;height:24px;line-height:24px;'>" + params[0].name + "</div>";
                    if(params[0].name<this.start_recommend_time){
                        res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">`+
                            `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${[params[0].color,]};"></span>
                            sales:
                            ${params[0].value}
                        </div>`;
                    }else{
                        res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">`+
                            `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${[params[0].color,]};"></span>
                            recommend:
                            ${params[0].value}
                        </div>`;
                    }
                    return res;
                    }
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true },
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data:[],
                },
                yAxis: {
                    type: 'value',
                    axisPointer:{
                    snap:true
                    }
                },
                visualMap: {
                    show: false,
                    dimension: 0,
                    pieces: []
                },
                series:[{
                    name: 'sales',
                    type: 'line',
                    smooth: true,
                    data:[],
                    markArea:{
                        itemStyle: {
                        color: 'rgba(255, 173, 177, 0.1)'
                        },
                        data:[
                        [{
                            name:'',
                            xAxis:'',
                        },{xAxis:''}]
                        ]
                    }
                }]
                };
                option.xAxis.data = this.date
                option.series[0].data = this.data
                option.visualMap.pieces[0] = {lte:this.last_sale_index,color:'#0f0'}
                option.visualMap.pieces[1] = {gt:this.last_sale_index,lte:this.data.length-1,color:'#f00'}
                option.series[0].markArea.data[0][0].name=`Recommend start time ${this.start_recommend_time} End time ${this.end_time}`
                option.series[0].markArea.data[0][0].xAxis=this.start_recommend_time
                option.series[0].markArea.data[0][1].xAxis=this.end_time
                option.dataZoom[0].startValue  = 0
                if(this.cur_range_type==1){
                    if(this.last_sale_index+30 < this.date.length){
                        option.dataZoom[0].endValue = this.last_sale_index+30
                    }else{
                        option.dataZoom[0].endValue = this.date.length-1
                    }
                }else if(this.cur_range_type==2) {
                    if(this.last_sale_index+90 < this.date.length){
                        option.dataZoom[0].endValue = this.last_sale_index+90
                    }else{
                        option.dataZoom[0].endValue = this.date.length-1
                    }
                }else if(this.cur_range_type==3){
                    if(this.last_sale_index+365 < this.date.length){
                        option.dataZoom[0].endValue = this.last_sale_index+365
                    }else{
                        option.dataZoom[0].endValue = this.date.length-1
                    }
                }else if(this.cur_range_type==4){
                    option.dataZoom[0].endValue = this.date.length-1
                }else {}
                this.salesChart.setOption(option,true)
                this.salesChart.resize()
            },