Echarts重新渲染數(shù)據(jù)時咳秉，需要異步
入坑情景：
在項目中需要使用echarts躯肌，所以在百度官方文檔上找了一下，在根據(jù)以下代碼：
1.引入Echarts:
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</header>
</html>
2.準備DOM容器來盛放圖表：
<body>
<!-- 為 ECharts 準備一個具備大幸干唷（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
3.為圖表準備數(shù)據(jù)：
// 基于準備好的dom赂苗，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表铃将。
myChart.setOption(option);
以下就是生成的效果圖：
echarts_effect.png
在Angular中使用：
1.定義指令
var md = require('../module/common');
md.directive('echarts', echartsDirective);
echartsDirective.$inject = ['$rootScope', '$parse'];
function echartsDirective($rootScope,$parse){
return {
restrict: 'EA',
scope:{option:"="},
link: function(scope, ele, attrs) {
var nowid = attrs.id;
var myChart = echarts.init(document.getElementById(nowid));
myChart.setOption(scope.option);
}
};
}
2.在jade中引入指令
div(echarts ="myecharts" id="myecharts1" style="width:100%;height:500px;"
option="option1")
3.在Controller中初始echarts
initChart(data);
function initChart(resFigureData) {
$scope.option1 = {
title: {
text: '工單個數(shù)'
},
tooltip: {},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['工單個數(shù)']
},
xAxis: {
data: ['總量', '客觀題', '主觀題']
},
yAxis: {},
series: [
{
name: '工單個數(shù)',
type: 'bar',
data: [resFigureData.total_bill, resFigureData.kg_count, resFigureData.zg_count],
barMaxWidth: 50,
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
];
return colorList[params.dataIndex];
},
label: {
show: true,
position: 'top',
formatter: '{c}m',
textStyle: {
color: 'tomato'
}
}
}
}
}
]
};
}
到目前為止，可以在頁面中渲染出相應的圖表哑梳。
然而，需求是要根據(jù)時間的變化改變圖表中的內容绘盟。幾經(jīng)嘗試鸠真，發(fā)現(xiàn)這個initChart方法只能被觸發(fā)一次悯仙。
想法：當點擊按鈕時，時間發(fā)生了變化吠卷，讓當Controller發(fā)一個事件出去锡垄，讓指令中的link來監(jiān)聽這個事件。
發(fā)事件：
$scope.$broadcast('FigureDataChange', ()=> {});
監(jiān)聽事件：
scope.$on('FigureDataChange', function() {
myChart.setOption(scope.option);
});
在頁面中還是沒達到效果祭隔，第一次點擊時货岭，坐標內的內容全為0，第二次點擊才出現(xiàn)相應的數(shù)據(jù)疾渴。
猜測：可能是數(shù)據(jù)還沒來得及更新千贯，圖表就已渲染完了，因為數(shù)據(jù)是請求的搞坝。
所以搔谴，采用$timeout來異步執(zhí)行事件分發(fā)。
$timeout(function () {
$scope.$broadcast('FigureDataChange', ()=> {});
});
結論：echarts更新數(shù)據(jù)時桩撮，即時顯示數(shù)據(jù)應異步操作的敦第。
