解决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