在小程序中使用Echart圖表的示例代碼
在小程序中使用Echart圖表
- Echart UI構(gòu)建（柱狀圖）
- Echart 假數(shù)據(jù)
- Echart 動態(tài)設(shè)置數(shù)據(jù)
柱狀圖UI示例
// Echart config，包括init data 和style及數(shù)據(jù)類型
var option = {
animation: false,//提高頁面加載速度，關(guān)閉echart的動畫
grid: [
//grid section UI
...
],
xAxis: [
//xAxis section UI
...
],
yAxis: [
//yAxis section UI
...
],
series: [
{
//左側(cè)坐標(biāo)軸UI
...
data: [100, 100, 100, 100, 100],
},
{
//左側(cè)柱狀圖 UI 及數(shù)據(jù)
...
data: [66, 54, 87, 78, 87],
},
{
//右側(cè)坐標(biāo)軸UI
...
data: [100, 100, 100, 100, 100],
},
{
//右側(cè)柱狀圖 UI 及數(shù)據(jù)
...
data: [84, 87, 86, 76, 76],
},
]
}
// 初始化Echart圖表UI
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
chart.setOption(option)
return chart
}
以上就是利用echart圖表插件在小程序中生成一個(gè)我們需要的柱狀圖用以展示我們需要表達(dá)給用戶的數(shù)據(jù)表。
當(dāng)然，在實(shí)際的開發(fā)中，所有的數(shù)據(jù)都是通過獲取數(shù)據(jù)庫中的數(shù)據(jù)，然后根據(jù)數(shù)據(jù)生成，而不是寫死在series[]中，那么如何將ajax或者其他方式獲取到的數(shù)據(jù)傳入我們的UI中呢？
Echart的文檔告訴我們：
數(shù)據(jù)的動態(tài)更新
ECharts 由數(shù)據(jù)驅(qū)動，數(shù)據(jù)的改變驅(qū)動圖表展現(xiàn)的改變，因此動態(tài)數(shù)據(jù)的實(shí)現(xiàn)也變得異常簡單。
所有數(shù)據(jù)的更新都通過 setOption實(shí)現(xiàn)，你只需要定時(shí)獲取數(shù)據(jù)，setOption 填入數(shù)據(jù)，而不用考慮數(shù)據(jù)到底產(chǎn)生了那些變化，ECharts 會找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化。
也就是上面示例代碼中的這個(gè)方法
chart.setOption(option)
ok直接看代碼：
var hostTeamInfo = []//獲取的數(shù)據(jù) option.series[1].data = hostTeamInfo//根據(jù)前文，設(shè)置左側(cè)的數(shù)據(jù)
根據(jù)小程序的指導(dǎo)文檔，這部分代碼需要在page()生命周期中完成，至于是在onLoad還是onReady中，需要各位根據(jù)實(shí)際情況來決定
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap table右鍵功能實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap table右鍵功能的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這是一篇譯文，實(shí)例分析制作自定義的信息提示框的實(shí)現(xiàn)代碼2009-01-01
本文主要介紹了js中的循環(huán)方式及各種遍歷的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
javascript中eval和with用法實(shí)例總結(jié)
這篇文章主要介紹了javascript中eval和with用法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript中eval和with的功能、用法與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
javascript 判斷是否是ie，是否是特定版本 ，方法比較多，正則代碼比較段2008-07-07
layui table復(fù)選框禁止某幾條勾選的實(shí)例
今天小編就為大家分享一篇layui table復(fù)選框禁止某幾條勾選的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
今天來聊一下JavaScript中的對象訪問器,JavaScript的主要功能之一是能夠定義對象,這些對象可以封裝屬性和方法,本文將深入探討 JavaScript 對象訪問器是什么、它是如何工作的以及使用對象訪問器的作用,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細(xì)介紹了如何通過D3.js實(shí)現(xiàn)繪制折線圖，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)D3.js有一定的幫助，需要的可以參考一下2022-11-11
細(xì)數(shù)JavaScript 一個(gè)等號,兩個(gè)等號,三個(gè)等號的區(qū)別
下面小編就為大家?guī)硪黄?xì)數(shù)JavaScript 一個(gè)等號,兩個(gè)等號,三個(gè)等號的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
JS實(shí)現(xiàn)數(shù)組簡單去重及數(shù)組根據(jù)對象中的元素去重操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組簡單去重及數(shù)組根據(jù)對象中的元素去重操作,涉及javascript數(shù)組元素的遍歷、判斷、追加等操作實(shí)現(xiàn)去重功能的相關(guān)技巧,需要的朋友可以參考下2018-01-01