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> </head> <body> <div id="main"></div> <script type="text/javascript"> var edom=document.getElementById("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>
效果：
浙公网安备 33010602011771号