echarts处理数据分时段展示多条数据（不喜勿喷）

工作当中的需求，就当学习记录一下，一个前端小白。

        需求是一条曲线进行分时段展示，每个时段显示数据量不同，可能三条，也可能是10条不等，想让echarts数据分时段展示，就需要多个series来进行数据渲染，例如：我现在这个曲线是分3段展示的，数据格式大概是这种：         

        series:[

                

        {

                ......配置参数就省略了

                 [100,200,300,'  ', '  ','  ','  ','  ','  ','  ','  ','  '],
         } ，

        

         {

                ......配置参数就省略了

                 [' ',' ',' ',' 320 ', ' 349 ',' 234 ',' 556 ',' 123 ','  ','  ','  ','  '],
         }   ，

         {

                ......配置参数就省略了

                 [' ',' ',' ','  ', '  ','  ','  ','  ',' 666 ',' 777 ','  888',' 999 '],
         }   

        

 ],

 总的来说是什么呢，意思就是你想分段显示就需要用数据去拼接来展示，一条曲线可能也可以实现，但是我这里用的是这种方法（不喜勿喷），方法有多种，大家可以自己发挥并实践，基于上面的数据结构最后出来的效果是这种：

 

下面附上代码及数据处理

//我这里是展示的五个时段的数据
//需要展示的曲线数据 实际项目中，就是后台接口返回数据
var lingsixzxyd = [10,10, 10, 10, 10, 10]  //第一时段
var sixtenzxyd = [10, 10, 10, 10, 10, 10] //第二时段
var tentensixzxyd = [10, 10, 10] //第三时段
var tensixtwotenonezxyd = [10, 10, 10, 10, 10, 10, 10, 10] //第四时段
var twotenonetwotenfourzxyd = [10, 10, 10, 10, 10]; //第五时段


//处理上放数据，生成为文章开头我给大家展示的数据

//获取当前各个时段数据长度 并计算总长度
var length1 = lingsix.length;
var length2 = sixten.length;
var length3 = tentensix.length;
var length4 = tensixtwotenone.length;
var length5 = twotenonetwotenfour.length;
var length6 = length1 + length2 + length3 + length4 + length5;

//处理各个时段数组的数据格式并返回var a1 = seriesForArr(length1, 0, 0, 0, 0, length6, lingsix, '');
var a2 = seriesForArr(length1, 0, 0, 0, 0, length6, sixten, 'sixten');
var a3 = seriesForArr(length1, length2, 0, 0, 0, length6, tentensix, '');
var a4 = seriesForArr(length1, length2, length3, 0, 0, length6, tensixtwotenone, '');var a5 = seriesForArr(length1, length2, length3, length4, 0, length6, twotenonetwotenfour, '');

//console.log(a1) //第一时段
//console.log(a2) //第二时段
//console.log(a3) //第三时段
//console.log(a4) //第四时段
//console.log(a5) //第五时段

//控制台输出结果
[100, 240, 250, 235, 220, 222, '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '']
['', '', '', '', '', '', 300, 280, 250, 260, 270, 200, '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '']
['', '', '', '', '', '', '', '', '', '', '', '', 250, 300, 290, '', '', '', '', '', '', '', '', '', '', '', '', '']
['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 260, 230, 240, 250, 235, 245, 255, 210, '', '', '', '', '']
['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 280, 250, 260, 270, 200]
//处理数据格式方法
function seriesForArr(num1, num2, num3, num4, num5, num6, arr, type) {
  if (num1 != 0 && num6 != 0 && num2 == 0 && num3 == 0 && num4 == 0 && num5 == 0) {
    if (type == 'sixten') {
      for (var i = 0; i < num1; i++) {
        arr.unshift('');
      }
      var add = num6 - arr.length;
      for (var i = 0; i < add; i++) {
        arr.push('');
      }
    } else {
      for (var i = 0; i < num6 - num1; i++) {
        arr.push('')
      }
    }
  } else {
    var add = num1 + num2 + num3 + num4 + num5;
    for (var i = 0; i < add; i++) {
      arr.unshift('');
    }
    var count = num6 - arr.length;
    for (var i = 0; i < count; i++) {
      arr.push('');
    }
  }
  return arr;
}


//接下来就是echarts图例的处理 这里包含series 及  tooltip的数据处理 有需要的可以看一下
//先说series  这里声明一个series数组 及 需要显示的 legend 数组，因为是五段数据，我主要是图方便把legend内容写死，到时候到家可以用循环生成
var seriesArr = [];
var legendArr = ['测试2', '测试2', '测试2', '测试2', '测试2'];


//接下来进行series循环处理数据   这里的yData就是上面五个数组的合集
//为什么要判断i呢，因为这只是一个时段的数据，如果有两条线呢那就是 5 6 7 8 9，以此类推这里就不写在代码里面了
var lineColor = '';  //折线颜色
var lineStyle = '';  //折线样式
yData.forEach((v, i) => {
  if (i == 0 || i == 1 || i == 2 || i == 3 || i == 4) {
    lineColor = 'yellow';
    lineStyle = 'solid'
  }  var seriesObj = {
    name: legendArr[i],
    type: 'line',
    step: "start",
    symbol:'none',
    smooth: false,
    itemStyle: {
      normal: {
        color: lineColor,
        lineStyle:{
          type:lineStyle
        }
      }
    },
    data: v
  }
  seriesArr.push(seriesObj)
})


//这里是tooltip的数据进行formatter处理
formatter: function(params) {
            var arr = params;
            let str = '';
            var hide = '';
            var time = '';
                //time是你要显示的时段
                //hide是判断你的legend显示还是隐藏 因为如果你不判断的话，会生成五个legend，因为你放了 5个 series
            for(var i=0;i<arr.length;i++){
                if(arr[i].data == '' && arr[i].value == ''){
                    hide = 'none';
                }else{
                    hide = 'block';
                }
                //判断属于哪一个时段的方法，06是第一时段的结尾，写多少都根据你们的需求来定
                
                if(arr[i].dataIndex <= getArrayIndex(xData,'06')){
                  time = '00时-06时'
                }else if(arr[i].dataIndex > getArrayIndex(xData,'06') && arr[i].dataIndex <= getArrayIndex(xData,'10')){
                  time = '06时-10时'
                }else if(arr[i].dataIndex > getArrayIndex(xData,'10') && arr[i].dataIndex <= getArrayIndex(xData,'16')){
                  time = '10时-16时'
                }else if(arr[i].dataIndex > getArrayIndex(xData,'16') && arr[i].dataIndex <= getArrayIndex(xData,'21')){
                  time = '16时-21时'
                }else if(arr[i].dataIndex > getArrayIndex(xData,'21') && arr[i].dataIndex <= getArrayIndex(xData,'24')){
                  time = '21时-24时'
                }
                str += `
                    <span style='display:${hide};'>${time}</span>
                    <div style='display:${hide};width:150px;'>
                        <span style='display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${arr[i].color}'><span>
                        <span style='display:inline-block;left:15px;position:relative;top:-7px;'> ${arr[i].seriesName} :${arr[i].value}</span>
                    </div>
                `
            }
            return str;
        }


function getArrayIndex(arr,obj){
  var i = arr.length;
  while(i--){
    if(arr[i] == obj){
      return i;
    }
  }
  return -1;
}

以上就是方法及数据实现啦，本人就是一个前端小白，重在分享和记录，望大家不喜勿喷啦！

如果可以帮到各位，我还是会非常开心的。

再次感谢大家的浏览及查看，谢谢大家！