解決Echarts在微信小程序tab切換時的顯示會出現位置移動問題

tab切換時，圖表顯示錯亂

<canvas class="kcanvas" canvas-id="ringCanvas" hidden="{{currentTab == 1}}"></canvas> <view hidden="{{currentTab !== 1}}" id="one" class="currentPage"><view class="containerSales" wx: if="{{currentTab === 1}}"><ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ecSales}}"></ec-canvas></view> </view> ring chartnew wxCharts({canvasId: 'ringCanvas',type: 'ring',series: [{name: '成交量1',data: 15,}, {name: '成交量2',data: 35,}, {name: '成交量3',data: 78,}, {name: '成交量4',data: 63,}],width: 320,height: 200,dataLabel: false });

js當中使用require引入即可：

let Charts = require('./../../utils/wxcharts.js');

一般以iPhone6為標準進行設計

/* 例如設計圖尺寸為320 x 300 */ .canvas {width: 640px;height: 600px;transform: scale(0.5) } new Charts({animation: true,canvasId: 'canvas5',type: 'ring',extra: {ringWidth: 10,//圓環的寬度pie: {offsetAngle: -45//圓環的角度}},title: {name: '70%',color: '#7cb5ec',fontSize: 25},subtitle: {name: '收益率',color: '#666666',fontSize: 15},series: [{name: '成交量1',data: 15,stroke: false}, {name: '成交量2',data: 35,stroke: false}, {name: '成交量3',data: 78,stroke: false}, {name: '成交量4',data: 63,stroke: false}],disablePieStroke: true,width: 640,height: 200,dataLabel: true,legend: false,padding: 0});

/* 環形 */.canvas {z-index: 1;position: absolute;left: 32px;top: 60px;height: 350rpx; } new wxCharts({canvasId: 'ringCanvas',type: 'ring',legend: false,extra: {ringWidth: 15, //圓環的寬度pie: {offsetAngle: -45 //圓環的角度}},series: [{data: res.data.data.normalNum,}, {data: res.data.data.beLateNum,}, {data: res.data.data.leaveNum,}, {data: res.data.data.uncheckedNum,}],width: 320,height: 200,dataLabel: false}); switchNav: function(event) {var cur = event.currentTarget.dataset.current;if (this.data.currentTab == cur) { return false; }else {this.setData({currentTab: cur})}if(cur==1){this.setData({init_datas: nz_data,currentTab1: 1})var tmp_datas = this.data.init_datas;console.dir(tmp_datas);this.setData({nz_datas: tmp_datas,class:1})}if(cur==2){this.setData({init_datas1: man_data,currentTab1: 1})var tmp_datas = this.data.init_datas1;console.dir(tmp_datas);this.setData({nz_datas: tmp_datas,class:2})}},switchNav1: function (event) {var cur = event.currentTarget.dataset.curr;console.log("switchNav1_curr=" cur);console.log("class=" this.data.class);if (this.data.currentTab1 == cur) { return false; }else {this.setData({currentTab1: cur})}if(cur==1){if(this.data.class==1){var tmp_datas = this.data.init_datas;this.setData({nz_datas: tmp_datas})}if (this.data.class == 2) {var tmp_datas = this.data.init_datas1;this.setData({nz_datas: tmp_datas})}}

實現滑動tab

<view><view class="swiper-tab"><view class="swiper-tab-list {{tab==0 ? 'on' : ''}}" data-current="0" bindtap="tab_click">圖文</view><view class="swiper-tab-list {{tab==1 ? 'on' : ''}}" data-current="1" bindtap="tab_click">產品</view></view><swiper current="{{tab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="tab_slide"><swiper-item>圖文</swiper-item><swiper-item>產品</swiper-item></swiper> </view> Page({data: {tab: 0},tab_slide: function (e) {//滑動切換tab var that = this;that.setData({ tab: e.detail.current });},tab_click: function (e) {//點擊tab切換var that = this;if (that.data.tab === e.target.dataset.current) {return false;} else {that.setData({tab: e.target.dataset.current})}}, })
更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。