通过echarts制作多Y轴混合图表

制作多Y轴混合图表,如下图:

通过echarts制作多Y轴混合图表 - 图1

创建一个JavaScript图表:

通过echarts制作多Y轴混合图表 - 图2

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

https://echarts.apache.org/examples/zh/editor.html?c=multiple-y-axis

点击应用如下图:

通过echarts制作多Y轴混合图表 - 图3

将需要的维度和度量拖入到列中:

通过echarts制作多Y轴混合图表 - 图4

使用dataSet方法引入有数中的字段

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

通过echarts制作多Y轴混合图表 - 图5

通过echarts制作多Y轴混合图表 - 图6

下面进行代码的修改:

1、修改图例信息:

通过echarts制作多Y轴混合图表 - 图7

2、修改X轴信息:

通过echarts制作多Y轴混合图表 - 图8

3、修改整个Y轴的信息:

通过echarts制作多Y轴混合图表 - 图9

  1. 修改series系列的信息

通过echarts制作多Y轴混合图表 - 图10

视频教程: