基礎折線圖

簡單示例

我們可以用以下程式碼構建一個 x 軸為類目（category）、y 軸為數值（value）的折線圖。

option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150],
      type: 'line'
    }
  ]
};
線上示例

在這個例子中，我們在 xAxis 和 yAxis 中分別設定了座標軸的型別為 category（類目）和 value（數值），並透過 data 明確了 x 軸上的內容。在 series 中，我們將型別設定為 line（折線），並透過 data 指定了三個點的值。這樣，我們就得到了一個簡單的折線圖。

這裡的 type 可以省略，因為座標軸的預設型別是 value，而當 xAxis 指定了類目的 data 時，ECharts 能識別出這是一個類目軸。

直角座標系中的折線圖

如果我們希望折線圖是連續的，該如何實現呢？答案很簡單，只要將 series 的 data 中的每個值都表示為一個包含兩個元素的陣列即可。

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      data: [
        [20, 120],
        [50, 200],
        [40, 50]
      ],
      type: 'line'
    }
  ]
};
線上示例

自定義折線圖

折線圖樣式

折線圖樣式可以透過 lineStyle 設定來更改。你可以指定顏色、線寬、折線型別和透明度等。詳情請查閱手冊 series.lineStyle。

這是一個設定顏色、線寬和型別的示例。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      lineStyle: {
        normal: {
          color: 'green',
          width: 4,
          type: 'dashed'
        }
      }
    }
  ]
};
線上示例

當我們在這裡設定線寬時，資料點的線寬不會改變。資料點的樣式需要單獨設定。

資料點樣式

資料點樣式可以透過 series.itemStyle 來更改。它包括 color（顏色）、borderColor（邊框顏色）、borderStyle（邊框樣式）、borderWidth（邊框寬度）、borderType（邊框型別）、shadowColor（陰影顏色）、opacity（透明度）等。其工作方式與 lineType 類似，因此我們不再進一步討論。

在資料點上顯示數值

在系列（series）中，資料點的標籤由 series.label 指定。如果我們將 label 下的 show 改為 true，數值將預設顯示。另外，如果 series.emphasis.label.show 為 true，則只有當滑鼠滑過資料點時才會顯示標籤。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      label: {
        show: true,
        position: 'bottom',
        textStyle: {
          fontSize: 20
        }
      }
    }
  ]
};
線上示例

空資料

在 series 中可能存在空資料。它與 0 有所不同。當存在空資料時，折線圖會忽略該點，而不會穿過它——空資料點不會被相鄰的點連線起來。

在 ECharts 中，我們使用 '-' 來表示空資料，這也適用於其他系列中的資料。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [0, 22, '-', 23, 19],
      type: 'line'
    }
  ]
};
線上示例

請注意空資料和 0 之間的區別。

貢獻者 在 GitHub 上編輯此頁

pissang