定时刷新echarts vue

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了定时刷新echarts vue，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1569字，纯文字阅读大概需要3分钟。

内容图文

<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)
    // })
  })
}

在这里插入图片描述

内容总结

以上是互联网集市为您收集整理的定时刷新echarts vue全部内容，希望文章能够帮你解决定时刷新echarts vue所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---