Vue.js整合echarts时常见问题有哪些总结？

本文共计932个文字，预计阅读时间需要4分钟。

前言：最近在开发Beetlex数据平台，涉及大量数据图表展示功能；

由于产品前端使用vuejs开发，集成了echarts，可能会遇到一些问题；

在此主要讨论以下方面：

前言

最近在做Beetlex的数据分析平台，在开发这个产品过程中涉及到大量的数据图表展示功能；由于产品前端使用的是vuejs开发，所以在集成echarts或多或少会碰到一些问题，在这里主要讲解一下碰到的问题和解决方法。

在讲解之前先分享一下实际使用效果。具体可以查看 data.beetlex.io

控件ID

在vuejs中往往会对常用的功能进行组件封装，同样为了让不同图表复用所以也封装成组件来使用。在这个封装过程存在一个问题就是图表元素DIV的ID问题，所以组件建构建图表DIV的ID也必须确保唯一性。可以通过封装一个简单的函数来生成ID

Vue.prototype.$getID = function () { page.controlid = page.controlid + 1; return page.controlid; };

通过这个方法来获取动态的元素ID

mounted(){ this.ChatID = "chat_" + this.$getID(); } <div :id="ChatID"> ​ </div>

初始化问题

在使用Vuejs时很多时候会在mounted()方法中进行一些实始化，但如果在这里实始化echarts就需要注意，毕竟mounted并不代表所有元素被构建，这时候会导致获取元素失败无法对echarts进行初始化操作。