angularjs 使用echarts

在项目中应用到了图表展示，用echarts，通过指令的方式，下面是具体的应用代码：

1. echarts指令

app.directive('echarts', function($parse, $interval){
	return {
		restrict: 'AE',
		replace: true,
		scope: {
			options: '=',
			height: '@',
			width: '@'
		},
		link: function(scope, element, attrs, ctrl) {
			var wrap = $('<div></div>').css({
				width: scope.width||'100%',
				height: scope.height||'210'
			});
			$(element).css({
				display:'block',
				width: scope.width||'100%',
				height: scope.height||'210'
			});
			var myChart = echarts.init(element[0]);
			window.addEventListener('resize',function(){
                    myChart.resize();//监测图表自适应
                })

			scope.$watch('options', function(n, o){
				if (typeof(n)=='object') {
					myChart.setOption(scope.options);
					
				};
			});
			
		}
	};
});

2.具体的应用方式：

html页面：

<echarts options="pieOptions" height="3rem"></echarts>

js页面：

$scope.pieOptions ={
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(255,255,255,0.90)',
                        borderColor:'#20C1DC',
                        borderWidth:1,
                        extraCssText:'border-radius: 8px',
                        textStyle:{
                            color:'#1D93A7',
                            lineHeight:18,
                            fontSize:12,
                            fontFamily:' PingFangSC-Semibold'
                        },
                        formatter: function(param){
                            console.log(param,'huan')
                            if(param.name=='剩余量'){
                             return  '剩余量：'+param.value[0]+'亿';
                         }if(param.name=='总量占比'){
                            return;
                         }
                         else{
                             return '客户：'+param.value[1]+'人 <br/>总额：'+param.value[0]+'亿' 
                         }

                     }

                 },
                 legend: {
                    orient: 'vertical',
                    itemWidth:16,
                    x: 'right',
                    align:'left',
                    top:80,
                    left:500,
                    textStyle:{
                     color:'#fff',
                 },
                 data:['有意向','待定','无意向','剩余量']
             },
             series: [  
             {
                name:'管理',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                hoverAnimation:false,
                center:['30%','50%'], 
                itemStyle:{
                    normal:{  
                        color:'rgb(56,67,87)'
                    }
                },
                label: {
                    normal: {
                        position: 'center',
                        color:'#fff',
                        fontSize:12,
                        formatter:function(params){
                            console.log(params,'pie')
                            return params.name+'\n'+params.value+'%'
                        }

                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[

                {value:res.data.data.enquPct, name:'总量占比'},
                
                ]
            },
            {
                name:'访问来源',
                type:'pie',
                radius: ['55%', '85%'],
                center:['30%','50%'],
                itemStyle:{
                    normal:{
                        // color:''
                    },
                    label : {  
                        show : false  
                    },
                },
                label: {
                    normal: {
                        show:false,
                }
            },
            labelLine: {
                    normal: {
                        show: false
                    }
                },
            data:$scope.pieData
        }
        ],
        color:['rgb(35,193,219)','rgb(62,153,169)','rgb(45,134,149)','rgb(127,165,171)']//改变饼图饼块的颜色
    }

在js中，可以直接参考echarts官方文档上面的示例进行应用。

说完了引用echarts的方法，下面我在稍微介绍一下在使用echarts过程中遇到的坑。  对于上述例子当中的series中的data  我这里是通过后台获取，然后自己重组的。$scope.pieData。

在官方文档上面，data的数据格式如下：

data:[
                {value:335, name:'直达'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'}]

为了满足项目的需求，鼠标滑过饼图的时候显示的数据，需要对data进行修改。具体如下：

$scope.pieData=[
                {value:[intntAmount,intntCustNum],name:'有意向'},
                {value:[pendAmount,pendCustNum],name:'待定'},
                {value:[unIntntAmount,unIntntCustNum],name:'无意向'},
                {value:[surplusNum,0],name:'剩余量'}]

改造之后的数据可以通过tooltip里面formatter的参数param查看，这里值得注意的是，饼图按比例生成的饼块是通过value的数据划分的，当把value赋值成数组的话，饼块划分比例是按照value值得第一个元素获取的，因此一定要注意value当中数据值得对应状态，也就是说，想按照数量生成饼图的话，必须value的第一个元素都是数量的值。