微信小程序+ECharts實(shí)現(xiàn)動(dòng)態(tài)刷新的過(guò)程記錄
前言
最近遇到了一個(gè)需求，就是要在小程序中實(shí)時(shí)刷新圖表，最開(kāi)始選擇的是wx-chart，然后發(fā)現(xiàn)不能滿足我的需求，最后選擇了ECharts，也踩了一些坑，通過(guò)在網(wǎng)上收集資料，終于弄出來(lái)了，記錄下我實(shí)現(xiàn)的過(guò)程。
方法實(shí)例
1.首先到ECharts官網(wǎng)下載它的例子，然后把ec-canvas文件拷貝下來(lái)放到你自己的項(xiàng)目中：
2.然后在你需要用的頁(yè)面引入，在xxx.json中加入，這里要注意路徑，我的頁(yè)面統(tǒng)一是放在pages文件夾中的：
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
3.Ok，開(kāi)始干正事了，我這里就舉一個(gè)頁(yè)面兩個(gè)圖表的例子，先把簡(jiǎn)單的布局和樣式弄好
xxx.wxml：
需要提供兩個(gè)canvas盒子：
<view class="content">
<ec-canvas id="mychart-one" canvas-id="mychart-multi-one" ec="{{ ecOne}}"></ec-canvas>
<ec-canvas id="mychart-two" canvas-id="mychart-multi-two" ec="{{ ecTwo }}"></ec-canvas>
</view>
xxx.wxss:
.content {
width: 100%;
background-color: #F2F2F2;
overflow-y: auto;
}
#mychart-one {
position: absolute;
top: 0;
height: 50%;
left: 0;
right: 0;
}
#mychart-two {
position: absolute;
top: 50%;
height: 50%;
left: 0;
right: 0;
}
這里值得注意的是，如果你想放三個(gè)圖表，四個(gè)圖表或者多個(gè)，一定要設(shè)canvas盒子的高度，要不然你會(huì)發(fā)現(xiàn)后面兩個(gè)表咋不見(jiàn)了??！官方的多個(gè)圖表沒(méi)有設(shè)高度，所以我照官方的放了幾個(gè)圖，發(fā)現(xiàn)都沒(méi)有，心累，找了半天，才發(fā)現(xiàn)是樣式問(wèn)題，索性每個(gè)盒子都設(shè)了50%的高度。
4.好了，準(zhǔn)備條件都做足，接下來(lái)就是重頭戲了，（其實(shí)我覺(jué)得我寫(xiě)的好繁瑣，全是重復(fù)的代碼，不過(guò)暫時(shí)也沒(méi)時(shí)間整合了，有興趣的朋友可以自己寫(xiě)方法整合一下啦）
xx.js
首先肯定就是要在頁(yè)面最開(kāi)始引入那個(gè)官方的組件了
import * as echarts from '../../ec-canvas/echarts';
先將表格要展示的樣式配置之類的設(shè)好
function setOption(chart, xdata, ydata) {
const option = {
title: {
text: '測(cè)試',
padding: [10, 0, 0, 20],
textStyle: {
fontSize: 14,
color: '#696969'
},
top: '10rpx'
},
backgroundColor: "#fff",
color: ["#006EFF", "#67E0E3", "#9FE6B8"],
animation: false,
grid: {
show: false
},
xAxis: {
type: 'category',
data: xdata, //x軸上的數(shù)據(jù)是動(dòng)態(tài)的，所以我作為參數(shù)傳進(jìn)來(lái)
axisLabel: {
interval: 5, //x軸間隔多少顯示刻度
formatter: function (value) { //顯示時(shí)間
var date = new Date(value * 1000);
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
return h + m
},
fontSize: 8
}
},
yAxis: {
x: 'center',
scale: true,
type: 'value',
axisLabel: {
formatter: function (value) {
var val = value / 1000000000 + 'G';
return val
}
}
},
series: [{
type: 'line',
data: ydata, //y軸上的數(shù)據(jù)也是動(dòng)態(tài)的，也作為參數(shù)傳進(jìn)來(lái)
symbol: 'none',
lineStyle: {
width: 1
}
}]
};
chart.setOption(option)
}
寫(xiě)page的一些方法
Page({
data: {
ecOne: {
lazyLoad: true
},
ecTwo: {
lazyLoad: true
},
timer:'' //因?yàn)槲乙獙?shí)時(shí)刷新，所以設(shè)置了個(gè)定時(shí)器
},
onLoad: function (options) {
var _this = this;
this.getOneOption();
this.getTwoOption();
this.setData({ //每隔一分鐘刷新一次
timer: setInterval(function () {
_this.getOneOption();
_this.getTwoOption();
}, 60000)
})
},
onReady: function () { //這一步是一定要注意的
this.oneComponent = this.selectComponent('#mychart-one');
this.twoComponent = this.selectComponent('#mychart-two');
},
onUnload: function () {
clearInterval(this.data.timer)
},
init_one: function (xdata, ydata) { //初始化第一個(gè)圖表
this.oneComponent.init((canvas, width, height) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
setOption(chart, xdata, ydata)
this.chart = chart;
return chart;
});
},
init_two: function (xdata, ydata) { //初始化第二個(gè)圖表
this.storagemaxComponent.init((canvas, width, height) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
setOption(chart, xdata, ydata)
this.chart = chart;
return chart;
});
},
getOneOption: function () { //這一步其實(shí)就要給圖表加上數(shù)據(jù)
var _this = this;
wx.request({
url: 'https://xxxxxxx.com', //你請(qǐng)求數(shù)據(jù)的接口地址
method: 'POST',
header: {
"Content-Type": "application/json"
},
data: { //傳的參數(shù)，這些都不用多說(shuō)了吧
id:xxxx
},
success:function(res){
//我這里就假設(shè)res.xdata和res.ydata是我們需要的數(shù)據(jù)，即在x軸和y軸展示的數(shù)據(jù)，記住一定是數(shù)組哦！
_this.init_one(res.xdata,res.ydata)
}
})
},
//第二個(gè)圖表也是一樣的處理
getTwoOption: function (){
var _this = this;
wx.request({
url: 'https://xxxxxxx.com', //你請(qǐng)求數(shù)據(jù)的接口地址
method: 'POST',
header: {
"Content-Type": "application/json"
},
data: { //傳的參數(shù)，這些都不用多說(shuō)了吧
id:xxxx
},
success:function(res){
_this.init_two(res.xdata,res.ydata)
}
})
}
})
好了，大概步驟就是這樣，反正是需要?jiǎng)討B(tài)變化就當(dāng)做參數(shù)傳進(jìn)去，我這里在onUnload中清除了定時(shí)器，因?yàn)椴磺宄脑?，你跳轉(zhuǎn)到別的頁(yè)面，你會(huì)發(fā)現(xiàn)還會(huì)一直請(qǐng)求，所以就要在離開(kāi)這個(gè)頁(yè)面之前清除定時(shí)器，也不是啥技術(shù)大牛，如果有更好的方法，盼望大神多多指正咯！哈哈哈
總結(jié)
到此這篇關(guān)于微信小程序+ECharts實(shí)現(xiàn)動(dòng)態(tài)刷新的文章就介紹到這了,更多相關(guān)微信小程序+ECharts動(dòng)態(tài)刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序與webview交互實(shí)現(xiàn)支付功能
這篇文章主要介紹了微信小程序與webview交互實(shí)現(xiàn)支付功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
PHP函數(shù)庫(kù)提供了編/解碼JSON的函數(shù)：json_encode()和json_decode()，可以比較方便的傳遞數(shù)組或?qū)ο蠼ojavascript2014-03-03
這篇文章主要為大家詳細(xì)介紹了js仿微信語(yǔ)音播放的實(shí)現(xiàn)思路，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
前端的初學(xué)者在學(xué)習(xí)Javascript中this指向的時(shí)候經(jīng)常都會(huì)一頭霧水,尤其是在ES6箭頭函數(shù)出現(xiàn)之前,所以本篇文章主要是介紹和總結(jié)了各種情況下的this指向,希望對(duì)大家有所幫助2023-12-12
openlayers實(shí)現(xiàn)圖標(biāo)拖動(dòng)獲取坐標(biāo)
這篇文章主要為大家詳細(xì)介紹了openlayers實(shí)現(xiàn)圖標(biāo)拖動(dòng)獲取坐標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
一個(gè)網(wǎng)頁(yè)標(biāo)題title的閃動(dòng)提示效果實(shí)現(xiàn)思路
通過(guò)網(wǎng)頁(yè)title來(lái)提示用戶有新消息這個(gè)功能很常見(jiàn)，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-03-03
細(xì)數(shù)promise與async/await的使用及區(qū)別說(shuō)明
這篇文章主要介紹了細(xì)數(shù)promise與async/await的使用及區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
JavaScript編程開(kāi)發(fā)中的五個(gè)實(shí)用小技巧
下面的5點(diǎn)說(shuō)明確實(shí)不錯(cuò)，提高性能與可讀性，大家可以根據(jù)需要選擇使用。2010-07-07
js實(shí)現(xiàn)運(yùn)行代碼需要刷新的解決方法
js實(shí)現(xiàn)運(yùn)行代碼需要刷新的解決方法...2007-08-08
javascript event在FF和IE的兼容傳參心得(絕對(duì)好用)
event在IE和FF不兼，下面為大家分享的是javascript event在FF和IE的兼容傳參心得,需要的朋友可以參考下2014-07-07