ECharts儀錶盤執行個體代碼(附源碼下載)，echarts儀錶盤

ECharts儀錶盤執行個體代碼(附源碼下載)，echarts儀錶盤

大家在汽車駕駛艙裡一眼就可以看到儀錶盤，使用使用Echarts製作的儀錶盤可以輕鬆展示使用者的資料，清晰的看出某個指標值所在的範圍，儀錶盤形式的報表應用在各種統計系統中，本文結合執行個體講解儀錶盤在銷售任務完成率的統計應用。

效果示範      源碼下載

HTML

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

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

Javascript

接下來要初始化echarts執行個體，然後設定選項，最後渲染映像。

var myChart = echarts.init(document.getElementById('myChart')); option = { tooltip : { formatter: "{a} <br/>{b} : {c}%" }, series : [ { name:'業務指標', type:'gauge', detail : {formatter:'{value}%'}, //儀錶盤顯示資料 axisLine: { //儀錶盤軸線樣式 lineStyle: { width: 20 } }, splitLine: { //分割線樣式 length: 20 }, data:[{value: 50, name: '完成率'}] } ] }; myChart.setOption(option); 

選項設定中的tooltip是一個提示框組件，預設參數show：true是顯示提示框的。參數formatter是提示框浮層內容格式，它支援字串模板和回呼函數兩種形式。一般我們使用字串模板，模板變數有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，資料名，資料值等。 在 trigger 為 'axis' 的時候，會有多個系列的資料，此時可以通過 {a0}, {a1}, {a2} 這種後面加索引的方式表示系列的索引。 不同圖表類型下的 {a}，{b}，{c}，{d} 含義不一樣。對餅圖、儀錶盤、漏斗圖三種類型的圖表參數含義為: {a}（系列名稱），{b}（資料項目名稱），{c}（數值）, {d}（百分比）。

選項中的series是系列列表。每個系列通過 type 決定自己的圖表類型，它包含很多參數。其中參數name表示系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列。參數type指圖表類型，type:'gauge'即儀錶盤。參數detail是指儀錶盤詳情，用於顯示資料，可以定義資料顯示的高寬大小，背景色，邊框顏色等等，本例中定義了儀錶盤的詳情顯示為百分數。參數axisLine可以定義儀錶盤軸線相關配置，如軸線樣式等。參數splitLine用來定義儀錶盤中的分隔線樣式，如線長、線的顏色、線寬等等。參數data則是用來展示資料的，可以設定儀錶盤指標對應的值以及名稱。

如果是一個動態變化的儀錶盤，可以使用setInterval()定時變換儀錶值，如以下代碼。

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

以上內容給大家介紹了ECharts儀錶盤執行個體代碼，希望對大家有所協助！

您可能感興趣的文章:

• echarts圖表匯出excel樣本
• Ajax擷取到資料放入echarts裡不顯示的原因分析及解決辦法