echarts数据量不大，但会有卡顿，随后直接展示

今天写echarts页面发现，windows系统下图数据量只有两百多都会显示卡顿，而查看echarts官方实例，数据量四千多都正常渲染，就很郁闷

经排查，竟然是因为页面里同时渲染了图表和表格，而表格数据和echarts数据是放在接口返回结果里一起整理的，这就造成了图还没有渲染完成，就在等待表格数据渲染，因此会出现页面中看到的卡顿，然后再一次加载完成现象

解决方法

将图表数据和表格数据分开整理，谁先渲染谁先配置数据，比如我先渲染图表，我就在图标渲染完成后，在调用表格配置的函数

判断图表是否渲染完成

mounted() {
  chart.on('finished', () => {
        this.setTableData()
      })
},
methods: {
	setTableData(){...}
}

其它一些造成卡顿的优化建议

1. chart不要放在data里定义，会被vue监测数据改变而更新，造成卡顿
2. 页面销毁时beforeDestroy，清空chart，可使用chart.clear()（相当于v-show）或chart.dispose()（相当于v-if）