ECharts动态数据加载
最近有用到ECharts做可视化报表，小结一下
一、准备数据
1.官网下载echarts.min.js
2.引入jquery.js
3.请求用的json数据
{
"list":[
{
"department":"和平区",
"num":480,
"ber":200
},
{
"department":"河西区",
"num":380,
"ber":460
},
{
"department":"河东区",
"num":366,
"ber":223
},
{
"department":"河北区",
"num":320,
"ber":210
},
{
"department":"南开区",
"num":300,
"ber":200
}
]
}
二、整体代码
<!DOCTYPE html> <head>
<meta charset="utf-8">
<title>ECharts</title>
</head> <body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="traceProvinceOrder" style="width:400px; height:400px;"></div>
<!-- ECharts单文件引入 -->
<script src="echarts.min.js"></script>
<script src="../webapp/js/jquery.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('traceProvinceOrder'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
color: ["pink", 'red'],
tooltip: {},
legend: {
data: ['发布排行', '牵手排行'],
x:'70%'
},
xAxis: {
data: []
},
yAxis: {},
series: [{
barWidth: "20px",
name: '发布排行',
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#333'
}
}
}
},
data: []
},
{
barWidth: "20px",
name: '牵手排行',
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#333'
}
}
}
},
data: []
}
]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var names = []; //类别数组（实际用来盛放X轴坐标值）
var nums = []; //销量数组（实际用来盛放Y坐标值）
var bers = []; //销量数组（实际用来盛放Y坐标值）
$.ajax({
type: 'get',
url: 'city.json', //请求数据的地址
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
$.each(result.list, function (index, item) {
names.push(item.department); //挨个取出类别并填入类别数组\
nums.push(item.num); //挨个取出销量并填入销量数组
bers.push(item.ber); //挨个取出销量并填入销量数组
});
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '发布排行', //显示在上部的标题
data: nums
},
{
// 根据名字对应到相应的系列
name: '牵手排行', //显示在上部的标题
data: bers
}
]
});
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});
</script>
</body>
一个简单的柱状图表展示
行动才是最具有价值，即使做错。——送给努力的你
ECharts动态数据加载的更多相关文章
- echarts异步数据加载(在下拉框选择事件中异步更新数据)
接触echarts 大半年了,从不会到熟练也做过不少的图表,隔了一段时间没使用这玩意,好多东西真心容易忘了.在接触echarts这期间也没有总结什么东西,今天我就来总结一下如何在echart中异步加载 ...
- 【微信小程序】模仿58同城页面制作以及动态数据加载
完成动态数据的加载,如下 使用上班的空余时间慢慢的学习,相信总有一天我会很熟悉的掌握这门技术. 本次学习小总结: 微信小程序使用的代码基本与HTML.CSS.JS等前段有关知识一样. 微信小程序js使 ...
- Echarts通过Ajax实现动态数据加载
Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通 ...
- echarts ajax数据加载方法
一: <!-- 引入 echarts.js --> <script type="text/javascript" src="echarts.min.js ...
- Echarts 异步数据加载遇到的问题
看了Echarts官网异步加载数据的Demo var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴 ...
- 实现虚拟模式的动态数据加载Windows窗体DataGridView控件 .net 4.5 （一）
实现虚拟模式的即时数据加载Windows窗体DataGridView控件 .net 4.5 原文地址 :http://msdn.microsoft.com/en-us/library/ms171624 ...
- ios ableviewcell的动态加载数据，模仿喜马拉雅动态数据加载
iphone(UITableViewCell)动态加载图片http://developer.apple.com/library/ios/#samplecode/LazyTableImages/Intr ...
- echarts 设置数据加载遮罩层
//显示加载数据的loading chart.showLoading({ text: "图表数据正在努力加载...", x ...
- H5+JS+JQuery+ECharts实现异步加载
这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...
随机推荐
- selenium+PhantomJS简单爬虫
#!/usr/bin/env python # -*- coding: utf-8 -*- ''' Created on 2017年10月19日 @author: zzy ''' import tim ...
- postgresql编译安装与调试（一）
因为最近组里的项目和postgresql有关,并且需要查看和调试源码,所以专门学习了一下如何安装和调试postgresql,此博文用来记录自己的安装和调试过程.安装环境是CentOS6(CentOS7 ...
- 最小生成树问题：Kruskal算法 AND Prim算法
Kruskal算法: void Kruskal ( ) { MST = { } ; //边的集合,最初为空集 while( Edge ...
- C语言——从入门到精通，从精通到放弃
从第一次在CB上运行处 Hello World开始,哈哈哈哈,便开始各种幻想,哈哈哈哈,想着这就入门了,哈哈哈哈,我果然是个天才,哈哈哈哈. 后来啊,if-else语句,for 语句,while语句, ...
- SDUT OJ 顺序表应用3：元素位置互换之移位算法
顺序表应用3:元素位置互换之移位算法 Time Limit: 1000 ms Memory Limit: 570 KiB Submit Statistic Discuss Problem Descri ...
- PHP脚本占用内存太多，解决方案
Fatal Error: Allowed memory size of xxxxxx bytes exhausted 今天遇到服务器很多自动任务的php脚本占用服务内存过多,并且程序不在运行了. 解决 ...
- Java 实现邮件的发送
Java 实现邮件的发送 开发邮箱发送功能必须看邮箱方面的资料 改一些东西 (我的是qq 邮箱哟 开通 POP3 ...
- windows xp 环境下 Oracle8i 双击安装文件无反应的解决办法
今天调试一份比较老的程序,数据库用的是Oracle8i,在本地xp系统上搞了半天,双击安装文件就是没反应! 在网上整理了一下解决办法: 1.将ORACLE软件拷贝到硬盘. (比如我拷贝到:F:\Ora ...
- python学习之路---day21--模块和栈
模块和栈 一:计数模块collections 基础版本: s="qwewsfdfjiehrfqweqweqwqewq" dic={} for el in s: dic[el]=di ...
- 最小生成树----prim算法的堆优化
题目描述 如题,给出一个无向图,求出最小生成树,如果该图不连通,则输出orz 输入输出格式 输入格式: 第一行包含两个整数N.M,表示该图共有N个结点和M条无向边.(N<=5000,M<= ...