Echarts实现一个html页面同时显示多个图表

最近小编开发前端页面,根据需求做一个统计分析的页面.

需求是:Echarts实现一个html页面同时显示多个图表,布局为左右,右边有分上下的布局.

 如图所示:

参考文档:https://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

 步骤:1.先进行div中布局样式的调整.

         2.在指定的div中进行图表数据的填充.

个人思路:先放一张图在各个布局中看看能不能处来,然后在每个布局中放同样的图是否都展示出来,展示出来后,对三个图中的数据进行替换,就ok!(如果怕一次性整好,图不出来或者出来不全,可以试试这个笨办法)

注意:要保证多个图表的id不一致,每一个div处要有宽和高否则图表出不来.

根据官网的案例:

简单的进行记录,如果你也遇到跟我一样的问题,记得参考哦!