通过echarts制作渐变堆叠面积图

制作渐变堆叠面积图,如下:

渐变堆叠面积图(echarts) - 图1

创建一个JavaScript图表:

渐变堆叠面积图(echarts) - 图2

进入这个echats网站将JS代码复制到有数中:

https://echarts.apache.org/examples/zh/editor.html?c=area-stack-gradient

点击应用如下图:

渐变堆叠面积图(echarts) - 图3

将字段拖入列中:

渐变堆叠面积图(echarts) - 图4

修改代码:

1、使用dataSet方法获取有数中的二维数组数据。

dataSet详情:

https://study.sf.163.com/documents/read/FAQ/tbz03

渐变堆叠面积图(echarts) - 图5

  1. 修改X轴:

渐变堆叠面积图(echarts) - 图6

  1. 修改Y轴:

渐变堆叠面积图(echarts) - 图7

  1. 修改series系列的信息(代码过长,只复制一个,不同可以看是下方视频)

渐变堆叠面积图(echarts) - 图8

视频链接:https://www.bilibili.com/video/BV1dY411p7kU