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打开的,进行编 ...
随机推荐
- SDUT OJ 数据结构实验之图论五：从起始点到目标点的最短步数（BFS）
数据结构实验之图论五:从起始点到目标点的最短步数(BFS) Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss P ...
- 阻止datagrid填充已经获取到的远程数据
时光流逝,弹指挥间,不经意的一年又如路上一个动人的靓影悄然消失在视线里.我们往往都是先问自己,我们收获了什么,然后才想到我们付出了什么,很少有人先问自己这一年付出了什么,然后再去看所得.话不多说了,祝 ...
- vscode 遇到设置问题
// 控制是否在新窗口中打开文件. // - default: 除了从软件内部选择的文件 (如,从“文件”菜单选择),其他所有文件都将在新窗口中打开 // - on: 文件将在新窗口中打开 // - ...
- ionic4 refresh组件位置变更：Ignored attempt to cancel a touchmove event with cancelable=false
io3 中 refresh组件位置可不定: io4 中 须置顶,否则报错,此外complete方法的调用位置改为target属性 参考:https://github.com/ionic-team/io ...
- DHCP协议及基本实现原理
DHCP(Dynamic Host Configuration Protocol):动态主机配置协议. DHCP的优缺点 DHCP服务优点:网络管理员可以验证IP地址和其它配置参数,而不用去检查每个主 ...
- 【转】IntelliJ Idea取消Could not autowire. No beans of 'xxxx' type found的错误提示
1.问题描述 在Idea的spring工程里,经常会遇到Could not autowire. No beans of 'xxxx' type found的错误提示.但程序的编译和运行都是没有问题的, ...
- JDBC 连接 postgresql 时区变 UTC
加上 时区 语句 ..-Duser.timezone=PRC
- P2387 [NOI2014]魔法森林
传送门 如果一条边只要考虑 $a$ 的限制,那么显然最小生成树 但是现在有 $a,b$ 两个限制,所以考虑按 $a$ 从小到大枚举边,动态维护 $b$ 的最小生成树 考虑新加入的一条边 $x,y$ , ...
- Gson反序列化泛型实例
1 package com.ppmoney.g2.mapper; import com.google.common.reflect.TypeToken; import com.google.gson. ...
- 1144 The Missing Number （20 分）
Given N integers, you are supposed to find the smallest positive integer that is NOT in the given li ...