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>

<div id="traceProvinceOrder" style="width:400px; height:400px;"></div>

<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>