小程序tab切换引起的echarts渲染堆积到一块的显示问题（三）

如图，就是当tab切换时候，出现的echarts渲染堆积到一块的问题

如何解决呢？

思路：只有在切换到当前tab对应的页面时该页面的图表才会加载。那就在包裹echarts图的盒子上加一个判断条件，当当前activeIndex==0（或者1，2等）的时候再加载这个图。

来看看效果：tab为今天和明天时候，对应的图都能正常显示了。

1.先放一下整体的布局的代码。

html:

<view class='active1'><component title='折线图' show_bol='{{false}}'></component>
</view>
<view class="container" style='float:left;'><view class='box_tab'><view class="tabbar item {{activeIndex==0? 'active':''}}" id='0' bindtap="activeClick">今天</view><view class="tabbar item1 {{activeIndex==1? 'active':''}}" id='1' bindtap="activeClick">明天</view><view class="tabbar item2  {{activeIndex==2? 'active':''}}" id='2' bindtap="activeClick">本月</view></view><view class="box_content" hidden='{{activeIndex!=0}}'>第一页<view class="container1" wx:if='{{activeIndex==0}}'><ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas></view></view><view class="box_content" hidden='{{activeIndex!=1}}'>第二页<view class="container1" wx:if='{{activeIndex==1}}'><ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas></view></view><view class="box_content" hidden='{{activeIndex!=2}}'>44444</view>
</view>

接下来是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 = {title: {text: '滑动时折线图应该被自定义导航栏遮挡住',left: 'center'},color: ["#37A2DA", "#67E0E3", "#9FE6B8"],legend: {data: ['A', 'B', 'C'],top: 50,left: 'center',backgroundColor: 'red',z: 100},grid: {containLabel: true},tooltip: {show: true,trigger: 'axis'},xAxis: {type: 'category',boundaryGap: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],// show: false},yAxis: {x: 'center',type: 'value',splitLine: {lineStyle: {type: 'dashed'}}// show: false},series: [{name: 'A',type: 'line',smooth: true,data: [18, 36, 65, 30, 78, 40, 33]}, {name: 'B',type: 'line',smooth: true,data: [12, 50, 51, 35, 70, 30, 20]}, {name: 'C',type: 'line',smooth: true,data: [10, 30, 31, 50, 40, 20, 10]
}]};chart.setOption(option);return chart;
}Page({onShareAppMessage: function (res) {return {title: 'ECharts 可以在微信小程序中使用啦！',path: '/pages/index/index',success: function () { },fail: function () { }}},data: {ec: {onInit: initChart,},activeIndex: 0},activeClick: function (e) {var that = this;that.setData({activeIndex: e.currentTarget.id,})},onReady() {}
});

源代码链接：https://github.com/mr0723/echarts-bug

小程序tab切换引起的echarts渲染堆积到一块的显示问题（三）相关推荐

navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
小程序tab切换效果
小程序实现tab切换很简单,只需要完成两部分. 1.页面 2.js触发时间先上效果: image.png 接下来介绍页面代码: 控制切换的Tab <view class="swipe ...
微信小程序tab切换
一:获取数据,初始化存储切换下标的变量以及数据二:点击切换高亮同时设置子数据 1.定义变量 data: {list:[],//总数据tabIndex:0,//tab切换利用的下标childrenLi ...
根据id来实现小程序tab切换，
本例根据绑定id来实现tab切换,但本例仍有缺陷,用for循环数据,无法实现切换.如有大神能够有更好方法,欢迎留言更正 WXML: <view class="tab"> ...
微信小程序 tab切换
设置背景颜色就直接在page里设置 page {background-color: rgb(242, 242, 242);} tab切换: navigator 页面链接传参的格式为url=&q ...
微信小程序 tab切换展示不同的内容
index.wxml <view class='shopDetail-box'><view class="tab-left" ><view class ...
微信小程序tab切换（点击标题切换，滑动屏幕切换）
效果图: WXML文件 <view class="tab"><scroll-view class="nav" scroll-x="t ...
微信小程序——tab切换内容
wxml: wxss: js: .wxml代码: <view class="body"> <view class="nav bc_white&quo ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...

小程序tab切换引起的echarts渲染堆积到一块的显示问题（三）

小程序tab切换引起的echarts渲染堆积到一块的显示问题（三）相关推荐

最新文章

热门文章