百度echarts引用多个图表放置同一个页面

百度echarts:如何多个图表放置于同一个页面

第一步,引用js文件:

根据规范将 echarts.js 放置在项目对应目录,并引用;

1.png

第二步,dome 结构:

在 body 中写两个 div (容器)放置不同的图表,简单设置宽高样式。

2.png

第三步,获取元素:

// 获取 echarts 容器
var echartsOne = document.createElement("echarts-one");
var echartsTwo = document.createElement("echarts-two");

第四步,创建数组放置实例:

// 同一个页面使用多个图表,把 option 实例存储到数组中
var echart = [];

第五步,实例化 echarts 用例:

// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(echartsOne); 
// 指定图表的配置项和数据
option = { 这里的代码可以从官网 copy ... };	
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

第六步,实例化的echarts对象存储到我们之前创建的数组里:

echart.push(muChart);

最后,完整代码:

// 第一个图表
var myChart = echarts.init(echartsOne); 
option = { 这里的代码可以从官网 copy ... };	
myChart.setOption(option);
echart.push(myChart);

// 第二个图表
var myChart = echarts.init(echartsTwo); 
option = { 这里的代码可以从官网 copy ... };	
myChart.setOption(option);
echart.push(myChart);

最终效果:

4.png

原文链接:HelloWeb前端网 » 百度echarts引用多个图表放置同一个页面 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享