前言
环形图本质上就是饼图,我们把饼图的半径设置成阶段范围内的值域,饼图就变成了环形图。
实现效果
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
height: 100%;
}
*{
margin: 0px;
height: 0px;
}
#chartDiv{
width: 650px;
height: 370px;
border: 1px solid red;
}
</style>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="chartDiv"></div>
<script>
var chartDiv = echarts.init(document.getElementById('chartDiv'));
var option = {
title: {
text: '各阶段工程数量及占比',
left: 'center',
textStyle:{
fontSize:14
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)",
extraCssText:"height:43px;"//设置tooltip的高度
},
series: [
{
name:'访问来源',
type:'pie',
center: ['50%', '60%'],//控制位置
radius: ['40%', '60%'],//控制圆环的宽度
avoidLabelOverlap: true,//防止重叠
label: {
normal: {
formatter: '{a|{b}}{abg|}\n{hr|}\n {b|数量:}{c} {per|{d}%} ',//空格也起作用
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 2,
rich: {
a: {
color: '#999',
lineHeight: 20,
align: 'center'
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 12,
lineHeight: 20
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
},
emphasis: {
show: true,
textStyle: {
fontSize: '14',
}
}
},
labelLine: {
normal: {
show: true,
}
},
data:[
{value:335, name:'直达'},
{value:679, name:'营销广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
chartDiv.setOption(option);
</script>
</body>
</html>