echarts是开源的画图工具，在angular框架中引入echarts不能直接使用。需要新建一个directive
//echarts基本参数
app.factory('$echartsConfig', function () {
return { tooltip : {
trigger: 'axis'
},
legend: {
data:[]
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : [1,2,3,4,5,6]
}
],
yAxis : [
{
type : 'value' }
],
series : [
{
name:'',
type:'line',
data:[0,0,0,0,0,0],
}
]
};
})
//echarts directive
.directive('echarts', ['$echartsConfig','$window', function ($echartsConfig,$window) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
if (!scope.$echartsInstance)
scope.$echartsInstance = {};
scope.$watch(attrs.echarts, function () {
var option=angular.extend({},$echartsConfig,scope.$eval(attrs.echarts));
if (option.id) {
scope.$echartsInstance[option.id] = echarts.init(element[0]);
scope.$echartsInstance[option.id].setOption(option);
} else {
scope.$echartsInstance = echarts.init(element[0]);
scope.$echartsInstance.setOption(option);
}
});
$window.onresize = function() {
if(scope.$echartsInstance.searchTimeOption)
scope.$echartsInstance.searchTimeOption.resize();
if(scope.$echartsInstance.searchCostOption)
scope.$echartsInstance.searchCostOption.resize();
if(scope.$echartsInstance.searchNumOption)
scope.$echartsInstance.searchNumOption.resize(); };
}
};
}])
html代码
<div class="panel-body" style="height:320px" echarts="searchCostOption" id="searchCost"></div>
每次 获取数据 加 到$echartsConfig 当中 ，并重新 初始化 echarts.init() searchCost
在页面中需要先加载数据 后显示 echarts 否则会发生不生效 的问题