微信小程序Tab切换下面的图表显示

最新推荐文章于 2025-06-26 09:03:02 发布

原创

最新推荐文章于 2025-06-26 09:03:02 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序Echarts

本文介绍了在微信小程序中遇到的Tab切换时图表不随页面移动的问题。通过发现swiper和scroll-view下不能使用canvas，作者改用普通标签并利用show、hidden控制图表显示，但遇到了图表压缩的问题。最终，通过使用wx:if解决了这个问题，确保了图表在Tab切换时能正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前没有怎么做过小程序，最近公司需要刚上来就做图表，这对于我来说是一个挑战。
在没做之前觉得没什么，但是后来有一个很大的bug。就是在做Tab切换的时候，我发现页面不管是上下还是左右滑动的时候图表会悬浮在上面，不会随着页面进行移动。
结果发现swiper和scroll-view标签下面不能用canvas，这才明白。然后就改用了普通的标签。

这里用的show、hidden隐藏显示

结果如下：切换完之后第二页的图表进行了压缩。看了一下尺寸也没有错啊，到现在也没搞明白怎么回事。于是就换了另一种方式wx:if进行显示和隐藏。把wxml里面注释的内容解开就可以了。把另一个用hidden进行切换的进行注释。

JS：
import * as echarts from ‘../../ec-canvas/echarts’;
const app = getApp();
function initChart(canvas,width,height){
const chart = echarts.init(canvas,null,{
width:width,
height:height
});
canvas.setChart(chart);
var option = {
color: [“#37A2DA”, “#67E0E3”, “#9FE6B8”],
legend: {
data: [‘A’, ‘B’, ‘C’],
top: 10,
left: