<template>
  <div id="divParent">
    <span v-text="clock"></span>
    <a-button type="primary" @click="destroy">
      销毁定时任务
    </a-button>
  </div>
</template>

<script>
import { create } from './init-charts'
export default {
  data () {
    return {
      templeOption: {},
      templeOption2: {},
      clock: '',
      chart: null,
      chart2: null,
      index: 0,
      index2: 0,
      timer: null,
      timer2: null
    }
  },
  components: {
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      for (let index = 0; index < 3; index++) {
        create(this, index)
      }
    },
    destroy () {

    }
  }
}
</script>

<style>

</style>

init-charts.js

export function changeChart (_thisChart, option, fun) {
  return setInterval(fun, 1000)
}

export function geData (data) {
  data[0] += 100
  if (data[0] > 2000) {
    data[0] = 20
  }
  return data
}

export function create (_this, index) {
  const div = document.createElement('div')
  div.id = 'div' + index
  div.style.height = '300px'
  document.getElementById('divParent').append(div)
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [150 + index * 1000, 230, 224, 218, 135 + index * 100, 147, 260],
      type: 'bar'
    }]
  }
  // this.index = 3
  const chart = _this.$echarts.init(div)
  chart.setOption(option, true)
  chart.resize()
  // var i = 0
  changeChart(chart, option, function (params) {
    // if (i <= 2027) {
    //   i += 100
    // } else {
    //   i = 200
    // }
    option.series[0].data = geData(option.series[0].data)
    // _that.$set(_that.templeOption.series[0], 'data', [2021, 2021 - i, 2021, 2021, i, 2021, 2021])
    // this.$nextTick(() => {
    console.info(option.series[0].data)
    chart.setOption(option, true)
    // })
  })
}

在这里插入图片描述