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],} ] }; }) //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>原文链接:https://www.f2er.com/angularjs/149528.html