vue中，swiper（vue-awesome-swiper）与echarts结合使用，echarts有些图不显示问题_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);
})
1
2
3
4
5

如果你的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>
1
2
3
4
5

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());
          }
        })
      });
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43