新手进阶之开发解决问题过程--记一次微信小程序使用mpvue-echarts图表v-show切换导致其他图表渲染的问题

一 问题描述 

       在使用mpVue+vant-weapp写小程序时 ，使用mpvue-echarts图表v-show切换其他图表的时候，出现了一个奇怪的现象，就是切换后面的隐藏了的图表会渲染异常，如图所示：

 

 

        图表未切换的时候是正常的，如第一张所示，第二张是切换之后导致渲染的问题，故猜想出问题的地方是图表传染的组件出现了问题，带着这个疑问，我们到组件想让宽高的位置打印出图表渲染出的宽高。

二  mpvue-echarts代码

        在研究mpvue-echarts的代码时候，发现调用这个组件会自动的初始化方法，都会先调用 HandleInit 的方法来渲染初始化echerts图表，

<template>
  <div class="echarts-wrap" id="echarts-wrap">
    <mpvue-echarts :ref="refName" :echarts="echarts" :onInit="HandleInit" :canvasId="canvasId"/>
  </div>
</template>

<script>
  import echarts from '../../static/js/echarts.min'
  import mpvueEcharts from 'mpvue-echarts'

  let chart

  export default {
    props: {
      chartDataObj: {
        type: Array,
        default: function () {
          return []
        }
      },
      canvasId: {
        type: String,
        default: 'demo'
      },
      refName: {
        type: String,
        default: 'echarts'
      }
    },
    components: {
      mpvueEcharts
    },
    data () {
      return {
        echarts,
        option: null
      }
    },
    onLoad () {
    },
    mounted () {
      // 在模版加载完成之后，才能初始化图表。
      this.InitChart()
    },
    watch: {
      chartDataObj (val) {
        this.InitChart()
      }
    },
    methods: {
      InitChart () {
        this.option = {
          toolbox: {
            show: true,
            feature: {
              saveAsImage: {
                show: true,
                excludeComponents: ['toolbox'],
                pixelRatio: 2
              }
            }
          },
          color: ['#0DBBFF'],
          legend: {},
          tooltip: {},
          dataset: {
            dimensions: this.chartDataObj.forEach((val) => {
              const arr = []
              let keys = Object.keys(val)
              arr.push(keys)
              return arr
            }),
            source: this.chartDataObj
          },
          xAxis: {type: 'category'},
          yAxis: {},
          series: [{type: 'bar'}]
        }
        this.$refs.echarts.init()
      },
      HandleInit (canvas, width, height) {
        console.log('图表的宽度：' + width + ' 图表的高度：' + height)
        chart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        canvas.setChart(chart)
        chart.setOption(this.option, true)
        return chart
      }
    }
  }
</script>

<style>
  .echarts-wrap {
    width: 100%;
    height: 600rpx;
  }
</style>

三 验证猜想 

        接下来验证我的猜想是否正确，查看出控制台的数据如下：

四 分析 

        mpvue-echarts渲染的时候，是把页面上容器的高度和宽度带入了初始化的渲染方法中，使用了 v-show 的容器的宽高都导致隐藏的图表在显示的时候渲染异常， 故问题出现在了这里，被隐藏了的图表的宽高为0，渲染调用 HandleInit 方法时候的宽高为0导致的渲染异常。

五 解决问题

        既然问题出现在渲染 HandleInit 方法的宽高上面，那么在渲染的时候判断宽高为0的为页面上隐藏了的图表，加上判断赋值上宽高即可解决。

 

六 修改后的结果

 切换其他图表显示正常，即解决了我们的bug

 总结

我们在开发中遇到问题，要先学会定位问题出现在什么地方是关键，然后猜想问题出现的地方，经过修改验证找到出现的问题，最后解决问题，虽然有时候问题很简单，但是我们要学会这种思维方式，大问题一般都是由许多的小问题组成，与到bug不慌，冷静分析，找出和定位问题是关键。

 

---