面積圖

面積圖將折線與座標軸之間的空間進行填充,透過面積的大小來表現資料。相較於普通的折線圖,面積圖具有更直觀的視覺效果。它尤其適用於只有少量系列(series)的場景。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      areaStyle: {}
    },
    {
      data: [25, 14, 23, 35, 10],
      type: 'line',
      areaStyle: {
        color: '#ff0',
        opacity: 0.5
      }
    }
  ]
};
線上示例

如果你想改變折線圖的區域樣式,可以嘗試使用 areaStyle。將 'areaStyle' 設定為 {} 即可使用預設樣式:用系列的顏色以半透明方式填充區域。如果你想改變樣式,可以嘗試覆蓋 'areaStyle' 中的配置項。例如,第二個系列的顏色被改為了 50% 不透明度的黃色。

貢獻者 在 GitHub 上編輯此頁

pissang