Echarts饼状图大小及其位置调整
2020-04-09 本文已影响0人
祈澈菇凉
饼状图大小
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准备一个具备大小（宽高）的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", //返回数据形式为json
success: function(data) {
totalNumber(data);
ProportionRegional(data);
},
error: function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
}
});
function totalNumber(data) {
var html = "";
html += '<div class="CurrentNumber">';
$.each(data.content, function(i, item) {
html += '<span>当前人数:' + item.count + '人</span>';
});
html += '</div>';
html += '<span class="totalNumber">总人数:' + data.count + '人</span>';
$(".dataView").html(html);
}
function ProportionRegional(data) {
//基于准备好的dom，初始化echarts实例
var cChart = echarts.init(document.getElementById('main'));
var names = []; //类别数组（用于存放饼图的类别）
var brower = [];
//请求成功时执行该函数内容，result即为服务器返回的json对象
$.each(data.content, function(index, item) {
names.push(item.name); //挨个取出类别并填入类别数组
brower.push({
name: item.name,
value: item.count
});
});
cChart.setOption({ //加载数据图表
title: {
text: '区域人数比例',
// subtext:'',
x: 'left',
y: '7px',
textStyle: { //图例文字的样式
color: '#fff',
//字体风格,'normal','italic','oblique'
fontStyle: 'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight: '200',
//字体系列
fontFamily: 'sans-serif',
//字体大小
fontSize: 16
},
textAlign: 'left'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
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": "护士站",
"lon": 0,
"lat": 12,
"count": 11
}, {
"id": "fid--c6a0a81_170f6d2aa18_5763",
"name": "医务室",
"lon": 0,
"lat": 0,
"count": 13
}, {
"id": "fid--c6a0a81_170f6d2aa18_5763",
"name": "缴费大厅",
"lon": 0,
"lat": 0,
"count": 14
}, {
"id": "fid--c6a0a81_170f6d2aa18_5763",
"name": "住院部",
"lon": 0,
"lat": 0,
"count": 15
}]
}
