Echarts 多曲線“斷點”問題解決方法

Echarts 用來做可視化曲線是非常優秀的一個庫。建議使用 Echarts 作為項目的可視化圖標庫時，仔細研究 官方實例，根據需求來選擇類似的示例，下載實例模板來開發，節省時間，減少出錯，提高效率。

最近在項目中遇到了一個棘手的問題：

1. 在圖表中要顯示多條曲線

2. 每一條曲線的橫坐標(時間軸)的時間點不一定相同

對於單條曲線，時間不同的話，時間點就會比總時間點少，這時，只在對應的時間上顯示點，然后連線。

首先說明解決方法（以兩條曲線為例）：

1. 獲取到全部時間，作為橫坐標的數據。也就是 xAxis.data 的值。如 xAxis.data = ["10:00:00", "11:00:00", "12:00:00", "13:00:00", "14:00:00", "15:00:00"]

2. 在各條曲線上，它們的值采用數組類型，也就是 series.data 的值。 如 series.data[0] = [['10:00:00', '120'], ['12:00:00', '132'], ['14:00:00', '101']]，series.data[1] = [['11:00:00', '220'], ['13:00:00', '132'], ['15:00:00', '201']]

 

上面例子展示了橫坐標一共有六個點，第一條曲線只在第 1、3、5 個上有值，第二條曲線只在第 2、4 、6 個點上有值，這個時候需要注意一點的是，series.data 值的數組的第一個值要和 xAxis.data 數組中的值能對應上，不然不能繪制曲線。

下面詳細說明：

一、該項目用到的框架是 Angular ，在 Angular 中使用 Echarts ，首先要先引入 Echarts 庫

1. 在靜態資源文件 assets 中新建一個腳本文件夾 scripts 里面存放 echarts.min.js

2. 在 Angular CLI 配置文件 .angular-cli.json 中 ["apps"]["scripts"] 中引入這個腳本

二、在需要使用的組件中先聲明 echarts

declare const echarts: any;

三、繪制曲線（參考示例：Echarts 堆疊線）

/*繪制曲線*/
curvePlotting() {
    let detectRecordCurveContainer = document.getElementById("detectRecordCurveContainer"); // 獲取到繪制曲線的容器
    let myChart = echarts.init(detectRecordCurveContainer);  // 初始化

    const DetectRecordCurveInfo = {
      title: {
        text: this.getTitleTextData(),  // 選擇的項目名稱，該圖表的標題
        textStyle: {
          color: '#333',
          fontWeight: 'normal',
          fontSize: 18
        },
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        type: 'scroll', // 當檢測屬性過多時，水平滾動
        bottom: 0,
        data: this.getLegendData()   // 各條曲線的名稱，數組類型
      },
      grid: {
        left: 60,  // 比css中padding-left多40px
        right: 60, // 比css中padding-right多40px
        bottom: 40,
        containLabel: true
      },
      toolbox: {
        right: 30,  // 設置'保存圖片'文本的位置
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.getTimeData()   // 橫坐標，時間
      },
      yAxis: {
        type: 'value'
      },
      series: this.getSeries()  // 曲線的點
    };
    if (DetectRecordCurveInfo && typeof DetectRecordCurveInfo === "object") {  // 如果獲取到了數據且數據是對象，DetectRecordCurveInfo 是父組件傳來的可用的數據信息
      myChart.setOption(DetectRecordCurveInfo, true);
    }
  }