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，就不按格式写了！
以上！
自定义数据展示颜色：
series:[ { name:'已使用', type:'bar', stack:'存储空间', label:{ normal:{ show:true, position:'insideRight' } }, barWidth:'80%', data:[ { value:100, itemStyle:{ normal:{ color: 3>2 ? '#CDCD19':'#00FA67' } } }, { value:200, itemStyle:{ normal:{ color: 1>2 ? '#CDCD19':'#00FA67' } } }, { value:300, itemStyle:{ normal:{ color: 3>2 ? '#CDCD19':'#00FA67' } } }, { value:260, itemStyle:{ normal:{ color: 1>2 ? '#CDCD19':'#00FA67' } } }, 50,120] }, { name:'剩余', type:'bar', stack:'存储空间', label:{ normal:{ show:true, position:'insideRight' } }, itemStyle:{ normal:{ color:'#CBCBCB' } }, barWidth:'80%', data:[200,100,2,80,200,180] } ]
-------------------------------
series:[ { name:'空间使用', type:'pie', radius:'55%', center:['50%','60%'], data:[ {value:50,name:'已使用',itemStyle:{ normal:{ color:'#324A5B' } }}, {value:450,name:'未使用',itemStyle:{ normal:{ color:'#C13530' } }} ], itemStyle:{ emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ]
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-09-05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号