AngularJS与echart整合

Angular不能直接使用echarts，需要用directive指令来操作，如此实现echarts需要三部分协作完成，包括html标签，controller.js对数据的控制，derective.js对报表的操控。

代码示例:

directive.js如下:

angular.moudle("'app.directives").directive('pie6Charts',function($window){

return{

restrict:'AE',

scope :{

piedata:'=',

swname: '=',

changeData: '&combineDataChange',

action:'&'

},

template:'<div style="width:100%;">这是饼图</div>',

controller: function($scope){

},

link:function(scope,element,attr){

var chart = element.find('div')[0];

var parent = element['context'];

chart.style.height =(parent.clientHeight || parseInt(parent.style.height) )+'px';

var myChart = echarts.init(chart);

 

var option = {

backgroudColor:'#fff',

tooltip: { // 提示框，鼠标悬浮交互时的信息提示

trigger: 'item',

formatter: "{a} <br/>{b} : {c} ({d}%)",

axisPointer :{

type:'none'

}

},

legend: { // 图例

orient: 'horizontal', // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'

x: 'center', // 水平安放位置，默认为全图居中，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）

y: 'top', // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）

backgroundColor: 'rgba(0,0,0,0)',

borderColor: '#ccc', // 图例边框颜色

borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）

padding: 30, // 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css

itemGap: 10, // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔

itemWidth: 20, // 图例图形宽度

itemHeight: 14, // 图例图形高度

textStyle: {

color: '#333' // 图例文字颜色

},

data:$scope.legend

},

toolbox: {

show:false,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType : {

show: true,

type: ['pie', 'funnel'],

option: {

funnel: {

x: '25%',

width: '50%',

funnelAlign: 'left',

max: 1548

}

}

},

restore : {show: true},

saveAsImage : {show: true}

}

},

calculable : true,

series:scope.piedata //数据内容数组

 

};

myChart.setOption(option);

myChart.on('click', function (params) {

var assetTypeId=params.data.assetTypeId;

if (assetTypeId!=undefined){

scope.$apply();

scope.action()(assetTypeId);

}

var swName=params.data.swName;

if (swName!=undefined){

scope.swname=swName;

scope.$apply();

scope.changeData();

}

var typeCode=params.data.typeCode;

if (typeCode!=undefined){

scope.$apply();

scope.action()(typeCode);

}

 

});

var w = angular.element($window);

scope.width = function(){

return parent.clientWidth;

}

scope.$watch('width()',function(newVal, oldVal){

myChart.resize();

})

w.bind('resize', function () {

scope.$apply();

});

$('.collapse').bind('click',function(){

scope.$apply();

})

}

};

})

 

备注:

scope中的符号表示:

@绑定：在子作用域重置属性内容前：父作用域的属性内容修改会使子作用域对应的属性内容也随之修改，子作用域属性内容变化不会影响到父作用域对应的属性内容。在子作用域重置属性内容后：子作用域仍然会根据父作用域变化而变化，但如果将scope属性设为true，则不会随之变化。

=绑定：创建一个父与子作用域可以同时共享的属性，完全共享和同步。

&方法绑定:支持传参，需要在html标签中，添加对应属性，调用controller方法即可。

$watch(watchFn,watchAction,deepWatch)

watchFn:angular表达式或函数的字符串

watchAction(newValue,oldValue,scope):watchFn发生变化会被调用

deepWatch：可选的布尔值命令检查被监控的对象的每个属性是否发生变化，当为true时，若监控对象是数组，只要某位发生改变，就会调用到，否则无法监听到变化。

 

html标签如下:

<div pie6-charts ng-if="ctrl.piedata" data-piedata="ctrl.piedata" action="ctrl.reloadTable" ></div>

备注: “pie6-charts”为directive指令名称，"ctrl.piedata"为controller里的数据,“action”为derective传递过来的属性，这里的作用是图表点击事件调用controller中的方法。

 

controller.js如下:

vm.piedata=[{

name: '' , type: 'pie', radius: '65%', center: ['50%', '55%'],

label: {

normal: { show: true },

emphasis: { show: true }

},

lableLine: {

normal: { show: true },

emphasis: { show: true }

},

color: vm.color, // 设置颜色

data: vm.classify, // 设置数据

itemStyle: {

emphasis: { shadowBlur: 10, shadowOffsetX: 2, shadowColor: 'rgba(0, 0, 0, 0.5)' },

normal: { borderWidth:1, borderColor:'#fff', }

}

}];

备注:定义好颜色数组，然后将数据填充到data数组即可.