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 = $('').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页面：
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]+'人
总额：'+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的第一个元素都是数量的值。