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

向右看齐 2021-09-17 02:48 399阅读 0赞

解决Echarts在微信小程序tab切换时的显示会出现位置移动问题

我的js

  1. var dateTimePicker = require('../../utils/dateTimePicker.js');
  2. var wxCharts = require('../../utils/wxcharts.js');
  3. var util = require('../../utils/util.js');
  4. var app = getApp();
  6. Page({
  7.   /**
  8.    * 页面的初始数据
  9.    */
  10.   data: {
  11.     selected: true,
  12.     selected1: false,
  13.     date: '',
  14.     date1: '',
  15.     startYear: 2008,
  16.     endYear: 2222,
  17.     // 日期数据
  18.     datas: [],
  19.     // 月数据
  20.     attendDays: '',
  21.     lateTimes: '',
  22.     leaveEarlyTimes: '',
  23.     unusualTimes: '',
  24.     zao: '',
  25.     chi: '',
  26.     qifen: '',
  27.     items: [{
  28.       name: 'morning',
  29.       value: '上午',
  30.       checked: 'true'
  31.     }, {
  32.       name: 'moom',
  33.       value: '下午'
  34.     }, ]
  35.   },
  37.   zaodao: function() {
  38.     var that = this;
  39.     var time = that.data.date.substring(0, 10);
  40.     wx.navigateTo({
  41.       url: '../zaodao/zaodao?id=' + time,
  42.     })
  43.   },
  44.   chidao: function() {
  45.     var that = this;
  46.     var ytime = that.data.date1.substring(0, 7);
  47.     wx.navigateTo({
  48.       url: '../chidao/chidao?id=' + ytime,
  49.     })
  50.   },
  51.   qifen: function() {
  52.     var that = this;
  53.     var ytime = that.data.date1.substring(0, 7);
  54.     wx.navigateTo({
  55.       url: '../qifen/qifen?id=' + ytime,
  56.     })
  57.   },
  59.   // 单选按钮
  60.   radioChange: function(e) {
  61.     var that = this;
  62.     console.log("radio", e.detail.value);
  63.     var time = that.data.date.substring(0, 10);
  64.     if (e.detail.value == "morning") {
  65.       // 发送用户请求
  66.       wx.request({
  68.         method: 'GET',
  69.         header: {
  70.           'Authorization': 'Bearer' + wx.getStorageSync('token')
  71.         },
  72.         success(res) {
  73.           new wxCharts({
  74.             canvasId: 'ringCanvas',
  75.             type: 'ring',
  76.             legend: false,
  77.             extra: {
  78.               ringWidth: 15, //圆环的宽度
  79.               pie: {
  80.                 offsetAngle: -45 //圆环的角度
  81.               }
  82.             },
  83.             series: [{
  84.               data: res.data.data.normalNum,
  85.             }, {
  86.               data: res.data.data.beLateNum,
  87.             }, {
  88.               data: res.data.data.leaveNum,
  89.             }, {
  90.               data: res.data.data.uncheckedNum,
  91.             }],
  92.             width: 320,
  93.             height: 200,
  94.             dataLabel: false
  95.           });
  97.           console.log("考勤上午按钮", res.data.data);
  98.           that.setData({
  99.             datas: res.data.data,
  100.           })
  101.           wx.showToast({
  102.             title: '加载成功',
  103.             icon: 'loading',
  104.             duration: 500
  105.           })
  106.         }
  107.       })
  108.     } else {
  109.       // 发送用户请求
  110.       wx.request({
  112.         method: 'GET',
  113.         header: {
  114.           'Authorization': 'Bearer' + wx.getStorageSync('token')
  115.         },
  116.         success(res) {
  117.           new wxCharts({
  118.             canvasId: 'ringCanvas',
  119.             type: 'ring',
  120.             legend: false,
  121.             extra: {
  122.               ringWidth: 15, //圆环的宽度
  123.               pie: {
  124.                 offsetAngle: -45 //圆环的角度
  125.               }
  126.             },
  127.             series: [{
  128.               data: res.data.data.normalNum,
  129.             }, {
  130.               data: res.data.data.beLateNum,
  131.             }, {
  132.               data: res.data.data.leaveNum,
  133.             }, {
  134.               data: res.data.data.uncheckedNum,
  135.             }],
  137.             width: 320,
  138.             height: 200,
  139.             dataLabel: false
  140.           });
  142.           console.log("考勤下午按钮", res.data.data);
  143.           that.setData({
  144.             datas: res.data.data,
  145.           })
  146.           wx.showToast({
  147.             title: '加载成功',
  148.             icon: 'loading',
  149.             duration: 500
  150.           })
  151.         }
  152.       })
  153.     }
  154.   },
  155.   /**
  156.    * 生命周期函数--监听页面加载
  157.    */
  158.   onLoad: function(options) {
  160.     var that = this;
  161.     console.log("kq,username", wx.getStorageSync("username"));
  162.     // 获取当天时间
  163.     var time = util.formatTime(new Date());
  164.     that.setData({
  165.       date: time,
  166.       date1: time,
  167.       username: wx.getStorageSync("username"),
  168.     });
  171.     // 获取完整的年月日 时分秒，以及默认显示的数组
  172.     var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
  173.     var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
  174.     // 精确到分的处理，将数组的秒去掉
  175.     var lastArray = obj1.dateTimeArray.pop();
  176.     var lastTime = obj1.dateTime.pop();
  177.   },
  179.   // 改变日期
  180.   changeDate(e) {
  181.     // 全局
  182.     var that = this;
  183.     that.setData({
  184.       date: e.detail.value
  185.     });
  186.     var date = e.detail.value;
  187.     // 发送用户请求
  188.     wx.request({
  190.       method: 'GET',
  191.       header: {
  192.         'Authorization': 'Bearer' + wx.getStorageSync('token')
  193.       },
  194.       success(res) {
  195.         new wxCharts({
  196.           canvasId: 'ringCanvas',
  197.           type: 'ring',
  198.           legend: false,
  199.           extra: {
  200.             ringWidth: 15, //圆环的宽度
  201.             pie: {
  202.               offsetAngle: -45 //圆环的角度
  203.             }
  204.           },
  205.           series: [{
  206.             data: res.data.data.normalNum,
  207.           }, {
  208.             data: res.data.data.beLateNum,
  209.           }, {
  210.             data: res.data.data.leaveNum,
  211.           }, {
  212.             data: res.data.data.uncheckedNum,
  213.           }],
  215.           width: 320,
  216.           height: 200,
  217.           dataLabel: false
  218.         });
  220.         console.log("选择日期数据", res.data.data);
  221.         that.setData({
  222.           datas: res.data.data,
  223.         })
  224.         wx.showToast({
  225.           title: '加载成功',
  226.           icon: 'loading',
  227.           duration: 500
  228.         })
  229.       }
  230.     })
  231.   },
  233.   // 改变月份
  234.   changeDate1(e) {
  235.     // 全局
  236.     var that = this;
  237.     that.setData({
  238.       date1: e.detail.value, //数据源
  239.     })
  240.     var date1 = e.detail.value;
  241.     // 发送用户请求
  242.     wx.request({
  244.       method: 'GET',
  245.       header: {
  246.         'Authorization': 'Bearer' + wx.getStorageSync('token')
  247.       },
  248.       success(res) {
  249.         console.log("家长的月考勤", res.data)
  250.         if (res.data.code == 1) {
  251.           that.setData({
  252.             attendDays: 0,
  253.             lateTimes: 0,
  254.             leaveEarlyTimes: 0,
  255.             unusualTimes: 0,
  256.           })
  257.           wx.showModal({
  258.             title: '提示',
  259.             content: '当天没有数据',
  260.             // showCancel: false,
  261.             success: function(res) {
  262.               if (res.confirm) {
  263.                 console.log('用户点击确定');
  264.                 wx.navigateBack({
  265.                   delta: 1 //小程序关闭当前页面返回上一页面
  266.                 })
  267.               } else if (res.cancel) {
  268.                 console.log('用户点击取消');
  269.               }
  270.             }
  271.           })
  272.         } else {
  273.           that.setData({
  274.             attendDays: res.data.data.attendDays,
  275.             lateTimes: res.data.data.lateTimes,
  276.             leaveEarlyTimes: res.data.data.leaveEarlyTimes,
  277.             unusualTimes: res.data.data.unusualTimes,
  278.           })
  279.           wx.showToast({
  280.             title: '加载成功',
  281.             icon: 'loading',
  282.             duration: 500
  283.           })
  284.         }
  285.       }
  286.     })
  288.   },
  290.   /**
  291.    * 生命周期函数--监听页面初次渲染完成
  292.    */
  293.   onReady: function() {
  294.     var that = this;
  295.     /**
  296.      * 获取系统信息
  297.      */
  298.     // wx.getSystemInfo({
  299.     //   success: function(res) {
  300.     //     that.setData({
  301.     //       winWidth: res.windowWidth,
  302.     //       winHeight: res.windowHeight
  303.     //     });
  304.     //   }
  305.     // });
  306.   },
  308.   /**
  309.    * 滑动切换tab
  310.    */
  311.   bindChange: function(e) {
  312.     var that = this;
  313.     console.log("滑块", e.detail.current);
  314.     that.setData({
  315.       currentTab: e.detail.current
  316.     });
  317.   },
  318.   /**
  319.    * 点击tab切换
  320.    */
  321.   swichNav: function(e) {
  322.     console.log("切换", this.data.currentTab);
  323.     console.log("切换", e.target.dataset.current);
  324.     var that = this;
  325.     that.setData({
  326.       currentTab: e.target.dataset.current
  327.     });
  328.     if (e.target.dataset.current == 0){
  329.       console.log(e.target.dataset.current == 0)
  330.       new wxCharts({
  331.         canvasId: 'ringCanvas',
  332.         type: 'ring',
  333.         legend: false,
  334.         extra: {
  335.           ringWidth: 15, //圆环的宽度
  336.           pie: {
  337.             offsetAngle: -45 //圆环的角度
  338.           }
  339.         },
  340.         // series: [{
  341.         //   data: res.data.data.normalNum,
  342.         // }, {
  343.         //   data: res.data.data.beLateNum,
  344.         // }, {
  345.         //   data: res.data.data.leaveNum,
  346.         // }, {
  347.         //   data: res.data.data.uncheckedNum,
  348.         // }],
  349.         series: [{
  350.           data: 10,
  351.         }, {
  352.           data: 50,
  353.         }, {
  354.           data: 30,
  355.         }, {
  356.           data: 40,
  357.         }],
  358.         width: 320,
  359.         height: 200,
  360.         dataLabel: false
  361.       });
  362.     }
  363.     // if (this.data.currentTab === e.target.dataset.current) {
  364.     //   return false;
  365.     // } else {
  366.     //   console.log("点击切换", e.target.dataset.current)
  367.     //   that.setData({
  368.     //     currentTab: e.target.dataset.current
  369.     //   })
  370.     // }
  371.   },
  372.   /**
  373.    * 生命周期函数--监听页面显示
  374.    */
  375.   onShow: function() {
  376.     var windowWidth = '', 
  377.     windowHeight = '';    
  378.     try {
  379.       var res = wx.getSystemInfoSync();    
  380.       windowWidth = res.windowWidth / 750 * 690;   
  381.       windowHeight = res.windowWidth / 750 * 550    
  382.     } catch (e) {
  383.       console.error('getSystemInfoSync failed!');   
  384.     }
  386.     var that = this;
  387.     console.log("家长的日考勤", that.data.date.substring(0, 10));
  388.     let studentName = "无名氏"
  389.     var time = that.data.date.substring(0, 10);
  390.     // 家长的日考勤
  391.     wx.request({
  393.       method: 'GET',
  394.       header: {
  395.         'Authorization': 'Bearer' + wx.getStorageSync('token'),
  396.       },
  397.       success(res) {
  398.         console.log("家长的日考勤", res.data);
  399.         new wxCharts({
  400.           canvasId: 'ringCanvas',
  401.           type: 'ring',
  402.           legend: false,
  403.           extra: {
  404.             ringWidth: 15, //圆环的宽度
  405.             pie: {
  406.               offsetAngle: -45 //圆环的角度
  407.             }
  408.           },
  409.           // series: [{
  410.           //   data: res.data.data.normalNum,
  411.           // }, {
  412.           //   data: res.data.data.beLateNum,
  413.           // }, {
  414.           //   data: res.data.data.leaveNum,
  415.           // }, {
  416.           //   data: res.data.data.uncheckedNum,
  417.           // }],
  418.           series: [{
  419.             data: 10,
  420.           }, {
  421.             data: 50,
  422.           }, {
  423.             data: 30,
  424.           }, {
  425.             data: 40,
  426.           }],
  427.           width: 320,
  428.           height: 200,
  429.           // width: windowWidth,
  430.           // height: windowHeight,
  431.           dataLabel: false
  432.         });
  433.         that.setData({
  434.           datas: res.data.data,
  435.         })
  436.         wx.showToast({
  437.           title: '加载成功',
  438.           icon: 'loading',
  439.           duration: 500
  440.         })
  441.       }
  442.     })
  443.     // 家长的月考勤
  444.     console.log("家长的月考勤", that.data.date1.substring(0, 7));
  445.     var ytime = that.data.date1.substring(0, 7);
  446.     wx.request({
  448.       method: 'GET',
  449.       header: {
  450.         'Authorization': 'Bearer' + wx.getStorageSync('token')
  451.       },
  452.       success(res) {
  453.         console.log("家长的月考勤", res.data)
  454.         if (res.data.code == 1) {
  455.           that.setData({
  456.             attendDays: 0,
  457.             lateTimes: 0,
  458.             leaveEarlyTimes: 0,
  459.             unusualTimes: 0,
  460.           })
  461.         } else {
  462.           that.setData({
  463.             attendDays: res.data.data.attendDays,
  464.             lateTimes: res.data.data.lateTimes,
  465.             leaveEarlyTimes: res.data.data.leaveEarlyTimes,
  466.             unusualTimes: res.data.data.unusualTimes,
  467.           })
  468.         }
  469.       }
  470.     })
  471.     // 请求榜单
  472.     wx.request({
  474.       method: 'GET',
  475.       header: {
  476.         'Authorization': 'Bearer' + wx.getStorageSync("token"),
  477.       },
  478.       success: function(res) {
  479.         console.log("考勤首页榜单早到", res.data);
  480.         if (res.data.data != null) {
  481.           that.setData({
  482.             zao: res.data.data[0].studentName,
  483.           })
  484.         } else {
  485.           that.setData({
  486.             zao: studentName,
  487.           })
  488.         }
  489.       }
  490.     })
  491.     // 迟到
  492.     wx.request({
  494.       method: 'GET',
  495.       header: {
  496.         Authorization: 'Bearer' + wx.getStorageSync("token"),
  497.       },
  498.       success: function(res) {
  499.         console.log("考勤首页榜单迟到", res.data);
  500.         if (res.data.data != null) {
  501.           that.setData({
  502.             chi: res.data.data[0].studentName,
  503.           })
  504.         } else {
  505.           that.setData({
  506.             chi: studentName,
  507.           })
  508.         }
  509.       }
  510.     })
  511.     // 勤奋榜
  512.     wx.request({
  514.       method: 'GET',
  515.       header: {
  516.         Authorization: 'Bearer' + wx.getStorageSync("token"),
  517.       },
  518.       success: function(res) {
  519.         console.log("考勤首页榜单勤奋", res.data);
  520.         if (res.data.data != null) {
  521.           that.setData({
  522.             qifen: res.data.data[0].studentName,
  523.           })
  524.         } else {
  525.           that.setData({
  526.             qifen: studentName,
  527.           })
  528.         }
  529.       }
  530.     })
  531.   },
  532.   selected: function (e) {
  533.     this.setData({
  534.       selected1: false,
  535.       selected: true
  536.     })
  537.   },
  539.   selected1: function (e) {
  540.     this.setData({
  541.       selected: false,
  542.       selected1: true
  543.     })
  544.   },
  545.   /**
  546.    * 生命周期函数--监听页面隐藏
  547.    */
  548.   onHide: function() {
  550.   },
  551.   /**
  552.    * 生命周期函数--监听页面卸载
  553.    */
  554.   onUnload: function() {
  556.   },
  557.   /**
  558.    * 页面相关事件处理函数--监听用户下拉动作
  559.    */
  560.   onPullDownRefresh: function() {
  562.   },
  563.   /**
  564.    * 页面上拉触底事件的处理函数
  565.    */
  566.   onReachBottom: function() {
  568.   },
  569.   /**
  570.    * 用户点击右上角分享
  571.    */
  572.   onShareAppMessage: function() {
  574.   }
  575. })
  577. <!-- <view class="swiper-tab">
  578.   <view class="swiper-tab-list {
  579.    {currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">日统计</view>
  580.   <view class="swiper-tab-list {
  581.    {currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">月统计</view>
  582. </view> -->
  583. <view class="head">
  584.   <view class="head_item {
  585.    {selected?'head_itemActive':''}}" bindtap="selected">日考勤</view>
  586.   <view class="ring"></view>
  587.   <view class="head_item {
  588.    {selected1?'head_itemActive':''}}" bindtap='selected1'>月考勤</view>
  589. </view>
  590. <!-- 下方style="height:{
  591.    {winHeight - 31}}px" -->
  592. <!-- <swiper current="{
  593.    {currentTab}}" class="swiper-box" duration="300" style="height:500px" bindchange="bindChange"> -->
  594.   <!-- <swiper-item> -->
  595.   <view class="main {
  596.    {selected?'show':'hidden'}}">
  597.     <view class='hr'></view>
  598.     <view class='bgone'>
  599.       <view class='zz'>
  600.         <view class='time'>
  601.           <picker mode="date" value="{
  602.    {date}}" start="2018-01-01" end="2222-10-08" bindchange="changeDate">
  603.             <view>
  604.               {
  605.    {util.sub(date)}} ∨
  606.             </view>
  607.           </picker>
  608.         </view>
  609.         <radio-group class="radio-group" bindchange="radioChange">
  610.           <label class="radio" wx:for="{
  611.    {items}}">
  612.             <radio value="{
  613.    {item.name}}" checked="{
  614.    {item.checked}}" /> {
  615.    {item.value}}
  616.           </label>
  617.         </radio-group>
  618.         <view class='name'>{
  619.    {datas.studentName}}</view>
  620.         <view class='class'>{
  621.    {datas.gradeName}} {
  622.    {datas.className}}</view>
  623.       </view>
  625.       <view class='kuang'>
  626.         <view class='ming'>
  627.           <view class='aa'>{
  628.    {datas.ranking}}</view>
  629.           <view class='mm'>名</view>
  630.         </view>
  631.         <view class='ban'>班级早到榜</view>
  632.       </view>
  634.       <!-- hidden="{
  635.    {currentTab == 1}}" -->
  636.       <view>
  637.         <canvas class="canvas" canvas-id="ringCanvas" hidden="{
  638.    {currentTab == 1}}"></canvas>
  639.       </view>
  642.       <view class='itemyy'>
  643.         <view class='ra'>
  644.           <view class='shuzi'>{
  645.    {datas.normalNum}}</view>
  646.           <view class='zi'>准时</view>
  647.         </view>
  648.         <view class='ra'>
  649.           <view class='shuzi'>{
  650.    {datas.beLateNum}}</view>
  651.           <view class='zi'>迟到</view>
  652.         </view>
  653.         <view class='ra'>
  654.           <view class='shuzi'>{
  655.    {datas.leaveNum}}</view>
  656.           <view class='zi'>请假</view>
  657.         </view>
  658.       </view>
  659.     </view>
  660.     <view class='hr'></view>
  661.     <view class='bottom'>
  662.       <view class='jb'>
  663.         <image src='/images/List.png' style='width: 50rpx; height: 50rpx;'></image>
  664.       </view>
  665.       <view class='pic'>
  666.         <view class='r' bindtap='zaodao'>
  667.           <view class='bei'>
  668.             <view class='text'>{
  669.    {zao}}</view>
  670.           </view>
  671.           <view class='zi'>早到榜</view>
  672.         </view>
  673.         <view class='r' bindtap='chidao'>
  674.           <view class='bei'>
  675.             <view class='text'>{
  676.    {chi}}</view>
  677.           </view>
  678.           <view class='zi'>迟到榜</view>
  679.         </view>
  680.         <view class='r' bindtap='qifen'>
  681.           <view class='bei'>
  682.             <view class='text'>{
  683.    {qifen}}</view>
  684.           </view>
  685.           <view class='zi'>勤奋榜</view>
  686.         </view>
  687.       </view>
  688.     </view>
  689.   <!-- </swiper-item> -->
  690.   </view>
  691.   <!-- <swiper-item> -->
  692.   <view class="main {
  693.    {selected1?'show':'hidden'}}">
  694.     <view class='date'>
  695.       <picker mode="date" value="{
  696.    {date1}}" start="2018-01-01" end="2222-10-08" bindchange="changeDate1" fields="month">
  697.         <view>
  698.           ＜{
  699.    {util.sub1(date1)}}＞ 统计
  700.         </view>
  701.       </picker>
  702.     </view>
  703.     <!-- 次数 -->
  704.     <view class='bg'>
  705.       <view class="item">
  706.         <view class="title">出勤天数</view>
  707.         <view class="detail2">
  708.           <text>{
  709.    {attendDays}}天 ∨</text>
  710.         </view>
  711.       </view>
  712.     </view>
  713.     <view class='bg'>
  714.       <view class="iteming">
  715.         <view class="title">请假次数</view>
  716.         <view class="detail2">
  717.           <text>{
  718.    {lateTimes}}次 ∨</text>
  719.         </view>
  720.       </view>
  721.     </view>
  722.     <view class='bg'>
  723.       <view class="item">
  724.         <view class="title">迟到次数</view>
  725.         <view class="detail2">
  726.           <text>{
  727.    {leaveEarlyTimes}}次 ∨</text>
  728.         </view>
  729.       </view>
  730.     </view>
  731.     <view class='bg'>
  732.       <view class="iteming">
  733.         <view class="title">缺少打卡</view>
  734.         <view class="detail2">
  735.           <text>{
  736.    {unusualTimes}}次 ∨</text>
  737.         </view>
  738.       </view>
  739.     </view>
  740.   <!-- </swiper-item>
  741. </swiper> -->
  742. </view>
  743. <wxs module="util">
  744.   var sub = function(val) {
  745.     return val.substring(0, 10)
  746.   }
  747.   var sub1 = function(val) {
  748.     return val.substring(0, 7)
  749.   }
  750.   module.exports.sub1 = sub1;
  751.   module.exports.sub = sub;
  752. </wxs>

