标准饼图以一个完整的源来表示数据对象的全体,其中扇形面积表示各个组成部分。饼图常用语描述百分比构成,其中美一个扇形代表一个数据所占的比例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./echarts.js"></script>
</head>
<body>
<div id="main" style="width: 700px; height: 600px;background-color: aquamarine;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"))
var option = {
title: {
text: '影响健康、寿命的各类因素',
subtext: 'WHO统计调查报告',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient:'vertical',
left:62,
top:22,
data: ['生活方式','遗传因素','社会因素','医疗条件','气候环境']
},
toolbox:{
show:true,
left:444,
top:22,
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
magicType:{
show:true,
type:['pie','funnel'],
option:{
funnel:{
x:'25%',
width:'50%',
funnelAlign:'left',
max:1548
}
}
},
restore:{show:true},
saveAsImage:{show:true}
}
},
calculable:true,
series: [
{
name: '访问来源',
type: 'pie',
radius:'66%',
center:['58%','55%'],
data: [
{value:60,name:'生活方式'},
{value:15,name:'遗传因素'},
{value:10,name:'社会因素'},
{value:8,name:'医疗条件'},
{value:7,name:'气候环境'},
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>