需求：echarts繪製多條折線，x軸間隔不同。

效果圖：

   資料格式

分析：因為每條線的x軸不同，所以普通的渲染方式無法實現。解決辦法是series的資料格式 -- [ [x,y],[x,y] ].

核心程式碼：

1）小技巧--js時間格式化封裝    如果沒有引es6，可以直接做封裝 function(time){}

//時間格式化
export const dateconvert = (time) => {
  time=new Date(time)
  var datetimeFormat = "yyyy-MM-dd hh:mm:ss";
    var o = {
      "M+": time.getMonth() + 1, //月份 
      "d+": time.getDate(), //日 
      "h+": time.getHours(), //小時 
      "m+": time.getMinutes(), //分 
      "s+": time.getSeconds(), //秒 
      "q+": Math.floor((time.getMonth() + 3) / 3), //季度 
      "S": time.getMilliseconds() //毫秒 
  };
  if (/(y+)/.test(datetimeFormat)) {
    datetimeFormat = datetimeFormat.replace(RegExp.$1, (time.getFullYear() + "").substr(4 - RegExp.$1.length));
  }
  for (var k in o)
      if (new RegExp("(" + k + ")").test(datetimeFormat)) 
      datetimeFormat = datetimeFormat.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return datetimeFormat;
}
//dateconvert('2018-05-19T01:00:00Z')   --呼叫
 

 option:{
                tooltip: {              --滑鼠滑過提示框樣式
                    trigger: 'item',
                    padding: 10,
                    backgroundColor: 'rgba(9, 131, 195, 0.53)',
                    formatter:function(a){
                       return a.data[0]+'</br>'+a.seriesName+'--'+a.data[1]+'分'
                    },
                },
            legend:{               --圖例樣式
                orient: 'vertical',
                y: 'top',
                top:'5%',  
                left: 'right',   
                textStyle: {
                    color: '#fff'          // 圖例文字顏色
                }
            },
            grid: {                   --折線位置
                top:'8%',
                right: '10%',
            },
            xAxis: {                  --x軸樣式
                type: 'time',
                name: '時間',
                nameTextStyle: {fontSize: 15, color: '#fff'},
                // boundaryGap: false,
                boundaryGap: [0, 100],
                axisLine: {
                lineStyle: {
                    color: "#7bdeff",
                }
                },
                axisTick: {
                show: true
                },
                splitLine: {
                    show: true, 
                    //  改變軸線顏色
                    lineStyle: {         
                        color: '#1f516d'
                    }                            
                },
            },
            yAxis: {                         --y軸樣式
                type:"value",
                name: "得分",
                nameTextStyle: {fontSize: 15, color: '#fff'},
                axisLabel: {
                show: true
                },
                axisLine: {
                lineStyle: {
                    color: "#7bdeff",
                }
                },
                axisTick: {
                show: true
                },
                splitLine: {
                lineStyle: {
                    color: "#1f516d",
                }
                },
            },
   
            calculable: true,
            color:["red","#34affd",'#ff5555','#ffde00','#5af4ce','#d050ff','#CD5C5C','#4DCD53','#F1AB27','#B96CD3'],  --折線顏色
            series:[
               
            ],
            animation: false   
            }
 

3）封裝圖表

    drawLine(){
        // 基於準備好的dom，初始化echarts例項
        let myChart = echarts.init(document.getElementById('lineChart'))
        // 繪製圖表
        myChart.setOption(this.option)
     }

4）資料處理 

思路： 定義陣列最開始[比賽開始時間，0]，陣列末尾[比賽結束時間，最後的得分]，陣列中間資料 [得分時間，得分]

         資料格式[ [X,Y],[X,Y]]

        資料處理成這樣就能正常展示

下面的操作是處理資料為上面圖片的格式，可以根據自己的情況處理

 trend(getCookie('user_id')).then(res=>{
     if(res.data.status_code==0){
            console.log(res)
            this.lineSeries=[]
            let datas=res.data.data
            for ( var i = 0; i < datas.length; i++) {  
            
            var  data = [];
            var  temp=null
            var  dateTime = dateconvert('2018-05-19T01:00:00Z');
            var score = 0;
                data.push([dateTime, 0]);
                for (var j = 0; j < datas[i].score.length; j++) {
                    dateTime = dateconvert(datas[i].score[j].time);
                    score=datas[i].score[j].score
                    // for (var k = 0; k <= i; k++) {
                    //     score = datas[i].data[k].score + score;
                    // }
                    data.push([dateTime, score]);
                }
                if (this.currentTime > dateconvert('2018-05-20T01:00:00Z')) {
                    dateTime = dateconvert('2018-05-20T01:00:00Z');
                } else {
                    dateTime = this.currentTime;
                }
                data.push([dateTime, data[data.length - 1][1]]);
                temp = {
                    name: datas[i].group,
                    type: "line",
                    data: data
                };

                this.option.series.push(temp)
            
                
            }
        
        this.drawLine();
     }else{
            this.$message({
                message: res.data.msg,
                type: 'warning',
                duration:1500,
                center:true,
                customClass:'messageModal'
            });
     }
     
   
 })