如何用AngularJS使用ECharts画图

想要完成的功能：

画圆环图，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>

效果图：

如何用AngularJS使用ECharts画图

相关文章