大家在汽車(chē)駕駛艙里一眼就可以看到儀表盤(pán)，使用使用Echarts制作的儀表盤(pán)可以輕松展示用戶(hù)的數(shù)據(jù)，清晰的看出某個(gè)指標(biāo)值所在的范圍，儀表盤(pán)形式的報(bào)表應(yīng)用在各種統(tǒng)計(jì)系統(tǒng)中，本文結(jié)合實(shí)例講解儀表盤(pán)在銷(xiāo)售任務(wù)完成率的統(tǒng)計(jì)應(yīng)用。

效果演示      源碼下載

HTML

首先引入Echarts，然后在需要放置圖表的地方加上div#myChart，同時(shí)給它加上寬度和高度屬性。

<script src="echarts.min.js"></script> 
<div id="myChart" style="width: 600px;height:400px;"></div> 

Javascript

接下來(lái)要初始化echarts實(shí)例，然后設(shè)置選項(xiàng)，最后渲染圖像。

var myChart = echarts.init(document.getElementById('myChart')); 
option = { 
tooltip : { 
formatter: "{a} <br/> : {c}%" 
}, 
series : [ 
{ 
name:'業(yè)務(wù)指標(biāo)', 
type:'gauge', 
detail : {formatter:'{value}%'}, //儀表盤(pán)顯示數(shù)據(jù) 
axisLine: { //儀表盤(pán)軸線(xiàn)樣式 
lineStyle: { 
width: 20 
} 
}, 
splitLine: { //分割線(xiàn)樣式 
length: 20 
}, 
data:[{value: 50, name: '完成率'}] 
} 
] 
}; 
myChart.setOption(option); 

選項(xiàng)設(shè)置中的tooltip是一個(gè)提示框組件，默認(rèn)參數(shù)show：true是顯示提示框的。參數(shù)formatter是提示框浮層內(nèi)容格式，它支持字符串模板和回調(diào)函數(shù)兩種形式。一般我們使用字符串模板，模板變量有 {a}, ，{c}，vvxyksv9kd，{e}，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等。 在 trigger 為 'axis' 的時(shí)候，會(huì)有多個(gè)系列的數(shù)據(jù)，此時(shí)可以通過(guò) {a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類(lèi)型下的 {a}，，{c}，vvxyksv9kd 含義不一樣。對(duì)餅圖、儀表盤(pán)、漏斗圖三種類(lèi)型的圖表參數(shù)含義為: {a}（系列名稱(chēng)），（數(shù)據(jù)項(xiàng)名稱(chēng)），{c}（數(shù)值）, vvxyksv9kd（百分比）。

選項(xiàng)中的series是系列列表。每個(gè)系列通過(guò) type 決定自己的圖表類(lèi)型，它包含很多參數(shù)。其中參數(shù)name表示系列名稱(chēng)，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。參數(shù)type指圖表類(lèi)型，type:'gauge'即儀表盤(pán)。參數(shù)detail是指儀表盤(pán)詳情，用于顯示數(shù)據(jù)，可以定義數(shù)據(jù)顯示的高寬大小，背景色，邊框顏色等等，本例中定義了儀表盤(pán)的詳情顯示為百分?jǐn)?shù)。參數(shù)axisLine可以定義儀表盤(pán)軸線(xiàn)相關(guān)配置，如軸線(xiàn)樣式等。參數(shù)splitLine用來(lái)定義儀表盤(pán)中的分隔線(xiàn)樣式，如線(xiàn)長(zhǎng)、線(xiàn)的顏色、線(xiàn)寬等等。參數(shù)data則是用來(lái)展示數(shù)據(jù)的，可以設(shè)置儀表盤(pán)指標(biāo)對(duì)應(yīng)的值以及名稱(chēng)。

如果是一個(gè)動(dòng)態(tài)變化的儀表盤(pán)，可以使用setInterval()定時(shí)變換儀表值，如以下代碼。

clearInterval(timeTicket); 
var timeTicket = setInterval(function () { 
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; 
myChart.setOption(option, true); 
},2000); 

以上內(nèi)容給大家介紹了ECharts儀表盤(pán)實(shí)例代碼，希望對(duì)大家有所幫助！

最新評(píng)論