在这里插入图片描述
tab切换时，图表显示错乱

  1. <canvas class="kcanvas" canvas-id="ringCanvas" hidden="{
  2.    {currentTab == 1}}"></canvas>
  4. <view hidden="{
  5.    {currentTab !== 1}}" id="one" class="currentPage">
  6.  <view class="containerSales" wx: if="{
  7.    {currentTab === 1}}">
  8.  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{
  9.    {ecSales}}"></ec-canvas>
  10.  </view>
  11. </view>
  13. ring chart
  15. new wxCharts({
  16.  canvasId: 'ringCanvas',
  17.  type: 'ring',
  18.  series: [{
  19.   name: '成交量1',
  20.   data: 15,
  21.  }, {
  22.   name: '成交量2',
  23.   data: 35,
  24.  }, {
  25.   name: '成交量3',
  26.   data: 78,
  27.  }, {
  28.   name: '成交量4',
  29.   data: 63,
  30.  }],
  31.  width: 320,
  32.  height: 200,
  33.  dataLabel: false
  34. });

在这里插入图片描述

js当中使用require引入即可：

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

一般以iPhone6为标准进行设计

  1. /* 例如设计图尺寸为320 x 300 */
  2. .canvas {
  3.     width: 640px;
  4.     height: 600px;
  5.     transform: scale(0.5)
  6. }
  8. new Charts({
  9.       animation: true,
  10.       canvasId: 'canvas5',
  11.       type: 'ring',
  12.       extra: {
  13.         ringWidth: 10,//圆环的宽度
  14.         pie: {
  15.           offsetAngle: -45//圆环的角度
  16.         }
  17.       },
  18.       title: {
  19.         name: '70%',
  20.         color: '#7cb5ec',
  21.         fontSize: 25
  22.       },
  23.       subtitle: {
  24.         name: '收益率',
  25.         color: '#666666',
  26.         fontSize: 15
  27.       },
  28.       series: [{
  29.         name: '成交量1',
  30.         data: 15,
  31.         stroke: false
  32.       }, {
  33.         name: '成交量2',
  34.         data: 35,
  35.         stroke: false
  36.       }, {
  37.         name: '成交量3',
  38.         data: 78,
  39.         stroke: false
  40.       }, {
  41.         name: '成交量4',
  42.         data: 63,
  43.         stroke: false
  44.       }],
  45.       disablePieStroke: true,
  46.       width: 640,
  47.       height: 200,
  48.       dataLabel: true,
  49.       legend: false,
  50.       padding: 0
  51.     });

