公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

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

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

第一步,引用js文件:

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

百度echarts引用多个图表放置同一个页面_www.uibq.com

第二步,dome 结构:

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

百度echarts引用多个图表放置同一个页面_www.uibq.com

第三步,获取元素:

// 获取 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);

最终效果:

百度echarts引用多个图表放置同一个页面_www.uibq.com

    关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)