Swiper uses Echarts

Introduction: Large screen data visualization development, a module needs to use echarts pie chart in swiper, because it is the first time to use this collocation, so record the pit

Swiper property Settings do not take effect

Swiper should be instantiated after the DOM is mounted. The first initialization can be placed in a lifecycle hook mounted. Use nextTick wrap for asynchronous requests

Echarts are not shown in slide

There are two possible causes of this problem:

• Echarts is instantiated by id binding

  Swiper will copy the first slide to the end of the queue and the last slide to the front of the queue, creating a seamless rotation. If the slide has an ID, there will be two DOM elements with the same ID on the page, so it is recommended to use class to unbind the DOM

• The timing of echarts instantiation

  Initialize echarts with nextTick wrapped in swiper’s instantiation property init

There is a chart instance already initialized on the dom.

The reason for this problem is that we used Websocket in the page, and the data was changed after the background pushed data, and the echarts instantiation was redone. The source code of Echarts verifies the dom object passed in. If the echarts object is passed in, it will not go through the instantiation process again and a WARN will be thrown

We can take the DOM and use the getInstanceByDom method provided by Echarts to determine if the DOM is an Echarts DOM and init it or not

In swiper loop mode, Echarts will lose data from the first Slide replica

When swiper’s loop mode is enabled, echarts will be re-instantiated by pushing data from the background, and the first page of echarts will not be displayed. Here I used a temporary solution, calling swiper.destroy() after receiving swiper data from the background. Re-instantiate swiper and dispose of echarts dom when instantiating Echarts. Dispose () dispose of the echarts dom and re-instantiate echarts

The problem with this operation is that every time the background pushes data, swiper will jump to the first page and re-loop, but I haven’t come up with a better solution, so I’ll leave it at that.

Here is a demo, which can be taken directly to the vUE project reference test, using setInterval to simulate the Websocket push data

<template>
  <div id="swiper" class="swiper-container">
    <div id="wrapper" class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in arr" :key="item.id">
        <div :class="`class${item.id}`" style="width: 600px; height:400px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import * as echarts from 'echarts'
export default {
  name: 'TestCharts',
  data () {
    return {
      swiper: null.arr: [].id: 0}},watch: {
    arr: {
      handler (val) {
        if (val.length) {
          this.$nextTick(() = > {
            this.initSwiper()
          })
        }
      },
      deep: true.immediate: true
    }
  },
  created () {
    for (let index = 1; index <= 2; index++) {
      this.id = index
      this.arr.push({
        id: index
      })
    }
  },
  mounted () {
    const timerId = setInterval(() = > {
      if (this.id >= 6) clearInterval(timerId)
      this.id++
      this.arr = []
      this.swiper.destroy(true.true)
      for (let index = 1; index <= this.id; index++) {
        this.arr.push({
          id: index
        })
      }
    }, 30000)},methods: {
    initSwiper () {
      const self = this
      this.swiper = new Swiper('#swiper', {
        autoplay: true.loop: true.on: {
          init: function () {
            self.$nextTick(() = > {
              for (let index = 1; index <= self.id; index++) {
                self.initChart(index)
              }
            })
          }
        }
      })
    },
    initChart (index) {
      // Specify the chart configuration items and data
      const option = {
        title: {
          text: 'Getting started with ECharts' + index
        },
        tooltip: {},
        legend: {
          data: ['sales']},xAxis: {
          data: ['shirt'.'Cardigan'.'Chiffon shirt'.'pants'.'High heels'.'socks']},yAxis: {},
        series: [{name: 'sales'.type: 'bar'.data: [5.20.36.10.10.20].map(item= > item * index)
          }
        ]
      }
      // Display the chart using the configuration items and data you just specified.
      const divs = document.getElementsByClassName(`class${index}`)
      divs.forEach(div= > {
        const myChart = echarts.getInstanceByDom(div)
        if (myChart) myChart.dispose()
        echarts.init(div).setOption(option)
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.swiper-slide {
  width: 600;
  height: 400px;
  background: skyblue;
}
</style>
Copy the code