想要完成的功能:
画圆环图,pie
圆环图颜色需要换,
圆环图中间需要显示总数,官方文档在中间显示的文字是鼠标hover哪个显示哪个。
图标显示在圆环图的下方
遇到的困难:
1.因为官方文档中eChart是基于原生js写的,所以一开始不知道怎么使用AngularJS调用eChart。
后来百度了许多看了一些代码,发现用Angular的directive指令来调用比较方便。
2.圆环中间的总数,不知道用什么属性写
后来百度半天,找到了这个https://segmentfault.com/q/1010000004131705,发现原来是用title来设置
代码如下:
<!DOCTYPE html > <head> <Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Echarts--饼图</title> <!--<link rel="stylesheet" href="../jc/jquery-ui.css">--> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript" src="js/echarts.js"></script> <style> html{ height:100%; } </style> </head> <body data-ng-app="MyApp" style="height:100%;"> <div data-ng-controller='MyCtrl' style="width: 100%;height: 100%;"> <div align="center" style="width: 100%; height:100%;"> <div pie-charts data-source='group' style="width: 50%;height:50%;float: left;"> </div> </div> </div> <script> angular.module('MyApp',[]) .controller('MyCtrl',function($scope) { // $scope.group = ['测试栏目1']; }) .directive('pieCharts',function(){ return{ restrict:'AE',scope :{ source:'=' },template:'<div>这是饼图</div>',controller: function($scope){ },link:function(scope,element,attr){ var chart = element.find('div')[0]; var parent = element['context']; console.log(parent.clientHeight+":"+parent.clientWidth); //不知道后边3句是做什么用的 chart.style.width =parent.clientWidth+'px'; chart.style.height =parent.clientHeight+'px'; var myChart = echarts.init(chart); var option = { title : {//设置中间圆环的文字 text: '总数',x:"center",y:"center",subtext : '342',//这个需要动态获取 //正标题样式 textStyle: { fontSize:24,fontFamily:'Arial',fontWeight:100,//color:'#1a4eb0',},//副标题样式 subtextStyle: { fontSize:18,color:"#000",tooltip : {//设置鼠标经过圆环时出现的信息 trigger: 'item',formatter: "{b} <br/>{c} ({d}%)" //饼图、雷达图、仪表盘、漏斗图: a(系列名称),b(数据项名称),c(数值),d(饼图:百分比 | 雷达图:指标名称) },legend: {//下边的名称颜色对应图标 orient : 'horizontal',x : 'center',y : 'bottom',data:['测试栏目1','测试栏目2','测试栏目3'] },//calculable : true,//不知道这个做啥呢 series : [ { name:'访问来源',type:'pie',radius : ['40%','60%'],itemStyle : { normal : { label : { show : false },labelLine : { show : false } },emphasis : { label : { show : true,position : 'center',textStyle : { fontSize : '30',fontWeight : 'bold' } } } },data:[//这些value需要动态获取 {value:335,name:'测试栏目1'},{value:310,name:'测试栏目2'},{value:234,name:'测试栏目3'},] } ],//设置饼图的颜色 color: ['#DA251D','#F8C300','#0093DD'] }; myChart.setOption(option); myChart.resize(); } }; }); </script> </body> </html>
效果图: