1、工程目录
2、js引用
3、js编辑
var app = angular.module('app', []);
app.controller('pieCtrl', function($scope) {
$scope.legend = ["AAA", "BBB", "CCC", "DDD"];
$scope.data = [{value:12, name:'AAA'},{value:56,name:'BBB'},{value:89,name:'CCC'},{value:32,name:'DDD'}];
var myChart = echarts.init(document.getElementById('pie-wrap'));
var a = [];
var option = {
title:{
text : '性别比例',//标题说明
x:'center'//居中
},
// 提示框，鼠标悬浮交互时的信息提示
tooltip: {
show: true,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 图例
legend: {
x : 'center',
y : 'bottom',
data: $scope.legend
},
// 数据内容数组
series: [
{ name: '',
type: 'pie',
radius: "55%",
center: ['50%','50%'],
label: {normal: {position: 'inner'}}, //内置文本标签
labelLine: { normal: {show: false } },
data: function(){ var serie=[];
for(var i=0;i<$scope.legend.length;i++){
var item = {name : $scope.legend[i],type : 'pie', value : $scope.data[i].value};
serie.push(item);
}
return serie;}(),
itemStyle : { normal: { label: {show: true },
labelLine: {show: true }
} ,
emphasis: { label: {show: true, position: 'outer'},
labelLine: {show: true, lineStyle: {color: 'red'}}
}
}
}
]
};
myChart.setOption(option);
});
4、html编辑
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>饼形图</title>
<!--加载AngularJS-->
<script src="../static/js/angular-1.6.9/angular.js"></script>
<!--加载ECharts-->
<script src="../static/js/echarts-2.2.7/build/dist/echarts-all.js"></script>
<script src="../static/app/pieChartModule.js"></script>
</head>
<body ng-app="app" ng-controller="pieCtrl">
<div id="pie-wrap" style="height: 500px;" /><!-- 这里以后是地图 -->
</body>
</html>
5、效果图
