日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ECharts 之 环形图

發布時間：2025/7/14 编程问答 49 豆豆
生活随笔 收集整理的這篇文章主要介紹了 ECharts 之 环形图 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

????上一篇文章寫了堆疊柱狀圖的用法，本文寫的是環形圖的方法，環形圖是餅圖的一種，具體的餅圖可以自己更改radius屬性的大小

radius : ['50%', '70%'], //餅圖的半徑,第一項是內半徑,第二項是外半徑,內半徑為0就是真的餅,不是環形


完整代碼

<html> <head> <base href="<%=basePath%>"><title>ECharts-環形圖</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',//標題的位置 默認是left，其余還有center、right屬性textStyle: { color: "#436EEE", fontSize: 17, }},tooltip : { //提示框組件trigger: 'item', //觸發類型(餅狀圖片就是用這個)formatter: "{a} <br/>{b} : {c} (ozvdkddzhkzd%)" //提示框浮層內容格式器},color:['#48cda6','#fd87fb','#11abff','#ffdf6f','#968ade'], //手動設置每個圖例的顏色legend: { //圖例組件//right:100, //圖例組件離右邊的距離orient : 'horizontal', //布局 縱向布局 圖例標記居文字的左邊 vertical則反之width:40, //圖行例組件的寬度,默認自適應x : 'right', //圖例顯示在右邊y: 'center', //圖例在垂直方向上面顯示居中itemWidth:10, //圖例標記的圖形寬度itemHeight:10, //圖例標記的圖形高度data:['正常','一般','提示','較急','特急'],textStyle:{ //圖例文字的樣式color:'#333', //文字顏色fontSize:12 //文字大小}},series : [ //系列列表{name:'設備狀態', //系列名稱type:'pie', //類型 pie表示餅圖center:['40%','50%'], //設置餅的原心坐標 不設置就會默認在中心的位置radius : ['50%', '70%'], //餅圖的半徑,第一項是內半徑,第二項是外半徑,內半徑為0就是真的餅,不是環形itemStyle : { //圖形樣式normal : { //normal 是圖形在默認狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在鼠標懸浮或者圖例聯動高亮時。label : { //餅圖圖形上的文本標簽show : false //平常不顯示},labelLine : { //標簽的視覺引導線樣式show : false //平常不顯示}},emphasis : { //normal 是圖形在默認狀態下的樣式；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>

最終效果圖：

轉載于:https://www.cnblogs.com/G1432291874/p/9346030.html

總結

以上是生活随笔為你收集整理的ECharts 之 环形图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。