1. ECharts中的儀表盤，要使用這個圖表時把series中的type屬性修改成‘gauge’，然后在detail中設置儀表盤詳情，用於顯示數據。最常用的是formatter(格式化函數或者字符串)，然后可以設置data屬性用來表示指針的指向。下面我們可以設置value的值為每隔2秒就隨機生成一個數，然后就可以模擬顯示指針的動態顯示。
2. 代碼展示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts練習</title> <script type="text/javascript" src="js/echarts.min.js"></script> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: '業務指標', //標題文本內容 }, toolbox: { //可視化的工具箱 show: true, feature: { restore: { //重置 show: true }, saveAsImage: {//保存圖片 show: true } } }, tooltip: { //彈窗組件 formatter: "{a} <br/>{b} : {c}%" }, series: [{ name: '業務指標', type: 'gauge', detail: {formatter:'{value}%'}, data: [{value: 45, name: '完成率'}] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); setInterval(function(){//把option.series[0].data[0].value的值使用random()方法獲取一個隨機數 option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; myChart.setOption(option, true); }, 2000); </script> </body> </html>
3. 效果展示：
4. 這里只是最簡單的實現了儀表盤，如果我們要實現更加復雜的功能，可以參考API文檔中的其他參數進行設置，在官網的案例中做了一個十分酷炫的汽車的夜間儀表盤，下面我粘貼下代碼，大家可以自己研究下，不懂得參數可以查看文檔：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts練習</title> <script type="text/javascript" src="js/echarts.min.js"></script> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 option = { backgroundColor: '#1b1b1b', tooltip: { formatter: "{a} <br/>{c} {b}" }, toolbox: { show: true, feature: { mark: { show: true }, restore: { show: true }, saveAsImage: { show: true } } }, series: [{ name: '速度', type: 'gauge', min: 0, max: 220, splitNumber: 11, radius: '50%', axisLine: { // 坐標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 color: [ [0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500'] ], width: 3, shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, axisLabel: { // 坐標軸小標記 textStyle: { // 屬性lineStyle控制線條樣式 fontWeight: 'bolder', color: '#fff', shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, axisTick: { // 坐標軸小標記 length: 15, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto', shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, splitLine: { // 分隔線 length: 25, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 width: 3, color: '#fff', shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, pointer: { // 分隔線 shadowColor: '#fff', //默認透明 shadowBlur: 5 }, title: { textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE fontWeight: 'bolder', fontSize: 20, fontStyle: 'italic', color: '#fff', shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, detail: { backgroundColor: 'rgba(30,144,255,0.8)', borderWidth: 1, borderColor: '#fff', shadowColor: '#fff', //默認透明 shadowBlur: 5, offsetCenter: [0, '50%'], // x, y，單位px textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE fontWeight: 'bolder', color: '#fff' } }, data: [{ value: 40, name: 'km/h' }] }, { name: '轉速', type: 'gauge', center: ['25%', '55%'], // 默認全局居中 radius: '30%', min: 0, max: 7, endAngle: 45, splitNumber: 7, axisLine: { // 坐標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 color: [ [0.29, 'lime'], [0.86, '#1e90ff'], [1, '#ff4500'] ], width: 2, shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, axisLabel: { // 坐標軸小標記 textStyle: { // 屬性lineStyle控制線條樣式 fontWeight: 'bolder', color: '#fff', shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, axisTick: { // 坐標軸小標記 length: 12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto', shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, splitLine: { // 分隔線 length: 20, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 width: 3, color: '#fff', shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, pointer: { width: 5, shadowColor: '#fff', //默認透明 shadowBlur: 5 }, title: { offsetCenter: [0, '-30%'], // x, y，單位px textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE fontWeight: 'bolder', fontStyle: 'italic', color: '#fff', shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, detail: { //backgroundColor: 'rgba(30,144,255,0.8)', // borderWidth: 1, borderColor: '#fff', shadowColor: '#fff', //默認透明 shadowBlur: 5, width: 80, height: 30, offsetCenter: [25, '20%'], // x, y，單位px textStyle: { // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE fontWeight: 'bolder', color: '#fff' } }, data: [{ value: 1.5, name: 'x1000 r/min' }] }, { name: '油表', type: 'gauge', center: ['75%', '50%'], // 默認全局居中 radius: '30%', min: 0, max: 2, startAngle: 135, endAngle: 45, splitNumber: 2, axisLine: { // 坐標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 color: [ [0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500'] ], width: 2, shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, axisTick: { // 坐標軸小標記 length: 12, // 屬性length控制線長 lineStyle: { // 屬性lineStyle控制線條樣式 color: 'auto', shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, axisLabel: { textStyle: { // 屬性lineStyle控制線條樣式 fontWeight: 'bolder', color: '#fff', shadowColor: '#fff', //默認透明 shadowBlur: 10 }, formatter: function(v) { switch(v + '') { case '0': return 'E'; case '1': return 'Gas'; case '2': return 'F'; } } }, splitLine: { // 分隔線 length: 15, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 width: 3, color: '#fff', shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, pointer: { width: 2, shadowColor: '#fff', //默認透明 shadowBlur: 5 }, title: { show: false }, detail: { show: false }, data: [{ value: 0.5, name: 'gas' }] }, { name: '水表', type: 'gauge', center: ['75%', '50%'], // 默認全局居中 radius: '30%', min: 0, max: 2, startAngle: 315, endAngle: 225, splitNumber: 2, axisLine: { // 坐標軸線 lineStyle: { // 屬性lineStyle控制線條樣式 color: [ [0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500'] ], width: 2, shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, axisTick: { // 坐標軸小標記 show: false }, axisLabel: { textStyle: { // 屬性lineStyle控制線條樣式 fontWeight: 'bolder', color: '#fff', shadowColor: '#fff', //默認透明 shadowBlur: 10 }, formatter: function(v) { switch(v + '') { case '0': return 'H'; case '1': return 'Water'; case '2': return 'C'; } } }, splitLine: { // 分隔線 length: 15, // 屬性length控制線長 lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式 width: 3, color: '#fff', shadowColor: '#fff', //默認透明 shadowBlur: 10 } }, pointer: { width: 2, shadowColor: '#fff', //默認透明 shadowBlur: 5 }, title: { show: false }, detail: { show: false }, data: [{ value: 0.5, name: 'gas' }] }] }; myChart.setOption(option); setInterval(function() { option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0; option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0; option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0; myChart.setOption(option); }, 2000) </script> </body> </html>
