正文

AngularJS引入Echarts的Demo

IP云
IP云V管理员/6 阅读
08/10
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近要用到图表展示，想了想，还是首选Echarts，HighCharts和D3.js备用吧，

而项目中也用到了AngularJS，所以需要把Echarts引入到AngularJs中一起使用，

试了试，最方便的还是用指令，（虽然指令有点不好调，用了再说）。

1、引入angular.js

2、引入echarts.js

3、引入jquery.js---可以省略

4、直接上代码：

<!DOCTYPE html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Echarts--柱状图与饼图</title>
<link rel="stylesheet" href="../jc/jquery-ui.css">
<script type="text/javascript" src="../jc/jquery.min.js"></script>
<script type="text/javascript" src="../jc/jquery-ui.min.js"></script>
<script type="text/javascript" src="../jc/angular.min.js"></script>
<script type="text/javascript" src="../3rd/echarts/echarts.js"></script>
<style>
html{
height:100%;
} </style>
</head> <body data-ng-app="MyApp" style="height:100%;">
<div data-ng-controller='MyCtrl' style="width: 100%;height: 100%;">
<h3>Echarts柱状图与饼图---指令directive</h3> <div align="center" style="width: 80%; height:100%;">
<div align="left">
<select data-ng-model="chart"
data-ng-options="x for (x, y) in myCharts"
data-ng-change = "showChange(chart)"
>
</select>
</div> <div data-ng-show="show" bar-charts data-source='groupData' style="width: 100%;height: 80%;"></div>
<div data-ng-show="!show" pie-charts data-source='group' data-ng-repeat="group in groupData"
style="width: 30%;height:30%;float: left;">
</div>
</div>
</div>
<script>
angular.module('MyApp', [])
.controller('MyCtrl', function($scope) {
$scope.groupData = ['测试栏目1','测试栏目2','测试栏目3','测试栏目4','测试栏目5','测试栏目6'];
$scope.chart = 0;
$scope.show = true;
$scope.myCharts = {
"柱状图":0,
"饼图":1
};
$scope.showChange = function(chart){
if(chart==0){
$scope.show = true;
}else{
$scope.show = false;
}
};
})
.directive('barCharts',function(){
return{
restrict:'AE',
scope :{
source:'='
},
template:'<div>这是柱图</div>',
controller: function($scope){
},
link:function(scope,element,attr){
console.log(scope.source);
var chart = element.find('div')[0];
var parent = element['context'];
// console.log(parent.clientHeight+":"+parent.clientWidth);
chart.style.width =parent.clientWidth+'px';
chart.style.height =parent.clientHeight+'px'; var myChart = echarts.init(chart);
var option = {
title:{
text:'工作空间使用情况'
},
tooltip:{
trigger:'axis',
axisPointer:{
type:'shadow'
}
},
legend: {
//data:['正常','警告','预警','剩余']
},
gird:{
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true
},
xAxis:{
type:'value'
},
yAxis:{
type: 'category',
data: scope.source //['测试栏目1','测试栏目2','测试栏目3','测试栏目4','测试栏目5','测试栏目6']
},
series:[
{
name:'已使用',
type:'bar',
stack:'存储空间',
label:{
normal:{
show:true,
position:'insideRight'
}
},
barWidth:'80%',
data:[100,200,300,260,50,120]
},
{
name:'剩余',
type:'bar',
stack:'存储空间',
label:{
normal:{
show:true,
position:'insideRight'
}
},
barWidth:'80%',
data:[200,100,2,80,200,180]
}
]
};
myChart.setOption(option);
myChart.resize();
}
};
})
.directive('pieCharts',function(){
return{
restrict:'AE',
scope :{
source:'='
},
template:'<div>这是饼图</div>',
controller: function($scope){
},
link:function(scope,element,attr){ var chart = element.find('div')[0];
var parent = element['context'];
//console.log(parent.clientHeight+":"+parent.clientWidth);
chart.style.width =parent.clientWidth+'px';
chart.style.height =parent.clientHeight+'px'; var myChart = echarts.init(chart);
var option = {
backgroudColor:'#F2F2F2',
title : {
text: '某一个栏目',
x:'center',
y:'bottom'
},
tooltip:{
trigger:'item',
formatter:'{a}<br/>{b} {c}({d}%)'
},
series:[
{
name:'空间使用',
type:'pie',
radius:'55%',
center:['50%','60%'],
data:[
{value:50,name:'已使用'},
{value:450,name:'未使用'}
],
itemStyle:{
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
myChart.resize();
}
};
});
</script>
</body> </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)'
}
}
}
]