Vue轮播swiper插件滑动导致echarts消失

代码:

import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};
option && myChart.setOption(option);

 

原因:

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

也就是说是id或者说$ref复制重复导致

 

解决办法:

1.修改为class获取(*只适用于swiper中只使用一次该组件 因为是class循环 所以会导致都echarts的值都变成最后一个 如有更好的办法欢迎留言讨论*)

import * as echarts from "echarts";

//var chartDom = document.getElementById('main');
var chartDom = document.getElementsByClassName("main");

for (let index = 0; index < chartDom.length; index++) {
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };

  option && myChart.setOption(option);
}

2. 使用ref获取

import * as echarts from "echarts";

//var chartDom = document.getElementById('main');
var chartDom = this.$refs.main;
var myChart = null;
var option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };
// 不是数组说明只有一个  并不在swiper插件中
if(!Array.isArray(chartDom)){
  myChart = echarts.init(chartDom);
}else{
  // 在swiper插件中 方法与class获取 一直 需要循环
  for (let index = 0; index < chartDom.length; index++) {
    myChart = echarts.init(chartDom);
  }
}
option && myChart.setOption(option);