Vue使用echarts实时图表时卡顿

在我使用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(