動態(tài)修改數(shù)據(jù):
//這里用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;
}
//更新數(shù)據(jù)
var option = myChart.getOption();
option.series[0].data = data;
myChart.setOption(option);
}
</script>
API接口匯總:
==>echarts:
全局對象铺遂,在script標簽引入echarts.js文件獲得;
==>echartsInstance:
通過echarts.init創(chuàng)建的實例琢融;
1挑势、echartsInstance.setOption():
(設(shè)置圖表實例的配置項以及數(shù)據(jù)墅拭,萬能接口,所有參數(shù)和數(shù)據(jù)的修改都可以通過setOption
完成股囊,ECharts 會合并新的參數(shù)和數(shù)據(jù)袜匿,然后刷新圖表。如果開啟動畫的話毁涉,ECharts 找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化沉帮。)
注:當(dāng)通過ajax請求數(shù)據(jù),動態(tài)修改數(shù)據(jù)時,可通過setOption去修改部分配置穆壕。
myChart.setOption({
visualMap: {
inRange: {
color: ...
}
}
})
2待牵、echartsInstance.getOption():
(獲取當(dāng)前實例中維護的option對象,返回的option對象中包含了用戶多次setOption合并得到的配置項和數(shù)據(jù)喇勋,也記錄了用戶交互的狀態(tài)缨该,例如圖例的開關(guān),數(shù)據(jù)區(qū)域縮放選擇的范圍等等川背。所以從這份 option 可以恢復(fù)或者得到一個新的一模一樣的實例贰拿。)
3、echartsInstance.resize():
(有時候圖表會放在多個標簽頁里熄云,那些初始隱藏的標簽在初始化圖表的時候因為獲取不到容器的實際高寬膨更,可能會繪制失敗,因此在切換到該標簽頁時需要手動調(diào)用 resize 方法獲取正確的高寬并且刷新畫布缴允,或者在 opts 中顯示指定圖表高寬荚守。)
==>action:
ECharts中只支持的圖標行為,通過dispatchAciton觸發(fā)练般;
==>events:
在ECahrts中主要通過on方法添加事件處理函數(shù)矗漾;
ECarts中的事件氛圍兩種,一種是鼠標事件薄料,在鼠標點擊某個圖形上會觸發(fā)敞贡,還有一種是調(diào)用 dispatchAction后觸發(fā)的事件,如下所示:
myChart.on('click', function (params) {
console.log(params);
});
myChart.on('legendselectchanged', function (params) {
console.log(params);
});