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

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

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

我的js

<view class="head">
      <view class="head_item {
       {selected?'head_itemActive':''}}" bindtap="selected">日考勤</view>
      <view class="ring"></view>
      <view class="head_item {
       {selected1?'head_itemActive':''}}" bindtap='selected1'>月考勤</view>
    </view>
    
    
      
      <view class="main {
       {selected?'show':'hidden'}}">
        <view class='hr'></view>
        <view class='bgone'>
          <view class='zz'>
            <view class='time'>
              <picker mode="date" value="{
       {date}}" start="2018-01-01" end="2222-10-08" bindchange="changeDate">
                <view>
                  {
       {util.sub(date)}} ∨
                </view>
              </picker>
            </view>
            <radio-group class="radio-group" bindchange="radioChange">
              <label class="radio" wx:for="{
       {items}}">
                <radio value="{
       {item.name}}" checked="{
       {item.checked}}" /> {
       {item.value}}
              </label>
            </radio-group>
            <view class='name'>{
       {datas.studentName}}</view>
            <view class='class'>{
       {datas.gradeName}} {
       {datas.className}}</view>
          </view>
    
          <view class='kuang'>
            <view class='ming'>
              <view class='aa'>{
       {datas.ranking}}</view>
              <view class='mm'>名</view>
            </view>
            <view class='ban'>班级早到榜</view>
          </view>
    
          
          <view>
            <canvas class="canvas" canvas-id="ringCanvas" hidden="{
       {currentTab == 1}}"></canvas>
          </view>
    
    
          <view class='itemyy'>
            <view class='ra'>
              <view class='shuzi'>{
       {datas.normalNum}}</view>
              <view class='zi'>准时</view>
            </view>
            <view class='ra'>
              <view class='shuzi'>{
       {datas.beLateNum}}</view>
              <view class='zi'>迟到</view>
            </view>
            <view class='ra'>
              <view class='shuzi'>{
       {datas.leaveNum}}</view>
              <view class='zi'>请假</view>
            </view>
          </view>
        </view>
        <view class='hr'></view>
        <view class='bottom'>
          <view class='jb'>
            <image src='/images/List.png' style='width: 50rpx; height: 50rpx;'></image>
          </view>
          <view class='pic'>
            <view class='r' bindtap='zaodao'>
              <view class='bei'>
                <view class='text'>{
       {zao}}</view>
              </view>
              <view class='zi'>早到榜</view>
            </view>
            <view class='r' bindtap='chidao'>
              <view class='bei'>
                <view class='text'>{
       {chi}}</view>
              </view>
              <view class='zi'>迟到榜</view>
            </view>
            <view class='r' bindtap='qifen'>
              <view class='bei'>
                <view class='text'>{
       {qifen}}</view>
              </view>
              <view class='zi'>勤奋榜</view>
            </view>
          </view>
        </view>
      
      </view>
      
      <view class="main {
       {selected1?'show':'hidden'}}">
        <view class='date'>
          <picker mode="date" value="{
       {date1}}" start="2018-01-01" end="2222-10-08" bindchange="changeDate1" fields="month">
            <view>
              ＜{
       {util.sub1(date1)}}＞ 统计
            </view>
          </picker>
        </view>
        
        <view class='bg'>
          <view class="item">
            <view class="title">出勤天数</view>
            <view class="detail2">
              <text>{
       {attendDays}}天 ∨</text>
            </view>
          </view>
        </view>
        <view class='bg'>
          <view class="iteming">
            <view class="title">请假次数</view>
            <view class="detail2">
              <text>{
       {lateTimes}}次 ∨</text>
            </view>
          </view>
        </view>
        <view class='bg'>
          <view class="item">
            <view class="title">迟到次数</view>
            <view class="detail2">
              <text>{
       {leaveEarlyTimes}}次 ∨</text>
            </view>
          </view>
        </view>
        <view class='bg'>
          <view class="iteming">
            <view class="title">缺少打卡</view>
            <view class="detail2">
              <text>{
       {unusualTimes}}次 ∨</text>
            </view>
          </view>
        </view>
      
    </view>
    <wxs module="util">
      var sub = function(val) {
        return val.substring(0, 10)
      }
      var sub1 = function(val) {
        return val.substring(0, 7)
      }
      module.exports.sub1 = sub1;
      module.exports.sub = sub;
    </wxs>

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

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
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 1]

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
        });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 2]

/* 环形 */
    
    .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

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
          })
        }
      },
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]: /images/20210724/1a8f736479ce4a14babc5d2f71c254d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 1]: /images/20210724/4e06faced49b4dcfa103baeb9ab99748.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 2]: /images/20210724/d0309e1efb0d4e09b050989942c1c9d9.png