ECharts儀表盤實例代碼(附源碼下載)
大家在汽車駕駛艙里一眼就可以看到儀表盤,使用使用Echarts制作的儀表盤可以輕松展示用戶的數(shù)據(jù),清晰的看出某個指標值所在的范圍,儀表盤形式的報表應用在各種統(tǒng)計系統(tǒng)中,本文結合實例講解儀表盤在銷售任務完成率的統(tǒng)計應用。
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/> : {c}%" }, series : [ { name:'業(yè)務指標', type:'gauge', detail : {formatter:'{value}%'}, //儀表盤顯示數(shù)據(jù) axisLine: { //儀表盤軸線樣式 lineStyle: { width: 20 } }, splitLine: { //分割線樣式 length: 20 }, data:[{value: 50, name: '完成率'}] } ] }; myChart.setOption(option);
選項設置中的tooltip是一個提示框組件,默認參數(shù)show:true是顯示提示框的。參數(shù)formatter是提示框浮層內容格式,它支持字符串模板和回調函數(shù)兩種形式。一般我們使用字符串模板,模板變量有 {a}, ,{c},vvxyksv9kd,{e},分別表示系列名,數(shù)據(jù)名,數(shù)據(jù)值等。 在 trigger 為 'axis' 的時候,會有多個系列的數(shù)據(jù),此時可以通過 {a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類型下的 {a},,{c},vvxyksv9kd 含義不一樣。對餅圖、儀表盤、漏斗圖三種類型的圖表參數(shù)含義為: {a}(系列名稱),(數(shù)據(jù)項名稱),{c}(數(shù)值), vvxyksv9kd(百分比)。
選項中的series是系列列表。每個系列通過 type 決定自己的圖表類型,它包含很多參數(shù)。其中參數(shù)name表示系列名稱,用于tooltip的顯示,legend 的圖例篩選,在 setOption 更新數(shù)據(jù)和配置項時用于指定對應的系列。參數(shù)type指圖表類型,type:'gauge'即儀表盤。參數(shù)detail是指儀表盤詳情,用于顯示數(shù)據(jù),可以定義數(shù)據(jù)顯示的高寬大小,背景色,邊框顏色等等,本例中定義了儀表盤的詳情顯示為百分數(shù)。參數(shù)axisLine可以定義儀表盤軸線相關配置,如軸線樣式等。參數(shù)splitLine用來定義儀表盤中的分隔線樣式,如線長、線的顏色、線寬等等。參數(shù)data則是用來展示數(shù)據(jù)的,可以設置儀表盤指標對應的值以及名稱。
如果是一個動態(tài)變化的儀表盤,可以使用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儀表盤實例代碼,希望對大家有所幫助!
相關文章
每天一篇javascript學習小結(Array數(shù)組)
這篇文章主要介紹了javascript中的Array數(shù)組知識點,對數(shù)組的基本使用方法,以及各種方法進行整理,感興趣的小伙伴們可以參考一下2015-11-11Javascript 拖拽的一些高級的應用(逐行分析代碼,讓你輕松了拖拽的原理)
這篇文章主要介紹了Javascript 拖拽的一些高級的應用(逐行分析代碼,讓你輕松了拖拽的原理),需要的朋友可以參考下2015-01-01JavaScript數(shù)據(jù)結構之鏈表的實現(xiàn)
鏈表是一種常見的數(shù)據(jù)結構。它是動態(tài)地進行存儲分配的一種結構。本文主要介紹JavaScript數(shù)據(jù)結構中鏈表的實現(xiàn),具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03