最近要用到图表展示，想了想，还是首选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{13height: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> 2223<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> 3132 <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){ 49if(chart==0){ 50$scope.show = true; 51}else{ 52 $scope.show = false; 53}54 }; 55 }) 56 .directive('barCharts',function(){ 57 return{ 58 restrict:'AE',59scope :{ 60 source:'=' 61}, 62template:'<div>这是柱图</div>', 63controller: function($scope){ 64}, 65link: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'; 7273 var myChart = echarts.init(chart); 74 var option = { 75title:{ 76 text:'工作空间使用情况' 77}, 78tooltip:{ 79 trigger:'axis', 80 axisPointer:{ 81 type:'shadow' 82 } 83}, 84legend: { 85 //data:['正常','警告','预警','剩余'] 86}, 87gird:{ 88 left: '5%', 89 right: '5%', 90 bottom: '5%', 91 containLabel: true 92}, 93xAxis:{ 94 type:'value' 95}, 96yAxis:{ 97 type: 'category', 98 data: scope.source //['测试栏目1','测试栏目2','测试栏目3','测试栏目4','测试栏目5','测试栏目6'] 99},100series:[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: {175shadowBlur: 10,176shadowOffsetX: 0,177shadowColor: '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)'
}
}
}
]
如果觉得《AngularJS引入Echarts的Demo》对你有帮助，请点赞、收藏，并留下你的观点哦！
