1. Project directory
2. js reference
3. js editing
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 : 'Sex ratio',//Title description
x:'center'//Center
},
// Prompt box, information prompt when the mouse is hovering and interacting
tooltip: {
show: true,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// legend
legend: {
x : 'center',
y : 'bottom',
data: $scope.legend
},
// data content array
series: [
{ name: '',
type: 'pie',
radius: "55%",
center: ['50%','50%'],
label: {normal: {position: 'inner'}}, // built-in text label
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 editing
<!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. Rendering
