如何在小程序中使用Echart圖表-創(chuàng)新互聯(lián)
如何在小程序中使用Echart圖表？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
在小程序中使用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圖表插件在小程序中生成一個我們需要的柱狀圖用以展示我們需要表達(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ù)據(jù)，setOption 填入數(shù)據(jù)，而不用考慮數(shù)據(jù)到底產(chǎn)生了那些變化，ECharts 會找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化。
也就是上面示例代碼中的這個方法
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)容，你們掌握如何在小程序中使用Echart圖表的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)頁標(biāo)題：如何在小程序中使用Echart圖表-創(chuàng)新互聯(lián)
文章分享：http://m.jiaotiyi.com/article/ddiphg.html