文中所提到的Echarts图表实例是指:并非一个容器(dom)内组合的多个图表,而是各自独立容器,独立的配置脚本,且可以独立放置在网页的任意位置。
如何在网页内嵌入多个Echarts图表实例?
注意要点
- 变量名称不能重复
整个页面存在多个echarts图表实例,各个图表实例中的变量名称不能重复,否则无法正常显示图表 - 实现多个图表实例窗口自适应
- window.onresize只适用一个图表尺寸大小自适应
window.onresize = function() {
myChart.resize();
};//图表随窗口大小而变化的自适应代码
- window.addEventListener适用多个图表尺寸大小自适应
如果需要设置多个图表自适应,则应在需要设置自适应的实例图表中配置如下代码,以替代上述代码:
window.addEventListener("resize",function(){
taskChart.resize();
});
且需保证图表名称不重复,如第一个echarts图表实例命名为myChart,则第二个图表应更改名称,例如taskChart。