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]}   
                ]]
              }
            }
          ]
    });
  }	

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190314141523747.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NzcyNTA0,size_16,color_FFFFFF,t_70

stack 的坑

• 在service中如果stack的值相同，那么就会出现折线图Y轴数值叠增的现象，如图1。最小值是100，对应的折线图的Y轴的坐标是100没问题，再看预测最大值130，对应的Y轴在200以上，也就是说预测最大值对应的高度是100 + 130 也就是230，出现了Y轴叠加的问题。
• 那么我们我们应该解决这个问题呢，我们在给 sevice 中 data 属性传值的时候，预测最大值的值应该是 实际的 预测最大值 - 预测最小值 ，也就是130 - 100 的值， 如图2。

图1

• 

图 2

到此，折线图折现数值与Y轴对应的数值就是正确的了，但是问题又来了，折线图悬浮图标中预测最大值显示的数值为30，这就有些尴尬了，明明是130 ，由于我们减去了100所以就显示30了，如果传入130就会出现Y轴叠加问题，这该如何解决。
https://echarts.baidu.com/echarts2/doc/doc.html#Tooltip

• Echarts中有个属性tooltip。 文档内容如下图：

• 我们可以看到 tooltip属性中有一个 formatter 的函数属性，我们找到实例：
  https://echarts.baidu.com/echarts2/doc/example/line7.html

 tooltip : {
        trigger: 'axis',
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        },
        formatter : function (params) {
            return params.seriesName + ' : [ '
                   + params.value[0] + ', ' 
                   + params.value[1] + ' ]';
        }
    },

从中截取toopltip片段：在本地测试发现params就是折线图中折现的属性。你可以通过console.log(params) 在浏览器console控制台查看params参数内容。
我们通过对params中获取的数值进行处理最终折线图和悬浮窗显示内容正确显示：

tooltip : {
        trigger: 'axis',
        formatter: function (params,ticket) {
          console.log(params)
          if(params.length === 3){
            var dateTime = params[0].name;
            return dateTime + "<br/>" +"预测最小值: " + params[0].data + "<br/>" +"预测最大值: " + (parseInt(params[0].data)+parseInt(params[1].data)) + "<br/>" + "实测值: " + params[2].data
          }else if(params.length === 2){
            var dateTime = params[0].name;
            return  dateTime + "<br/>" +"预测最小值: " + params[0].data + "<br/>" +"预测最大值: " + (parseInt(params[0].data)+parseInt(params[1].data))
          } else {
            return params[0].name + "<br/>" + "实测值: " + params[0].data
          }
        }
      }