生活随笔
收集整理的這篇文章主要介紹了
ECharts 之 环形图
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
????上一篇文章寫了堆疊柱狀圖的用法，本文寫的是環(huán)形圖的方法，環(huán)形圖是餅圖的一種，具體的餅圖可以自己更改radius屬性的大小
radius : [
'50%',
'70%'],
完整代碼
<html> <head> <base href="<%=basePath%>"><title>ECharts-環(huán)形圖
</title> <script type="text/javascript" src="js/echarts.min.js"></script></head> <body id="main" style="width:450px;height:300px;"></body> <script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));var option = {title: {text: '故障',left:'50px',textStyle: { color: "#436EEE", fontSize: 17, }},tooltip : { trigger: 'item', formatter: "{a} <br/> : {c} (ze8trgl8bvbq%)" },color:['#48cda6','#fd87fb','#11abff','#ffdf6f','#968ade'], legend: { orient : 'horizontal', width:40, x : 'right', y: 'center', itemWidth:10, itemHeight:10, data:['正常','一般','提示','較急','特急'],textStyle:{ color:'#333', fontSize:12 }},series : [ {name:'設(shè)備狀態(tài)', type:'pie', center:['40%','50%'], radius : ['50%', '70%'], itemStyle : { normal : { label : { show : false },labelLine : { show : false }},emphasis : { label : { show : true,position : 'center',textStyle : {fontSize : '10',fontWeight : 'bold'}}}},data:[{value:80, name:'正常'},{value:10, name:'一般'},{value:30, name:'提示'},{value:20, name:'較急'},{value:25, name:'特急'}]}]};myChart.setOption(option);</script>
</html> 最終效果圖：
轉(zhuǎn)載于:https://www.cnblogs.com/G1432291874/p/9346030.html
總結(jié)
以上是生活随笔為你收集整理的ECharts 之 环形图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
