ECharts儀表盤(pán)實(shí)例代碼(附源碼下載)
大家在汽車(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ì)大家有所幫助!
相關(guān)文章
修改js confirm alert 提示框文字的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇修改js confirm alert 提示框文字的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06簡(jiǎn)單實(shí)用的HTML到UBB轉(zhuǎn)換腳本工具實(shí)現(xiàn)說(shuō)明
你也許是位樂(lè)于分享的技術(shù)人員,盡管你算不上什么技術(shù)高手,但是你都希望把自己所知道的通過(guò)博客與網(wǎng)友分享。為了讓更多人知道你的經(jīng)驗(yàn),你可能會(huì)努力把博文發(fā)布到專(zhuān)業(yè)論壇。2009-11-11鼠標(biāo)滾輪控制網(wǎng)頁(yè)橫向移動(dòng)實(shí)現(xiàn)思路
設(shè)置window的scrollLeft值,這里一定要是window不能是body否則滾動(dòng)有問(wèn)題,綁定事件mousewhell 也必須是在body上,感興趣的各位可以了解下哈,希望可以幫助到你2013-03-03每天一篇javascript學(xué)習(xí)小結(jié)(Array數(shù)組)
這篇文章主要介紹了javascript中的Array數(shù)組知識(shí)點(diǎn),對(duì)數(shù)組的基本使用方法,以及各種方法進(jìn)行整理,感興趣的小伙伴們可以參考一下2015-11-11Javascript 拖拽的一些高級(jí)的應(yīng)用(逐行分析代碼,讓你輕松了拖拽的原理)
這篇文章主要介紹了Javascript 拖拽的一些高級(jí)的應(yīng)用(逐行分析代碼,讓你輕松了拖拽的原理),需要的朋友可以參考下2015-01-01JavaScript數(shù)據(jù)結(jié)構(gòu)之鏈表的實(shí)現(xiàn)
鏈表是一種常見(jiàn)的數(shù)據(jù)結(jié)構(gòu)。它是動(dòng)態(tài)地進(jìn)行存儲(chǔ)分配的一種結(jié)構(gòu)。本文主要介紹JavaScript數(shù)據(jù)結(jié)構(gòu)中鏈表的實(shí)現(xiàn),具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03js實(shí)現(xiàn)鼠標(biāo)劃過(guò)給div加透明度的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)劃過(guò)給div加透明度的方法,涉及javascript動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,該方法可兼容火狐與IE瀏覽器,需要的朋友可以參考下2015-05-05