面积图

面积图将折线与坐标轴之间的空间进行填充,通过面积的大小来表现数据。相较于普通的折线图,面积图具有更直观的视觉效果。它尤其适用于只有少量系列(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