AngularJS引入Echarts的Demo

時間 2019-11-08

標籤 angularjs 引入 echarts demo 欄目 AngularJS 简体版

原文原文鏈接

最近要用到圖表展現，想了想，仍是首選Echarts，HighCharts和D3.js備用吧，javascript

而項目中也用到了AngularJS，因此須要把Echarts引入到AngularJs中一塊兒使用，css

試了試，最方便的仍是用指令，（雖然指令有點很差調，用了再說）。html

一、引入angular.js java

二、引入echarts.jsjquery

三、引入jquery.js---能夠省略chrome

四、直接上代碼：app

  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，就不按格式寫了！echarts

以上！ide

自定義數據展現顏色：測試

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)' } } } ]

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。