餅狀圖大小
radius: '45%',
center: ['50%', '35%'],
圖例的位置
legend: {
orient: 'vertical',
/* x: 'left',
y: 'top', */
textStyle: { //圖例文字的樣式
color: '#fff',
fontSize: 12
},
type: 'scroll',
left: 80,
bottom: 0,
data: names
},
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五分鐘上手之餅狀圖</title>
<!-- 引入 echarts.js -->
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
<style>
body {
background:#01040d;
height: 100vh;
background: url(images/background.png) no-repeat;
background-size: 100% 100%;
}
.leftBie {
border: 1px solid #181482;
float: left;
height: 500px;
margin-right: 19px;
width: 600px;
}
.dataView {
text-align: center;
position: absolute;
left: 168px;
bottom: 102px;
}
.dataView span {
width: 120px;
display: inline-block;
color: #FFFFFF;
font-size: 12px;
margin: 3.4px;
}
.CurrentNumber{
width:200px;
}
.totalNumber{
position: absolute;
top: 1px;
right: -91px;
}
</style>
</head>
<body>
<div class="leftBie">
<!-- 為ECharts準(zhǔn)備一個(gè)具備大邪畎睢（寬高）的Dom -->
<div id="main" style="height: 470px;"></div>
<div class="dataView"></div>
</div>
<script type="text/javascript">
var SwissBankApi = 'data.json';
$.ajax({
type: 'get',
url: SwissBankApi,
dataType: "json", //返回?cái)?shù)據(jù)形式為json
success: function(data) {
totalNumber(data);
ProportionRegional(data);
},
error: function(errorMsg) {
//請(qǐng)求失敗時(shí)執(zhí)行該函數(shù)
alert("圖表請(qǐng)求數(shù)據(jù)失敗!");
}
});
function totalNumber(data) {
var html = "";
html += '<div class="CurrentNumber">';
$.each(data.content, function(i, item) {
html += '<span>當(dāng)前人數(shù):' + item.count + '人</span>';
});
html += '</div>';
html += '<span class="totalNumber">總?cè)藬?shù):' + data.count + '人</span>';
$(".dataView").html(html);
}
function ProportionRegional(data) {
//基于準(zhǔn)備好的dom务冕，初始化echarts實(shí)例
var cChart = echarts.init(document.getElementById('main'));
var names = []; //類別數(shù)組（用于存放餅圖的類別）
var brower = [];
//請(qǐng)求成功時(shí)執(zhí)行該函數(shù)內(nèi)容蘸劈，result即為服務(wù)器返回的json對(duì)象
$.each(data.content, function(index, item) {
names.push(item.name); //挨個(gè)取出類別并填入類別數(shù)組
brower.push({
name: item.name,
value: item.count
});
});
cChart.setOption({ //加載數(shù)據(jù)圖表
title: {
text: '區(qū)域人數(shù)比例',
// subtext:'',
x: 'left',
y: '7px',
textStyle: { //圖例文字的樣式
color: '#fff',
//字體風(fēng)格,'normal','italic','oblique'
fontStyle: 'normal',
//字體粗細(xì) 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight: '200',
//字體系列
fontFamily: 'sans-serif',
//字體大小
fontSize: 16
},
textAlign: 'left'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/> : {c} (5jqgob0%)'
},
legend: {
orient: 'vertical',
/* x: 'left',
y: 'top', */
textStyle: { //圖例文字的樣式
color: '#fff',
fontSize: 12
},
type: 'scroll',
left: 80,
bottom: 0,
data: names
},
series: [{
name: '',
type: 'pie',
radius: '45%',
center: ['50%', '35%'],
data: brower,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
color: function(params) {
//自定義顏色
var colorList = ['#e161ae', '#37a2d8', '#64e1e3', '#fedb5b',
'#fda07e'
];
return colorList[params.dataIndex]
}
}
}
}]
});
}
</script>
</body>
</html>
效果如下所示：
data.json
{
"count": 299,
"content": [{
"id": "fid--c6a0a81_170f6d2aa18_57ca",
"name": "病房",
"lon": 0,
"lat":12,
"count": 12
}, {
"id": "fid--c6a0a81_170f6d2aa18_5763",
"name": "護(hù)士站",
"lon": 0,
"lat": 12,
"count": 11
}, {
"id": "fid--c6a0a81_170f6d2aa18_5763",
"name": "醫(yī)務(wù)室",
"lon": 0,
"lat": 0,
"count": 13
}, {
"id": "fid--c6a0a81_170f6d2aa18_5763",
"name": "繳費(fèi)大廳",
"lon": 0,
"lat": 0,
"count": 14
}, {
"id": "fid--c6a0a81_170f6d2aa18_5763",
"name": "住院部",
"lon": 0,
"lat": 0,
"count": 15
}]
}
