<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index_004ajax圆形图</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echart4.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="demo" id="main"></div>
<script type="text/javascript">
//圆形统计图
var ehcartsArray = [
{"name":"低","value":4,"percentage":"0.2"},
{"name":"较低","value":6,"percentage":"0.3"},
{"name":"高","value":5,"percentage":"0.25"},
{"name":"较高","value":5,"percentage":"0.25"}
];
var echartsTotal = 20;
var echartsTotalDesc = "描述";
// 指定图表的配置项和数据
// {a}:系列名字 {b}:数据名字 {c}:数据值 {d}:百分比
option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
title:{
text:"",
subtext:"",
left:"25%",
top:"38%",
itemGap:-10, // 调整上下距离
textStyle:{
fontSize:30,
color:"#4776d2",
fontFamily:"impact",
align:"center"
},
subtextStyle:{
fontFamily:"微软雅黑",
fontSize:16,
fontFamily:"impact",
color:"#50607a"
}
},
legend: {
orient: 'vertical', // 控制水平排列
icon:"roundRect", // 修改小图标形状 circle 圆 roundRect 方形
itemWidth:10,
itemHeight:10,
x:320,
y:'middle',
// textStyle:{
// fontSize:15,
// color:"#828282"
// },
textStyle:{
rich:{
oneone:{
width:20,
color:"#000000"
},
twotwo:{
width:20,
color:"#c43636",
fontSize:13
},
threethree:{
width:20,
color:"#c43636",
fontSize:13
}
}
},
formatter:function(name){
var total = 0;
var target;
for(var i=0; i<ehcartsArray.length;i++){
total += ehcartsArray[i].value;
if(ehcartsArray[i].name==name){
target = ehcartsArray[i].value
}
}
var v = ((target/total)*100);
return `{oneone|${name}} 数量 {twotwo|${target}} 占比 {threethree|${v}%}`
},
},
calculable: false,
avoidLabelOver: false,
series : [
{
name: '数据来源',
type: 'pie',
radius : ['60%', '50%'],
center: ['30%', '50%'],
startAngle: 90,
clockwise: false,
itemStyle: {
normal:{
label:{
show:false
},
labelLine:{
show:false
}
},
emphasis: {
label:{
show:false,
position:"center",
textStyle:{
fontSize:"30",
fontWeight:"bold"
}
}
}
},
data:ehcartsArray
}
]
};
option.color=["#2dcc96","#afbad0","#ff7170","#ffbd4c"];
option.title.text=echartsTotal;
option.title.subtext=echartsTotalDesc;
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>