本文共 1717 字，大约阅读时间需要 5 分钟。
最近在做Beetlex的数据分析平台，在开发这个产品过程中涉及到大量的数据图表展示功能；由于产品前端使用的是vuejs开发，所以在集成echarts或多或少会碰到一些问题，在这里主要讲解一下碰到的问题和解决方法。
在讲解之前先分享一下实际使用效果。具体可以查看
控件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();}
初始化问题
在使用Vuejs时很多时候会在mounted()方法中进行一些实始化，但如果在这里实始化echarts就需要注意，毕竟mounted并不代表所有元素被构建，这时候会导致获取元素失败无法对echarts进行初始化操作。所以需要把echarts放到一个方法中根据情况手动调用进行，或者延时一下调用初始化；为了方便选择使用了setTimeout来初始化。
setTimeout(() => { var dom = document.getElementById(this.ChatID); this.Chat = echarts.init(dom, 'macarons'); this.Chat.setOption(this.ChatOption, true); }, 300); 显示切换问题
如果需要对图表进行一个显示切换，最好不要用v-if这样的语法，因为这样的语法是不会在DOM中构建相关元素，引起echarts创建Canvas元素问题导致无法正常工作。最好的办法是通过切换Css的方式来进行显示切换，确保已构建的DOM元素内容没有被更改。
自适应布局
很多时候窗体的大变化和组件切换后会导致echarts无法适应当前布局，碰到这情况需要手动调用echarts的resize方法来进行重置显示布局。实际上在SPA应用中情况复杂很多，全屏显示，窗体要换，再加组件化后多层次嵌套，所以难以确定echarts使用在什么地方。为了满足不同情况的需求，需要一个公共的行为来触发这些变更。
var __resizeHandlers = [];function __addResizeHandler(handler) { __resizeHandlers.push(handler);};function __resize() { setTimeout(() => { __resizeHandlers.forEach(v => { v(); }); }, 100);}window.onresize = function () { __resizeHandlers.forEach(v => { v(); });};Vue.prototype.$addResize = function (handler) { __addResizeHandler(handler);};Vue.prototype.$resize = function () { __resize();}; 实现一个简单的resize注册和调用机制即可，在使用echarts的组件定义以下代码完美解决
this.$addResize(r => { if (this.Chat) this.Chat.resize();}); 转载地址：http://nwxfz.baihongyu.com/