解决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 chart
new 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');
/* 例如设计图尺寸为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
})
}
}
<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
})
}
},
})