Vue使用echarts实时图表时卡顿

最新推荐文章于 2025-08-12 16:00:16 发布

原创最新推荐文章于 2025-08-12 16:00:16 发布 · 9.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #echarts

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

Vue.js

4 篇文章

订阅专栏

本文探讨了在Vue项目中使用Echarts实现实时曲线图时遇到的卡顿问题。问题根源在于每次数据更新触发Vue的Vnode更新，而非Echarts自身生命周期。通过在mounted生命周期钩子中调用更新函数，可以避免卡顿，实现流畅的实时图表展示。参考官方示例代码可有效解决此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我使用vue来放入echarts的实时曲线图时，会每次更新数据时，会非常卡顿，而相较于官网的示例来说，却很流畅。

先上代码。这是官网的实例 https://www.echartsjs.com/examples/editor.html?c=dynamic-data2

<template>
   <div id="line1" style="width:100%;height:30rem;"></div>
</template>

<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
export default {
  data () {
    return {
      data: [],
      now: +new Date(1997, 9, 3),
      oneDay: 24 * 3600 * 1000,
      value: Math.random() * 1000
    }
  },
  mounted () {
    this.myChart = echarts.init(document.getElementById('line1'), 'light')
    this.initData()
    window.setInterval(() => {
      for (var i = 0; i < 5; i++) {
        this.data.shift()
        this.data.push(this.randomData())
        this.myChart.setOption({
          series: [{
            data: this.data
          }]
        })
      }
    }, 1000)
  },
  methods: {
    randomData () {
      this.now = new Date(+this.now + this.oneDay)
      this.value = this.value + Math.random() * 21 - 10
      return {
        name: this.now.toString(),
        value: [
          [this.now.getFullYear(), this.now.getMonth() + 1, this.now.getDate()].join('/'),
          Math.round(this.value)
        ]
      }
    },
    initData () {
      for (var i = 0; i < 1000; i++) {
        this.data.push(this.randomData())
      }
      var option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            params = params[0]
            var date = new Date(params.name)
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]
          },
          axisPointer: {
            animation: false
          }
        },
        xAxis: [
          {
            type: 'time',
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: this.data
          }
        ]
      }
      this.myChart.setOption(option)
    }
  }
}
</script>

应该是canvas触发了vue的更新，而每一次的更新，都会触发Vnode的更新。

而最后echarts不走vue的生命周期，就不会出现卡顿的现象。

所以直接复制示例代码，然后在mouted中调用函数就不会出现卡顿现象。

<template>
   <div id="line1" style="width:100%;height:30rem;"></div>
</template>

<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
export default {
  mounted () {
    this.initLine()
  },
  methods: {
    initLine () {
      // 示例源码 直接复制粘贴再进行改动
  }
}
</script>