Echarts-案例【环形图】Echarts-案例【环形图】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>环形图</title>
<script type="text/javascript" src="js/echarts_56.js"></script>
<style type="text/css">
#main{
width: 600px;
height: 400px;
}
</style>html富文本框
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
var ElementById("main");
var myChart=echarts.init(edom);
var option={
series:[{
type:'pie',
radius:['60%','40%'],
avoidLableOverlap:false,//标签重叠问题当avoidLabelOverlap设置为false时会出现以下情况改为true之后就不会重叠                    animation:false,//禁⽤饼状图悬浮动效果图
//饼图图形上的⽂本标签，可⽤于说明图形的⼀些数据信息，⽐如值，名称等，
label:{
//formatter配置rich(富⽂本样式)。
formatter:'{b|{b}:}{c}({per|{d}%})',//⽂字内容显⽰
backgroundColor:'#eee',//背景
borderColor:'#aaa',//边框颜⾊
borderWidth:5,  //边框宽度
padding:5,    //矩形内容距离外边框的距离
borderRadius:8,//圆⾓度
rich:{
b:{
fontSize:16,
lineHeight:15
},
per:{
align:'center'
}
}
},
data:[{value:1432,name:'合格'},
{value:500,name:'不合格'}]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
效果：