Echarts餅形圖（二）

時間 2019-12-01

標籤 echarts 形圖简体版

原文原文鏈接

一、工程目錄html

二、js引用數組

三、js編輯app

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

}; echarts

myChart.setOption(option);
});

ui

四、html編輯orm

<!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>

<script src="../static/js/angular-1.6.9/angular.js"></script>

<script src="../static/js/echarts-2.2.7/build/dist/echarts-all.js"></script>
<script src="../static/app/pieChartModule.js"></script>
</head>xml

<body ng-app="app" ng-controller="pieCtrl">
<div id="pie-wrap" style="height: 500px;" />
</body>
</html>htm

五、效果圖ip

相關文章

相關標籤/搜索

每日一句

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

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<