本文详细记录在微信小程序中使用ECharts实现图表动态刷新的过程。通过引入ec-canvas组件，解决多图表布局高度塌陷问题，并展示如何配置option及利用setInterval实现定时数据更新。重点强调在页面卸载时清除定时器以避免内存泄漏和无效请求，提供从配置到代码实现的完整步骤。
前言
近期开发中遇到一个需求，需要在微信小程序内实现图表的实时数据刷新。起初尝试使用wx-chart组件，但发现其功能无法满足特定需求，最终决定采用ECharts。在此过程中遇到了一些技术难点，通过查阅官方文档及社区资料，逐步解决了问题，现将具体实现过程整理如下。
方法实例
第一步，访问ECharts官方网站下载示例代码，并将其中的ec-canvas文件夹完整复制到你的小程序项目目录中。
第二步，在需要使用图表的页面配置文件（xxx.json）中注册组件。注意检查路径是否正确，本例中页面统一存放于pages文件夹下。
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}第三步，开始处理核心逻辑。本文以包含两个图表的页面为例，首先完成基础布局与样式的编写。
页面结构文件（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%），以确保所有图表正常渲染。
第四步，完成上述准备工作后，进入核心代码实现阶段。虽然示例代码中存在较多重复逻辑，暂时未进行深度封装，读者可根据实际需求自行优化整合。
页面逻辑文件（xx.js）实现如下：
首先，在页面JS文件中引入官方提供的组件模块。
import * as echarts from '../../ec-canvas/echarts';接着，初始化图表所需的配置项（option）及数据展示样式。
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实现动态刷新图表的教程介绍完毕。如需了解更多相关内容，可搜索本站往期文章或继续浏览后续内容，感谢支持。