階梯線圖

普通折線圖直接用直線連線兩個資料點,而階梯線圖(也稱為方波圖)僅使用水平和垂直的線將相鄰的資料點連線起來。與普通折線圖相比,階梯線圖可以更清晰地顯示資料變化的突變情況。

在 ECharts 中,我們使用 step 來配置階梯線圖的連線型別。它有三個可選值:'start''end''middle'。對於資料點 A 和 B,這些值分別對應拐點在 A、B 以及 A 和 B 的中點。

option = {
  legend: {},
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Step Start',
      type: 'line',
      step: 'start',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Step Middle',
      type: 'line',
      step: 'middle',
      data: [220, 282, 201, 234, 290, 430, 410]
    },
    {
      name: 'Step End',
      type: 'line',
      step: 'end',
      data: [450, 432, 401, 454, 590, 530, 510]
    }
  ]
};
線上示例

請注意以下三種不同型別線上條上的差異。

貢獻者 在 GitHub 上編輯此頁

pissang