本文內容均來自於百度搜索，

全局代碼：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3         <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>無標題文檔</title>
 6         <script  src="js/echarts.js"></script>
 7     </head>
 8     
 9     <body>
10         <div id="main" style="width:600px;height:400px;"></div>
11     </body>
12     <script type="text/javascript">
13             var myChart = echarts.init(document.getElementById('main'));
14             
15             option = {
16                 
17                 tooltip : {
18                     formatter: "{a} <br/>{b} : {c}%"
19                 },
20                 series : [
21                     {
22                         name:'業務指標',
23                         type:'gauge',
24                         detail : {formatter:'{value}%'}, //儀表盤顯示數據
25                         axisLine: { //儀表盤軸線樣式
26                             lineStyle: {
27                                 width: 20
28                             }    
29                         },
30                         splitLine: { //分割線樣式
31                             length: 20
32                         },
33                         data:[{value: 92, name: 'CPU'}],
34                         
35                         
36                     }
37                     
38                 ]
39             };
40             
41             myChart.setOption(option);
42     </script>
43 </html>

我們在中間點添加一個白點

全局代碼：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3         <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>無標題文檔</title>
 6         <script  src="js/echarts.js"></script>
 7     </head>
 8     
 9     <body>
10         <div id="main" style="width:600px;height:400px;"></div>
11     </body>
12     <script type="text/javascript">
13             var myChart = echarts.init(document.getElementById('main'));
14             
15             option = {
16                 
17                 tooltip : {
18                     formatter: "{a} <br/>{b} : {c}%"
19                 },
20                 series : [
21                     {
22                         name:'業務指標',
23                         type:'gauge',
24                         detail : {formatter:'{value}%'}, //儀表盤顯示數據
25                         axisLine: { //儀表盤軸線樣式
26                             lineStyle: {
27                                 width: 20
28                             }    
29                         },
30                         splitLine: { //分割線樣式
31                             length: 20
32                         },
33                         data:[{value: 92, name: 'CPU'}],
34                         
35                         markPoint:{
36                             symbol:'circle',
37                             symbolSize:5,
38                             data:[
39                                 //跟你的儀表盤的中心位置對應上，顏色可以和畫板底色一樣
40                                 {x:'center',y:'center',itemStyle:{color:'#FFF'}}
41                                 ]
42                         },
43                     }
44                     
45                 ]
46             };
47             
48             myChart.setOption(option);
49     </script>
50 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ECharts學習（4）--儀表盤 Echarts儀表盤大小 echarts 漸變儀表盤 echarts gauge儀表盤設置 Echarts——更改儀表盤方向和顏色 echarts儀表盤如何設置圖例(legend) echarts-儀表盤-漸變 python儀表盤關於ECharts的使用總結——餅圖、雷達圖、儀表盤使用echarts繪制漂亮的漸變鍵盤儀表盤