在这里插入图片描述

  1. /* 环形 */
  3. .canvas {
  4.   z-index: 1;
  5.   position: absolute;
  6.   left: 32px;
  7.   top: 60px;
  8.   height: 350rpx;
  9. }
  11. new wxCharts({
  12.           canvasId: 'ringCanvas',
  13.           type: 'ring',
  14.           legend: false,
  15.           extra: {
  16.             ringWidth: 15, //圆环的宽度
  17.             pie: {
  18.               offsetAngle: -45 //圆环的角度
  19.             }
  20.           },
  21.           series: [{
  22.             data: res.data.data.normalNum,
  23.           }, {
  24.             data: res.data.data.beLateNum,
  25.           }, {
  26.             data: res.data.data.leaveNum,
  27.           }, {
  28.             data: res.data.data.uncheckedNum,
  29.           }],
  30.           width: 320,
  31.           height: 200,
  32.           dataLabel: false
  33.         });
  35. switchNav: function(event) {
  36.     var cur = event.currentTarget.dataset.current;
  37.     if (this.data.currentTab == cur) { return false; }
  38.     else {
  39.       this.setData({
  40.         currentTab: cur
  41.       })
  42.     }
  44.     if(cur==1){
  45.       this.setData({
  46.         init_datas: nz_data,
  47.         currentTab1: 1
  48.       })
  49.       var tmp_datas = this.data.init_datas;
  50.       console.dir(tmp_datas);
  51.       this.setData({
  52.         nz_datas: tmp_datas,
  53.         class:1
  54.       })
  55.     }
  56.     if(cur==2){
  57.       this.setData({
  58.         init_datas1: man_data,
  59.         currentTab1: 1
  60.       })
  61.       var tmp_datas = this.data.init_datas1;
  62.       console.dir(tmp_datas);
  63.       this.setData({
  64.         nz_datas: tmp_datas,
  65.         class:2
  66.       })
  67.     }
  68.   },
  70.   switchNav1: function (event) {
  71.     var cur = event.currentTarget.dataset.curr;
  72.     console.log("switchNav1_curr="+cur);
  73.     console.log("class=" + this.data.class);
  74.     if (this.data.currentTab1 == cur) { return false; }
  75.     else {
  76.       this.setData({
  77.         currentTab1: cur
  78.       })
  79.     }
  81.     if(cur==1){
  82.       if(this.data.class==1){
  83.         var tmp_datas = this.data.init_datas;
  84.         this.setData({
  85.           nz_datas: tmp_datas
  86.         })
  87.       }
  88.       if (this.data.class == 2) {
  89.         var tmp_datas = this.data.init_datas1;
  90.         this.setData({
  91.           nz_datas: tmp_datas
  92.         })
  93.       }
  94.     }

实现滑动tab

  1. <view>
  2.   <view class="swiper-tab">
  3.     <view class="swiper-tab-list {
  4.    {tab==0 ? 'on' : ''}}" data-current="0" bindtap="tab_click">图文</view>
  5.     <view class="swiper-tab-list {
  6.    {tab==1 ? 'on' : ''}}" data-current="1" bindtap="tab_click">产品</view>
  7.   </view>
  8.   <swiper current="{
  9.    {tab}}" class="swiper-box" duration="300" style="height:{
  10.    {winHeight - 31}}px" bindchange="tab_slide">
  11.     <swiper-item>
  12.       图文
  13.     </swiper-item>
  15.     <swiper-item>
  16.       产品
  17.     </swiper-item>
  18.   </swiper>
  19. </view>
  21. Page({
  22.   data: {
  23.     tab: 0
  24.   },
  25.   tab_slide: function (e) {//滑动切换tab 
  26.     var that = this;
  27.     that.setData({ tab: e.detail.current });
  28.   },
  29.   tab_click: function (e) {//点击tab切换
  30.     var that = this;
  31.     if (that.data.tab === e.target.dataset.current) {
  32.       return false;
  33.     } else {
  34.       that.setData({
  35.         tab: e.target.dataset.current
  36.       })
  37.     }
  38.   },
  39. })

发表评论

表情：
评论列表 （有 0 条评论，399人围观）

还没有评论，来说两句吧...

相关阅读

    相关 tab切换延时问题。

        tab切换延时问题，困扰我一整天，一般tab切换效果鼠标快速划过后就会闪的特别厉害，我就想加个延时效果，于是用上了settimeout方法，结果发现又出现了另外一个问题

    心已赠人心已赠人/ 0 赞/ 271 阅读