做小項目需要用到儀表盤，官方給出的顏色設置如下：
而我想要如下樣式的：
最后，經過一番折騰算是搞成了如下樣式效果：
要達到上面效果關鍵在於設置Echarts的如下兩處js代碼：
1.大小值要顛倒，因為這里的儀表刻度是順時針增長的
2.坐標軸線的顏色要重新設置，不能用默認的，要把默認的顏色順序顛倒過來
總體代碼如下：
HTML：
<html> <head> <title>汽車儀表盤</title> <style> [v-cloak] { display: none; } html,body{ height: 100%; width: 100%; padding: 0; margin: 0; background: gray; display: flex;/*設置為彈性容器*/ align-items: center; /*包含的元素垂直居中*/ justify-content: center; /*包含的元素水平居中*/ } .bg_total{ width: 80vh; /* 1vh 等於1/100的視口高度 */ height: 80%; background: url(../static/img/totalBg.png) no-repeat; background-size: 100% 100%; } .panel_agv{ width: 100%; height: 100%; position: relative; background: #101019; } </style> </head> <body> <div class="bg_total"> <div id="panel_agvid" class="panel_agv"></div> </div> <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="./js/echarts-en.min.js"></script> <script type="text/javascript" src="./js/myecharts.js"></script> </body> </html>
JS：
var panel_agvid= echarts.init(document.getElementById('panel_agvid')); panel_option = { series : [ { name: '左上轉速', type: 'gauge', center: ['33%', '33%'], // 默認全局居中 radius: '50%', clockwise:true, //儀表盤刻度順時針增長 min:7, max:0, startAngle:225, endAngle:45, splitNumber:7, axisLine: { // 坐標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 width: 10, color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']] } }, axisTick: { // 坐標軸小標記 length:12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto' } }, splitLine: { // 分隔線 length:20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 color: 'auto' } }, pointer: { width:3 }, title: { offsetCenter: ['0', '-20%'], // x, y，單位px fontSize: 14, color:'gray' }, detail: { offsetCenter: ['0', '35%'], // x, y，單位px textStyle: { // 其余屬性默認使用全局文本樣式 fontWeight: 'bolder', fontSize: 18 } }, data:[{value: 0, name: 'x1000 r/min'}] }, { name: '右上轉速', type: 'gauge', center: ['66%', '33%'], // 默認全局居中 radius: '50%', min:0, max:7, startAngle:135, endAngle:-45, splitNumber:7, axisLine: { // 坐標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 width: 8 } }, axisTick: { // 坐標軸小標記 length:12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto' } }, splitLine: { // 分隔線 length:20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 color: 'auto' } }, pointer: { width:3 }, title: { offsetCenter: ['0', '-20%'], // x, y，單位px fontSize: 14, color:'gray' }, detail: { offsetCenter: ['0', '35%'], // x, y，單位px textStyle: { // 其余屬性默認使用全局文本樣式 fontWeight: 'bolder', fontSize: 18 } }, data:[{value: 0, name: 'x1000 r/min'}] }, { name: '左下轉速', type: 'gauge', center: ['33%', '66%'], // 默認全局居中 radius: '50%', min:0, max:7, startAngle:315, endAngle:135, splitNumber:7, axisLine: { // 坐標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 width: 8 } }, axisTick: { // 坐標軸小標記 length:12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto' } }, splitLine: { // 分隔線 length:20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 color: 'auto' } }, pointer: { width:3 }, title: { offsetCenter: ['0', '20%'], // x, y，單位px fontSize: 14, color:'gray' }, detail: { offsetCenter: ['0', '-35%'], // x, y，單位px textStyle: { // 其余屬性默認使用全局文本樣式 fontWeight: 'bolder', fontSize: 18 } }, data:[{value: 0, name: 'x1000 r/min'}] }, { name: '右下轉速', type: 'gauge', center: ['66%', '66%'], // 默認全局居中 radius: '50%', min:7, max:0, startAngle:45, endAngle:-135, splitNumber:7, axisLine: { // 坐標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 width: 8, color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']] } }, axisTick: { // 坐標軸小標記 length:12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto' } }, splitLine: { // 分隔線 length:20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 color: 'auto' } }, pointer: { width:3 }, title: { offsetCenter: ['0', '20%'], // x, y，單位px fontSize: 14, color:'gray' }, detail: { offsetCenter: ['0', '-35%'], // x, y，單位px textStyle: { // 其余屬性默認使用全局文本樣式 fontWeight: 'bolder', fontSize: 18 } }, data:[{value: 0, name: 'x1000 r/min'}] } ] }; setInterval(function (){ panel_option.series[0].data[0].value = 1; panel_option.series[1].data[0].value = 1; panel_option.series[2].data[0].value = 1; panel_option.series[3].data[0].value = 1; panel_agvid.setOption(panel_option,true); },2000);
只要再設置一個js全局變量對象就可以實現儀表盤數值的實時更新！