文档章节

通过百度开源echarts图标插件用一个div动态生成多个echarts图表

andotorg
 andotorg
发布于 2017/08/18 16:34
字数 352
阅读 93
收藏 0

1、 首先新建一个html文件,书写基本html语法,然后新建一个div 并且命名id为ebox

2、引入JQuery图表插件开源js库文件 下载地址Download jQuery | jQuery

3、引入echarts图表插件开源js库文件 下载地址ECharts

4、书写jquery和echarts 脚本

注:这里只写了一个数据源,所以数据都是一样的,可以ajax动态取数据

5、效果展示

images

6、Ajax代码开放

//ajxa 代码是返回的json字符串,里面涉及了json字符串通过变量去取

$.ajax( {

    type : "post",

        async : false, //异步执行

url : 后台地址

data :par,

dataType : "json", //返回数据形式为json

success : function(result) {

if (result) {

for(var i=0; i< Number(result.number); i++){

var ds = "data"+i;

var ns = "name"+i;

$("#ebox").append('<div style="margin-left:40%;"><strong>'+result.nameMap[ns]+'</strong></div><div style="width:100%; height:200px; " id="ecr'+i+'"></div>');

noption.series[0].name = result.nameMap[ns];

var newY = new Array();

var nowH = new Date().getHours();

for(var j=0; j< result.data[ds][0].listValue.length; j++){

if(j < Number(nowH)){

newY[j] = result.data[ds][0].listValue[j];

}

}

noption.series[0].data = newY;//result.data[ds][0].listValue;

console.log(noption.series[0].name+"========="+noption.series[0].data);

echarts.init(document.getElementById("ecr"+i)).setOption(noption);

}

}

},

error : function(errorMsg) {

alert("图2表请求数据失败!");

}

});

7 后台代码(java书写,由于保密不发送。就是map和list集合拼写的数据而已,利用JSONObject返回json字符串)

© 著作权归作者所有

andotorg

andotorg

粉丝 6
博文 13
码字总数 4813
作品 0
济南
后端工程师
私信 提问
前端知识 | 浅谈在React中使用echarts

方法一: echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件。 和使用所有其他插件一样,首先,我们需要 install 它: 第一步: npminstall --save echarts(依赖) npmi...

海说软件
2018/06/26
0
0
代码问题,帮忙看下代码哪儿错了

@Kener-林峰 你好,想跟你请教个问题:今天做了个东西,代码如下,可是为什么第二个div内容就是不显示呢,单个的反而可以 示例

绝对鬼神
2014/01/07
556
3
零云技术分享之:ECharts可视化图表开发

欢迎交流:零云,互联网产品快速开发框架 百度有几个开源项目值得称赞的,比如blend2、UEditor、ECharts 等,这里我们聊一聊ECharts3 可视化图表库。 有了ECharts 3,我们可以非常方便的构建...

CoreThink
2017/03/06
258
0
全票通过!百度开源项目 ECharts 首进 Apache 孵化器

近日,全球著名开源社区 Apache 基金会宣布“百度开源的 ECharts 项目全票通过进入 Apache 孵化器”。这是百度第一个进入国际顶级开源社区的项目,也标志着百度开源正式进入开源发展的快车道...

ECharts
2018/03/08
10.1K
59
Echarts视频教程从入门到实战

Echarts视频教程从入门到实战 网盘地址:https://pan.baidu.com/s/1p-G9UbKmXFtnuJEdiLSw2w 密码:0e9u 备用地址(腾讯微云):https://share.weiyun.com/5sKBF8E 密码:4ms8rp 有这样一款制...

放风筝好不
2018/04/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

iOS TableView层级结构剖析

首先上图 下面来分析一下tableView的层级结构 tableView的组成: 1.整个tableView有且仅有一个头部和尾部就是tableViewHeadView和tableViewFooterView2.tableView 可以有多个section,一个s...

HOrange
4分钟前
0
0
HDFS核心工作原理绘图剖析

namenode元数据管理示意图

须臾之余
20分钟前
0
0
springMVC 文件上传

相关依赖 使用 springMVC 提供的文件上传需要在项目中加入两个 jar 包,对应的 maven 的依赖分别是:commons-io 和 commons-fileupload <dependency> <groupId>commons-io</groupId> ......

dahuil
41分钟前
2
0
以太坊中文文档翻译-智能合约

本文原文链接 点击这里获取Etherscan API 中文文档(完整版) 完整内容排版更好,推荐读者前往阅读。 智能合约(Contracts) 智能合约相关的 API,接口的参数说明请参考Etherscan API 约定, 文...

Tiny熊
51分钟前
3
0
Tomcat

16.1 Tomcat介绍 16.2 安装jdk 16.3 安装Tomcat 16.4 配置Tomcat监听80端口 16.5/16.6/16.7 配置Tomcat虚拟主机 16.8 Tomcat日志 扩展 java容器比较 http://my.oschina.net/diedai/blog/2713......

tobej
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部