解决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');

一般以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
})
}
},
})

解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab的更多相关文章

  1. 解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的

    解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...

  2. 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入

    如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...

  3. 解决微信小程序登录与发布的一些问题

    解决微信小程序的问题 图片在电脑上显示但在手机上却无法显示的问题 要使用的是本地图片,不想把图片上传到网络再通过https的方式解决,解决方法如下: 1.image src中的图片地址对英文字母大小写 ...

  4. 今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2

    今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档 解决方法 在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...

  5. 解决微信小程序用 SpringMVC 处理http post时请求报415错误

    解决微信小程序用 SpringMVC 处理http post时请求返回415错误 写微信小程序时遇到的问题,这个坑硬是让我整了半天 wx.request请求跟ajax类似处理方法一致 小程序端请求代码 ...

  6. 微信小程序遍历wx:for,wx:for-item,wx:key

    微信小程序中wx:for遍历默认元素为item,但是如果我们设计多层遍历的时候我们就需要自定义item的字段名以及key的键名 wx:for="{{item.goodsList}}" ...

  7. 一招解决微信小程序中的H5缓存问题

    一招解决微信小程序中的H5缓存问题1.问题描述开发过程中,为了更新代码方便,往往会在小程序中嵌入H5页面.但问题来了,小程序原生代码更新版本后,简单的从微信中删除或者代码强刷就可以解决缓存问题,但小程 ...

  8. 【微信小程序】wx.openLocation调取失败

    在调取地图的时候发现,wx.openLocation的方法在模拟器和安卓手机上都可以用,在苹果手机上报错. 报错为调取失败:fail invoke too frequently             ...

  9. 从session原理出发解决微信小程序的登陆问题

    声明:本文为作者原创文章,转载请注明出处 https://www.cnblogs.com/MaMaNongNong/p/9127416.html  原理知识准备  对于已经熟悉了session原理的同 ...

随机推荐

  1. runtime-给系统已有类添加属性

    在没有接触runtime之前,我们接触到的能给类进行扩展的方法有类目(category)和延展(extension)两种.类目(category)可以给系统已有类添加扩展方法但是不能添加属性,并且被添 ...

  2. mvc ajax_返回数据

    假设cshtml文件中是这样的: <script type="text/javascript"> $(document).ready(function(){ $(&qu ...

  3. WebFrom模拟MVC

    如:  aspx前台     这样写生成页面时不会产生新的html标签,用控件则会产生新的html标签 <h1><%= title %></h1> <p> ...

  4. PropertyGrid—默认属性,默认事件,属性默认值

    零.引言 PropertyGrid显示一个对象的属性和事件时,可以设置其默认属性和事件,也就是当你选中对象时,propertyGrid中焦点在哪一个属性或事件上.为对象的属性提供默认值,使Proper ...

  5. 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  6. 动态iframe 分享

    function createIframe() { var i = document.createElement("iframe"); i.src = "/RSK/Rsk ...

  7. poj3468 A Simple Problem with Integers(线段树/树状数组)

    Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...

  8. Class.isAssignableFrom(Class clz)方法 与 instanceof 关键字的区别

    Class.isAssignableFrom()是用来判断一个类Class1和另一个类Class2是否相同或是另一个类的子类或接口.   格式为:        Class1.isAssignable ...

  9. Python程序性能分析模块----------cProfile

    cProfile分析器可以用来计算程序整个运行时间,还可以单独计算每个函数运行时间,并且告诉你这个函数被调用多少次 def foo(): pass import cProfile cProfile.r ...

  10. bzoj3382 [Usaco2004 Open]Cave Cows 3 洞穴里的牛之三

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3382 [题解] 套路题. 首先我们会发现曼哈顿距离不好处理,难道要写kdtree??? (k ...