ECharts - 折线图

https://echarts.baidu.com/echarts2/doc/doc.html#AreaStyle

折线图Y轴虚线

trendCompareData(aimTime) {
    let that = this;
    let forecastTemp = new Array();
    that.lineXDataCompare = [];
    that.lineYReal = [];
    that.lineYForecast = [];
    that.tempData = [];
    that.tempData1 = [];
    that.lineYForecastMax = [];
    that.lineYForecastMin = [];
    realAndForecastCompare(aimTime).then(function (res) {
      // fetch('/static/wuranruli.json').then(res=>res.json()).then(res=>{
      forecastTemp = [];
      if (res.status === "success") {
        var maxTime = res.data.actual[0].time;
        for (var i = 0; i < res.data.actual.length; i++) {
          if(maxTime < res.data.actual[i].time){
            maxTime = res.data.actual[i].time;
          }
          that.lineXDataCompare1[i] = res.data.actual[i].time;
          that.lineYReal[i] = res.data.actual[i].aqiValue;
        }
        var maxData = 0;
        for (var i = 0; i < res.data.forecast.length; i++) {
          if(Number(maxData) < Number(res.data.forecast[i].aqiMax)){
            maxData = res.data.forecast[i].aqiMax;
          }

          that.lineXDataCompare[i] = res.data.forecast[i].time
          // that.lineYForecast[i] = res.data.forecast[i].aqiValue;
          that.lineYForecastMax[i] = res.data.forecast[i].aqiMax;
          that.lineYForecastMin[i] = res.data.forecast[i].aqiMin;
        }
        that.trendCompareEcharts(that.lineXDataCompare1.length > that.lineXDataCompare.length ? that.lineXDataCompare1 : that.lineXDataCompare,
                                that.lineYReal,
                                that.lineYForecastMax,
                                that.lineYForecastMin ,
                                maxTime );
      }
    })

  },
  trendCompareEcharts(lineXDataCompare, lineYReal, lineYForecastMax, lineYForecastMin , maxTime ) {
    var trendCompareEcharts = echarts.init(document.getElementById('trendCompareEcharts'));
    trendCompareEcharts.setOption({
      color: ['#ffd700','#6699FF','#ff6666','#e02d1c'],
      grid: {
        left: '30px',
        right: '10%',
        top: '25px'
        // bottom: '20px'
      },
      tooltip : {
        trigger: 'axis'
      },
      legend: {
        data:['实测值', '预测最大值','预测最小值']
      },
      toolbox: {
        show : true,
        feature : {
          mark : {show: true},
          restore : {show: true},
          saveAsImage : {show: true}
        }
      },
      calculable : true,
      xAxis : [
        {
          type : 'category',
          boundaryGap : false,
          data : lineXDataCompare
        }
      ],
      yAxis : [
        {
          type : 'value',
          max: 300
        }
      ],
      series: [
            {
              name: '预测最小值',
              type: 'line',
              smooth: true,
              symbol: "none",
              stack: 'group1',
              yAxisIndex:0,
              itemStyle: {normal: {areaStyle: {type: 'default',color:'#ffd700'}}},  
              data: lineYForecastMin,    // 数组
            },
            {
              name: '预测最大值',
              type: 'line',
              smooth: true,
              symbol: "none",
              stack: 'group2',
              yAxisIndex:0,
              itemStyle: {normal: {areaStyle: {type: 'default',color:'#94b8ff'}}},
              data: lineYForecastMax   // 数组
            },
            {
              name: '实测值',
              type: 'line',
              smooth: true,
              symbol: "none",
              yAxisIndex:0,
              data: lineYReal  // 数组
            },
            {
              name:'平行于y轴的趋势线',
              type:'line',
              //data:[0],
              markLine: {              // Y轴虚线
              	// symbol:'none', //去掉箭头
                name:'aa',
                data: [[
                  {coord:[maxTime,0]},    // maxTime  = 2019年03月14日     -- X轴日期时间
                  {coord:[maxTime,300]}   
                ]]
              }
            }
          ]
    });
  }