首页 > 代码库 > AngularJS引入Echarts的Demo
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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。