echarts嵌套饼图
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript" src="js/echarts.min.js"></script>
<body>
<div id="_top" style="600px;height: 600px;"></div>
</body>
<script type="text/javascript">
var myecharts = echarts.init(document.getElementById('_top'));
var option={
legend: { //图例
show:false, //是否显示图例
orient: 'vertical', //布局方向
x: 'left', //图例相对位置
data:['一班','二班','三班'] //图例内容
},
series: [ //内容
{
name:'班级人数占比', //内容标题
type:'pie', //图标样式
selectedMode: 'single', //选中模式：单选
radius: [0, '32%'], //饼图大小，[x,y]:x表示内半径，y表示外半径
label: { //标签
normal: {
position: 'inner' //标签位置：内部
}
},
labelLine: { //提示框
normal: {
show: false //是否显示
}
},
color:['#0A276D','#1040AF','#1F5DEA','#628CF0'], //颜色
name:['一班','二班','三班'], //内容名称
data:[ //数据
{value:50,name:'一班',/*selected:true*/}, //selected:是否被选中
{value:46,name:'二班'},
{value:54,name:'三班'},
],
},
{
name:'男女占比',
type:'pie',
radius: ['42%', '55%'],
label: {
normal: {
}
},
labelLine:{
normal:{
length:2,
}
},
color:['#205E3F','#16DA69','red'],
data:[
{value:71,name:'男生'},
{value:79,name:'女生'},
],
label:
{
normal: {
textStyle: {
color: '#aaa' //提示框字体颜色
}
}
},
}],
backgroundColor: "#190c12", //背景颜色
};
myecharts.setOption(option);
</script>
</html>分析：
嵌套饼图实现 原理：是两个饼图由于内外半径大小控制而形成的，然后对于两个饼图进行不同的赋值，便达到了嵌套的效果