echarts折线图实线与虚线拼接及提示框浮层内容格式的设置

echarts折线图实线与虚线拼接及提示框浮层内容格式的设置

• 想要实现实线与虚线的结合，后端返回的数据是动态的，根据状态的不同展示实线与虚线。
• 例子1: 数据是固定的

  series: [
       {
           name:'在线数',
           type:'line',        
           data:[120, 132, 191, "-", "-", "-", "-"]
       },
       {
           name:'在线数',
           type:'line',     
           smooth:false,   //关键点，为true是不支持虚线，实线就用true
           itemStyle:{
               normal:{
                   lineStyle:{
                       width:2,
                       type:'dotted'  //'dotted'虚线 'solid'实线
                   }
               }
           }, 
           
           data:["-", "-", 191, 234, 190, "-", "-"]
       },
       {
           name:'在线数',
           type:'line',
           data:["-", "-", "-", "-", 190, 330, "-"]
       },
       {
           name:'在线数',
           type:'line',
           smooth:false,   //关键点，为true是不支持虚线，实线就用true
           itemStyle:{
               normal:{
                   lineStyle:{
                       width:2,
                       type:'dotted'  //'dotted'虚线 'solid'实线
                   }
               }
           }, 
           
           data:["-", "-", "-", "-", "-", 330, 410]
       },         
 
   ]

例子2： 数据是后端返回的，需要整理数据

        series: [
          {
            name: '气流量',
            type: 'line',
            itemStyle:{
               normal:{
                   lineStyle:{
                       width:2,
                       type:'solid',  //'dotted'虚线 'solid'实线
                       color:'rgb(67, 162, 228)' 
                   },
                   color:'rgb(67, 162, 228)',
               }
           }, 
            data: []
          },
          {
           name:'气流量',
           type:'line',     
           smooth:false,   //关键点,为true是不支持虚线,实线就用true
           itemStyle:{
               normal:{
                   lineStyle:{
                       width:2,
                       type:'dotted',  //'dotted'虚线 'solid'实线
                       color:'rgb(67, 162, 228)' 
                   },
                   color:'rgb(67, 162, 228)', 
               }
           },  
            data: []
          },
        ]

      this.momentChar.setOption({
        xAxis: { data: xAxis_arr },
        series: [
            { data: newArr1},  // 实线的数据整理
            { smooth:false,   //关键点,为true是不支持虚线,实线就用true
              itemStyle:{
                normal:{
                    lineStyle:{
                        width:2,
                        type:'dotted'  //'dotted'虚线 'solid'实线
                    }
                }
              }, 
              data: newArr2  //虚线的数据整理
            },      
          ]
      })

例如后端返回的数据是这样的：

 res = [
        {
          num: 40,
          state: 0,
          date: 1
        },
        {
          num: 60,
          state: 0,
          date: 2
        },
        {
          num: 50,
          state: 0,
          date: 3
        },
        {
          num: 20,
          state: 0,
          date: 4
        },
        {
          num: 40,
          state: 1,
          date: 5
        },
        {
          num: 60,
          state: 2,
          date: 6
        },
       ]
       然后整理数据根据状态不同分成两个数组：
series_arr1: [40, 60, 50, 20, "-", "-", "-", "-", 20.6, "-", "-", "-", "-", 20.6, "-", "-", "-", 20.6, "-", "-", 0, 0, 90, 0]
series_arr2: ["-", "-", "-", "-", 40, 60, 50, 50.3, "-", 40.7, 110, 90, 50.3, "-", 40.7, 0, 90, "-", 40.7, 110, "-", "-", "-", "-"]       

用上面的数据画出来的折线图是断断续续的，原因： --与–中间最少得有两个数据 一个数据的话就变成一个点了 这个点与前面的点和后面的点以什么形式相连就会模糊 ，所以连不上。

解决方法： 需要再重新整理数据：循环（series_arr1）这个数组，找到里面的item是否是“-”的那项，再判断它的后一项是不是“-”，如果不是说明是最后一项，将这一项的值“-”替换成这个数组（series_arr1）对应的那一项的值，直接上代码吧。

      console.log(series_arr1)
      console.log(series_arr2)
      let newArr1 = JSON.parse(JSON.stringify(series_arr1))
      let newArr2 = JSON.parse(JSON.stringify(series_arr2))
      series_arr1.map((item,index) =>{
        if(item !== "-"){
        if(series_arr1[index+1] === "-"){
           newArr2[index] = item;
        }
        }
        });
        series_arr2.map((item,index) =>{
        if(item !== "-"){
        if(series_arr2[index+1] === "-"){
           newArr1[index] = item;
        }
        }
        });
        console.log(newArr1)
        console.log(newArr2)

        newArr1: [40, 60, 50, 20, "-", "-", "-", 50.3, 20.6, "-", "-", "-", 50.3, 20.6, "-", "-", 90, 20.6, "-", 110, 0, 0, 90, 0]
        newArr2: ["-", "-", "-", 20, 40, 60, 50, 50.3, 20.6, 40.7, 110, 90, 50.3, 20.6, 40.7, 0, 90, 20.6, 40.7, 110, "-", "-", "-", "-"]

补充： 提示框浮层内容格式的设置，开始时的虚线部分的提示框是没有值显示的，只有实线才有值，

        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            console.log(params)  //这里是两个数组，
            if(params[0].data!='-') {
               var val = params[0]
            }else {
              var val = params[1]
            }
            if (val.data !== null) {
              return (
                  val.name +
                  '用气量 : ' +
                  toFix(val.data, 2) +
                  'm³/h'
                )
        }