动态修改数据:
//这里用setTimeout代替ajax请求进行演示
window.setInterval(function () {
var data = [test, 5, 10, 40, 20, 10];
$.get("SQLTest.ashx",function(responseTxt,statusTxt,xhr)
{
test=responseTxt;
//if (statusTxt == "success")alert(test);
if (statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
data = [test, 5, 10, 40, 20, 10];
refreshData(data);
},3000);
function refreshData(data){
if(!myChart){
return;
}
//更新数据
var option = myChart.getOption();
option.series[0].data = data;
myChart.setOption(option);
}
</script>
API接口汇总:
==>echarts:
全局对象,在script标签引入echarts.js文件获得;
==>echartsInstance:
通过echarts.init创建的实例;
1、echartsInstance.setOption():
(设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过setOption
完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。)
注:当通过ajax请求数据,动态修改数据时,可通过setOption去修改部分配置。
myChart.setOption({
visualMap: {
inRange: {
color: ...
}
}
})
2、echartsInstance.getOption():
(获取当前实例中维护的option对象,返回的option对象中包含了用户多次setOption合并得到的配置项和数据,也记录了用户交互的状态,例如图例的开关,数据区域缩放选择的范围等等。所以从这份 option 可以恢复或者得到一个新的一模一样的实例。)
3、echartsInstance.resize():
(有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用 resize 方法获取正确的高宽并且刷新画布,或者在 opts 中显示指定图表高宽。)
==>action:
ECharts中只支持的图标行为,通过dispatchAciton触发;
==>events:
在ECahrts中主要通过on方法添加事件处理函数;
ECarts中的事件氛围两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是调用 dispatchAction后触发的事件,如下所示:
myChart.on('click', function (params) {
console.log(params);
});
myChart.on('legendselectchanged', function (params) {
console.log(params);
});