最近在做Beetlex的数据阐明平台，在开拓这个产物进程中涉及到大量的数据图表展示成果；由于产物前端利用的是vuejs开拓，所以在集成echarts或多或少会遇到一些问题，在这里主要讲授一下遇到的问题息争决要领。
在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举办初始化操纵。所以需要把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(); });
附：Echarts下载利用你可以通过以下几种方法获取 ECharts。
1，从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
2，在 ECharts 的 GitHub 获取。
3，通过 npm 获取 echarts，npm install echarts --save，
4，通过 jsDelivr 等 CDN 引入
呈现如下图则乐成。
引入
（下载完的前提）
1，通过标签方法直接引入构建好的 echarts 文件：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="https://www.jb51.net/echarts.min.js"></script> </head> </html>
2，全局引用
在vue的main.js中
// 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts
3，直接在组件内引入echarts,
(假如你想在其他组件内用echarts，则必需从头引入)
import echarts from “echarts”;
总结到此这篇关于vue.js集成echarts碰着问题的文章就先容到这了,更多相关vue.js集成echarts问题内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！
您大概感乐趣的文章: