ECharts
中在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption
填入数据和配置项就行。
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 800px;height:800px;">ss</div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
myChart.setOption({
title:{
text:'异步数据加载'
},
tooltip:{},
legend:{
data:['销量']
},
xAxis:{
data:data.name
},
yAxis:{},
series:[{
name:'销量',
type:'bar',
data:data.value
}]
})
});
</script>
记得导入jquery-3.3.1.min.js之内的包,否则$可能会在控制台报未定义的错。
先设置其他的样式,显示一个空的直角坐标轴,然后获取数据后填入数据。
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title:{
text:'异步数据加载'
},
tooltip:{},
legend:{
data:['销量']
},
xAxis:{
data:[]
},
yAxis:{},
series:[{
name:'销量',
type:'bar',
data:[]
}]
});
$.get('data.json').done(function (data) {
myChart.setOption({
xAxis:{
data:data.name
},
series:[{
name:'销量',
data:data.value
}]
})
});
</script>
Loading动画
如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。
ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(.....);
数据的动态更新
所有数据的更新都通过 setOption实现,你只需要定时获取数据,setOption 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
例子:http://www.echartsjs.com/gallery/editor.html?c=doc-example/tutorial-dynamic-data