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打开的,进行编 ...
随机推荐
- Flink应用场景
本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...
- DHCP协议及基本实现原理
DHCP(Dynamic Host Configuration Protocol):动态主机配置协议. DHCP的优缺点 DHCP服务优点:网络管理员可以验证IP地址和其它配置参数,而不用去检查每个主 ...
- Python之freshman04
一.迭代器 我们已经知道,可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带yield的 ...
- chrome 相关设置.
1. 使用chrome 添加道桌面的快捷方式,自动打开两个 tab 解决方法: chrome://apps/ 右击 你的应用图标..勾选在新窗口打开.
- GCD（最大公约数）和LCM（最小公倍数）的求法
GCD(最大公约数) (1)辗转相除法(欧几里得算法)(常用) 将两个数a, b相除,如果余数c不等于0,就把b的值给a,c的值给b,直到c等于0,此时最大公约数就是b (2)更相减损术 将两个书中较 ...
- C++_异常7-exception类
C++异常的主要目的是为了设计容错程序提供语言级支持. 即异常使得在程序设计中包含错误处理功能更加容易,以免事后采取一些严格的错误处理方式. 异常的灵活性和相对方便性激励着程序员在条件允许的情况下在程 ...
- c3m快速入门
- [USACO18FEB]Taming the Herd
Luogu4267 题解 对于\(dp[i][j]\) , 预处理出一些转移一步的次数 , 然后可以很方便的转移 : \(dp[i][j]=min(dp[k][j-1]+cnt[j][i])\)
- js定时器的结束和开始
今天在做一个页面的报表的时候,需要在报表内容改变后屏蔽掉页面上的一些选择框. 因为这个报表是自身的链接实现的改变,我只能读取到history改变了,基于这个来判断 我写了一个判断条件,然后将他放在了一 ...
- Q680 验证回文字符串 Ⅱ
给定一个非空字符串 s,最多删除一个字符.判断是否能成为回文字符串. 示例 1: 输入: "aba" 输出: True 示例 2: 输入: "abca" 输出: ...