vue中,swiper(vue-awesome-swiper)与echarts结合使用,echarts有些图不显示问题

vue中,swiper(vue-awesome-swiper)与echarts结合使用,echarts有些图不显示问题

echarts绘制的图不显示是因为,swiper的loop设置为true了。因为swiper的loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。所以复制出来的slide导致原本设置的echarts的id不在是唯一的,echarts绘制的图也就显示不出来了。

解决方案:

let myEchart = document.getElementsByClassName('myEchart');
myEchart.map((item, index) => {
	let chart = echarts.init(myEchart[index]);
	chart.setOption(option);
})

如果你的echarts图是写在组件里的那么你可以这样做:

html部分:

<swiper :options="swiperOption">
  <swiper-slide v-for="(item, index) in dataList" :key="index">
      <meterChart :divId="'meterChart' + index" :ref="'meterChart' + index" :data="item.value"></meterChart>
  </swiper-slide>
</swiper>

js部分:


  watch: {
    /*
      这么做是因为,swiper结合echarts使用时,echarts有的图片不显示。
      echarts图不显示的原因是,swiper的loop设为了true。
      swiper的loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,
      让Swiper看起来是循环的。
      复制导致echarts的ID不再是唯一的了,
      正是因为这个原因echarts图才不显示的。
    */
    dataList(val) {
      this.$nextTick(() => {
        let meterChart = document.getElementsByClassName('meterChart');

        /*
          num为中间值,用于判断哪些echarts图是复制的。
          对于复制来的echarts,使用其所复制的那个echarts来执行其setOption方法。
          对于非复制的echarts,直接用其自身来调用setOption方法。
          因为echarts图我是写在组件(meterChart组件)里的,所以执行setOption方法时传入的option,
          其实也是写在组件(meterChart组件)里的,
          所以要使用$refs来调用子组件(meterChart组件)内部的option方法。
        */
        let num = meterChart.length / 2;
        meterChart.forEach((item, index) => {
          // 复制得来的echarts
          if (index > num) {
            /*
              使用其所复制的那个echarts来执行其setOption方法。
            */
            let dom = this.$refs[`meterChart${index - num}`];
            var myChart = echarts.init(meterChart[index]);
            myChart.setOption(dom[0].option());
          }
          // 非复制的echarts
          else {
            let dom = this.$refs[`meterChart${index}`];
            var myChart = echarts.init(meterChart[index]);
            myChart.setOption(dom[0].option());
          }
        })
      });
    }
  }
上一篇:用swiper实现不规则分页滚动


下一篇:uniapp 滑动切换