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打开的,进行编 ...
随机推荐
- /bin/bash: sshpass: command not found
按照如下命令进行安装即可: apt-get install sshpass
- PHP 生成 MySql 数据库字典
项目说明 通过配置 MySql 数据库信息,使用 PHP 生成数据表字典可以输出在当前页面,可以生成文件保存在指定位置,也可以下载格式支持网页HTML格式.CSV格式(Excel 读取).ZIP压缩格 ...
- Android配置横屏资源与Activity生命周期
屏幕旋转会改变设备配置(device configguration).设备设置的特征有:屏幕方向.屏幕像素密度.屏幕尺寸.键盘类型.底座模式以及语言等. 当屏幕发现旋转时(设备配置更改),And ...
- React组件Components的两种表示方式
函数式的表示: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } Class式的表示: clas ...
- LightOJ - 1032 数位DP
#include<iostream> #include<algorithm> #include<cstdio> #include<cstring> #i ...
- JedisPool
package redis; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import redis. ...
- vue中watch的使用
vue中watch的使用 vue中的watch是一个比较重要的概念,通过他我们可以检测data的变化,下面进行详细的介绍. watch定义方式如下: {[key: string]: string | ...
- 02-struts2结果常见的四种处理方式
1 转发 <!--转发 --> <action name="Demo1Action" class="www.test.a_result.Demo1Act ...
- angular2 遇到的问题汇总
angular2 学习资源集锦:https://github.com/timjacobi/angular2-education 在学习angular开发项目过程遇到的问题: 1. 不同componen ...
- PCU
PCU(Peak concurrent users ),互联网术语,应用在网络游戏和其他互联网服务领域,意思是最高同时在线人数 业务系统架构性能提升主要分为两种不同的方式,scale-out(横向扩展 ...