基本折線圖

簡單範例

我們可以透過以下程式碼建立一個折線圖，其 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.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 pissang