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

解决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相关推荐

解决微信小程序实时视频、直播插件主播意外掉线再进入，观众端卡住断流，无法刷新的问题
观众端: <live-player src="https://domain/pull_stream" mode="RTC" autoplay bindst ...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2...
今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档解决方法在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...
微信小程序的wx.chooseImage如何把图片传给后端
微信小程序的wx.chooseImage如何把图片传给后端首选wx.chooseImage的用法先见官方文档 => wx.chooseImage 这个的返回值如下↓ 这里可以看到这个temp ...
解决微信小程序银行卡号输入转换格式
解决微信小程序银行卡号输入转换格式问题 ps:2017-02-17 19:44 (发现新bug,暂已解决优化中) 新手第一次写博客,请多多见谅! (感觉会有更好的办法,希望有大牛能对我指点指点) 输入 ...
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题项目需求: 一个信息提交页面:有input输入框,有picker选择器遇到的问题: 点击input输入框时,手机自动弹出键盘,但 ...
详解 - 解决微信小程序分享功能图片比例问题 - 全局分享
前言: 我在我的博客小程序使用微信小程序分享功能图片不符合5:4问题 ,对其原理扫描下面二维码,可以体验哦准备在需要自定义分享的页面设置canvas 组件目录准备详解思路定义总函数 ...
微信小程序“同声传译”插件（语音识别，语音合成）体验
本文原文:http://www.happycxz.com/m/?p=383 官方插件上线微信小程序"同声传译"插件介绍传送门遥知之改版原来使用的是我自己封装的API,现在改 ...
android post请求时报415错误,解决微信小程序用 SpringMVC 处理http post时请求报415错误...
解决微信小程序用 SpringMVC 处理http post时请求返回415错误写微信小程序时遇到的问题,这个坑硬是让我整了半天 wx.request请求跟ajax相似处理方法一致javascrip ...

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

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

最新文章

热门文章