微信小程序+ECharts实现动态刷新的过程记录
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要给大家介绍了关于微信小程序+ECharts实现动态刷新的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
前言
最近遇到了一个需求，就是要在小程序中实时刷新图表，最开始选择的是wx-chart，然后发现不能满足我的需求，最后选择了ECharts，也踩了一些坑，通过在网上收集资料，终于弄出来了，记录下我实现的过程。
方法实例
1.首先到ECharts官网下载它的例子，然后把ec-canvas文件拷贝下来放到你自己的项目中：
2.然后在你需要用的页面引入，在xxx.json中加入，这里要注意路径，我的页面统一是放在pages文件夹中的：
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
3.Ok，开始干正事了，我这里就举一个页面两个图表的例子，先把简单的布局和样式弄好
xxx.wxml：
需要提供两个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;
}
这里值得注意的是，如果你想放三个图表，四个图表或者多个，一定要设canvas盒子的高度，要不然你会发现后面两个表咋不见了！！官方的多个图表没有设高度，所以我照官方的放了几个图，发现都没有，心累，找了半天，才发现是样式问题，索性每个盒子都设了50%的高度。
4.好了，准备条件都做足，接下来就是重头戏了，（其实我觉得我写的好繁琐，全是重复的代码，不过暂时也没时间整合了，有兴趣的朋友可以自己写方法整合一下啦）
xx.js
首先肯定就是要在页面最开始引入那个官方的组件了
import * as echarts from '../../ec-canvas/echarts';
先将表格要展示的样式配置之类的设好
function setOption(chart, xdata, ydata) {
const option = {
title: {
text: '测试',
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轴上的数据是动态的，所以我作为参数传进来
axisLabel: {
interval: 5, //x轴间隔多少显示刻度
formatter: function (value) { //显示时间
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轴上的数据也是动态的，也作为参数传进来
symbol: 'none',
lineStyle: {
width: 1
}
}]
};
chart.setOption(option)
}
写page的一些方法
Page({
data: {
ecOne: {
lazyLoad: true
},
ecTwo: {
lazyLoad: true
},
timer:'' //因为我要实时刷新，所以设置了个定时器
},
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) { //初始化第一个图表
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) { //初始化第二个图表
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 () { //这一步其实就要给图表加上数据
var _this = this;
wx.request({
url: 'https://xxxxxxx.com', //你请求数据的接口地址
method: 'POST',
header: {
"Content-Type": "application/json"
},
data: { //传的参数，这些都不用多说了吧
id:xxxx
},
success:function(res){
//我这里就假设res.xdata和res.ydata是我们需要的数据，即在x轴和y轴展示的数据，记住一定是数组哦！
_this.init_one(res.xdata,res.ydata)
}
})
},
//第二个图表也是一样的处理
getTwoOption: function (){
var _this = this;
wx.request({
url: 'https://xxxxxxx.com', //你请求数据的接口地址
method: 'POST',
header: {
"Content-Type": "application/json"
},
data: { //传的参数，这些都不用多说了吧
id:xxxx
},
success:function(res){
_this.init_two(res.xdata,res.ydata)
}
})
}
})
好了，大概步骤就是这样，反正是需要动态变化就当做参数传进去，我这里在onUnload中清除了定时器，因为不清楚的话，你跳转到别的页面，你会发现还会一直请求，所以就要在离开这个页面之前清除定时器，也不是啥技术大牛，如果有更好的方法，盼望大神多多指正咯！哈哈哈
总结
到此这篇关于微信小程序+ECharts实现动态刷新的文章就介绍到这了,更多相关微信小程序+ECharts动态刷新内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！
上一篇：详解JS ES6编码规范
下一篇：详解nodejs中的异步迭代器