Echarts 动态数据绑定
从简单的小例子介绍-可视化图表的动态数据绑定,抛砖引玉
绑定多组数据
很多时候需要展示的数据不单单是一组数据,很多时候会进行一个数据对比。这个时候只需要在series中增加一组数据,legend中添加一下这个数据组的name;
静态篇:
<html>
<head>
<title>ECharts.js 数据绑定</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<div id="chartmain" style="width:600px; height: 400px;"></div>
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'ECharts 数据统计'
},
legend:{
data:['访问量','用户量']
},
xAxis:{
data:["Android","IOS","PC","Other"]
},
yAxis:{},
series:[
{
name:'访问量',
type:'bar',
data:[180,420,333,83]
},
{
name:'用户量',
type:'bar',
data:[125,330,230,60]
}
]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
数据异步加载一
EChart中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。
1)先准备一份模拟JSON数据
{“name”:[“A”,"B,“B”,“Dr”],“data”:[44,440,444,400]}
2)
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//异步加载的配置项和数据显示图表
$.get('data.json').done(function (data) {
data = eval('('+data+')');
myChart.setOption({
title:{
text:'ECharts 异步加载数据'
},
tooltip:{},
legend:{
data:['访问量']
},
xAxis:{
data:data.name
},
yAxis:{},
series:[
{
name:'访问量',
type:'bar',
data:data.data
}
]
})
})
</script>
数据异步加载二
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//设置图标配置项
myChart.setOption({
title:{
text:'ECharts 异步加载数据'
},
tooltip:{},
legend:{
data:['访问量']
},
xAxis:{
data:[]
},
yAxis:{},
series:[
{
name:'访问量',
type:'bar',
data:[]
}
]
})
//异步加载数据
$.get('data.json').done(function (data) {
data = eval('('+data+')');
myChart.setOption({
xAxis:{
data:data.name
},
series:[
{
//根据名字对应到相应的系列
name:"访问量",
data:data.data
}
]
})
})
</script>
Loading动画加载
//打开loading动画
myChart.showLoading();
//加载数据函数
function bindData(){
//为了效果明显,我们做了延迟读取数据
setTimeout(function(){
//异步加载数据
$.get('data.json').done(function (data) {
//获取数据后,隐藏loading动画
myChart.hideLoading();
data = eval('('+data+')');
myChart.setOption({
xAxis:{
data:data.name
},
series:[
{
//根据名字对应到相应的系列
name:"访问量",
data:data.data
}
]
})
})
},2000)
}
bindData();
#最后切记 JSON数据一定要加载在 服务端