AngularJS引入Echarts的Demo
Posted 凉城
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS引入Echarts的Demo相关的知识，希望对你有一定的参考价值。
最近要用到图表展示，想了想，还是首选Echarts，HighCharts和D3.js备用吧，
而项目中也用到了AngularJS，所以需要把Echarts引入到AngularJs中一起使用，
试了试，最方便的还是用指令，（虽然指令有点不好调，用了再说）。
1、引入angular.js
2、引入echarts.js
3、引入jquery.js---可以省略
4、直接上代码：
1 <!DOCTYPE html > 2 <head> 3 <meta charset="utf-8"> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 5 <title>Echarts--柱状图与饼图</title> 6 <link rel="stylesheet" href="../jc/jquery-ui.css"> 7 <script type="text/javascript" src="../jc/jquery.min.js"></script> 8 <script type="text/javascript" src="../jc/jquery-ui.min.js"></script> 9 <script type="text/javascript" src="../jc/angular.min.js"></script> 10 <script type="text/javascript" src="../3rd/echarts/echarts.js"></script> 11 <style> 12 html{ 13 height:100%; 14 } 15 16 </style> 17 </head> 18 19 <body data-ng-app="MyApp" style="height:100%;"> 20 <div data-ng-controller=‘MyCtrl‘ style="width: 100%;height: 100%;"> 21 <h3>Echarts柱状图与饼图---指令directive</h3> 22 23 <div align="center" style="width: 80%; height:100%;"> 24 <div align="left"> 25 <select data-ng-model="chart" 26 data-ng-options="x for (x, y) in myCharts" 27 data-ng-change = "showChange(chart)" 28 > 29 </select> 30 </div> 31 32 <div data-ng-show="show" bar-charts data-source=‘groupData‘ style="width: 100%;height: 80%;"></div> 33 <div data-ng-show="!show" pie-charts data-source=‘group‘ data-ng-repeat="group in groupData" 34 style="width: 30%;height:30%;float: left;"> 35 </div> 36 </div> 37 </div> 38 <script> 39 angular.module(‘MyApp‘, []) 40 .controller(‘MyCtrl‘, function($scope) { 41 $scope.groupData = [‘测试栏目1‘,‘测试栏目2‘,‘测试栏目3‘,‘测试栏目4‘,‘测试栏目5‘,‘测试栏目6‘]; 42 $scope.chart = 0; 43 $scope.show = true; 44 $scope.myCharts = { 45 "柱状图":0, 46 "饼图":1 47 }; 48 $scope.showChange = function(chart){ 49 if(chart==0){ 50 $scope.show = true; 51 }else{ 52 $scope.show = false; 53 } 54 }; 55 }) 56 .directive(‘barCharts‘,function(){ 57 return{ 58 restrict:‘AE‘, 59 scope :{ 60 source:‘=‘ 61 }, 62 template:‘<div>这是柱图</div>‘, 63 controller: function($scope){ 64 }, 65 link:function(scope,element,attr){ 66 console.log(scope.source); 67 var chart = element.find(‘div‘)[0]; 68 var parent = element[‘context‘]; 69 // console.log(parent.clientHeight+":"+parent.clientWidth); 70 chart.style.width =parent.clientWidth+‘px‘; 71 chart.style.height =parent.clientHeight+‘px‘; 72 73 var myChart = echarts.init(chart); 74 var option = { 75 title:{ 76 text:‘工作空间使用情况‘ 77 }, 78 tooltip:{ 79 trigger:‘axis‘, 80 axisPointer:{ 81 type:‘shadow‘ 82 } 83 }, 84 legend: { 85 //data:[‘正常‘,‘警告‘,‘预警‘,‘剩余‘] 86 }, 87 gird:{ 88 left: ‘5%‘, 89 right: ‘5%‘, 90 bottom: ‘5%‘, 91 containLabel: true 92 }, 93 xAxis:{ 94 type:‘value‘ 95 }, 96 yAxis:{ 97 type: ‘category‘, 98 data: scope.source //[‘测试栏目1‘,‘测试栏目2‘,‘测试栏目3‘,‘测试栏目4‘,‘测试栏目5‘,‘测试栏目6‘] 99 }, 100 series:[ 101 { 102 name:‘已使用‘, 103 type:‘bar‘, 104 stack:‘存储空间‘, 105 label:{ 106 normal:{ 107 show:true, 108 position:‘insideRight‘ 109 } 110 }, 111 barWidth:‘80%‘, 112 data:[100,200,300,260,50,120] 113 }, 114 { 115 name:‘剩余‘, 116 type:‘bar‘, 117 stack:‘存储空间‘, 118 label:{ 119 normal:{ 120 show:true, 121 position:‘insideRight‘ 122 } 123 }, 124 barWidth:‘80%‘, 125 data:[200,100,2,80,200,180] 126 } 127 ] 128 }; 129 myChart.setOption(option); 130 myChart.resize(); 131 } 132 }; 133 }) 134 .directive(‘pieCharts‘,function(){ 135 return{ 136 restrict:‘AE‘, 137 scope :{ 138 source:‘=‘ 139 }, 140 template:‘<div>这是饼图</div>‘, 141 controller: function($scope){ 142 }, 143 link:function(scope,element,attr){ 144 145 var chart = element.find(‘div‘)[0]; 146 var parent = element[‘context‘]; 147 //console.log(parent.clientHeight+":"+parent.clientWidth); 148 chart.style.width =parent.clientWidth+‘px‘; 149 chart.style.height =parent.clientHeight+‘px‘; 150 151 var myChart = echarts.init(chart); 152 var option = { 153 backgroudColor:‘#F2F2F2‘, 154 title : { 155 text: ‘某一个栏目‘, 156 x:‘center‘, 157 y:‘bottom‘ 158 }, 159 tooltip:{ 160 trigger:‘item‘, 161 formatter:‘{a}<br/>{b} {c}({d}%)‘ 162 }, 163 series:[ 164 { 165 name:‘空间使用‘, 166 type:‘pie‘, 167 radius:‘55%‘, 168 center:[‘50%‘,‘60%‘], 169 data:[ 170 {value:50,name:‘已使用‘}, 171 {value:450,name:‘未使用‘} 172 ], 173 itemStyle:{ 174 emphasis: { 175 shadowBlur: 10, 176 shadowOffsetX: 0, 177 shadowColor: ‘rgba(0, 0, 0, 0.5)‘ 178 } 179 } 180 } 181 ] 182 }; 183 myChart.setOption(option); 184 myChart.resize(); 185 } 186 }; 187 }); 188 </script> 189 </body> 190 191 </html>
一个Demo，就不按格式写了！
以上！
以上是关于AngularJS引入Echarts的Demo的主要内容，如果未能解决你的问题，请参考以下文章