vue里使用echarts,前端echarts如何在vue中使用
本文主要给大家总结一下vue.js与echarts整合时遇到的一些问题。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。和有需要的朋友一起学习吧。
前言
最近做了Beetlex的数据分析平台，在这个产品的开发中涉及了大量的数据图展示功能。因为产品前端是vuejs开发的，所以在echarts的集成上会有一些问题。在这里，我们将主要说明存在的问题和解决方法。
解释之前，先分享一下实际效果。详见http://data.beetlex.io。
控件ID
在vuejs中，常用的函数往往被组件打包，为了重用不同的图表，也打包成组件使用。这个封装过程中有一个问题，就是图表元素DIV的ID。因此，组件构建图DIV的ID也必须唯一。您可以通过封装一个简单的函数来生成一个ID。
vue . prototype . $ getID=function(){
page . controlid=page . controlid 1；
返回page.controlid
};
此方法用于获取动态元素ID。
已安装(){
这个。ChatID=chat_ 这个。$ getID()；
}
div :id=ChatID
/div
初始化问题
使用Vuejs时，一些实例化往往是在mounted()方法中完成的，但如果在这里实例化echarts，就需要注意了。毕竟挂载了不代表所有元素都造好了，会导致获取元素失败。您不能初始化电子图表。所以需要将echarts放入一个方法中，根据情况手动调用，或者延迟调用初始化；为了方便起见，SetTimeout用于初始化。
setTimeout(()={
var DOM=document . getelementbyid(this。ChatID)；
这个。Chat=echarts.init(dom，马卡龙)；
这个。Chat.setOption(这个。ChatOption，true)；
}, 300);
显示切换问题
如果需要切换图表的显示，最好不要使用v-if这样的语法，因为这样的语法不会在DOM中构建相关元素，会造成在echarts中创建Canvas元素的问题，导致无法正常工作。最好的方法是通过切换Css来切换显示，以确保构建的DOM元素的内容没有被更改。
自适应布局
在许多情况下，形式的变化和组件的切换会导致echarts无法适应当前的布局。在这种情况下，您需要手动调用echarts的resize方法来重置显示布局。实际上SPA应用中的情况要复杂得多，全屏显示，形式多变，组件化后多级嵌套，很难确定echarts用在哪里。为了满足不同情况的需要，需要一种公共行为来触发这些变化。
var _ _ resize handlers=[]；
函数__addResizeHandler(处理程序){
_ _ resize handlers . push(handler)；
};
function __resize() {
setTimeout(()={
__resizeHandlers.forEach(v={
v()；
});
}, 100);
}
window.onresize=function () {
__resizeHandlers.forEach(v={
v()；
});
};
vue . prototype . $ add resize=function(handler){
__addResizeHandler(处理程序)；
};
vue . prototype . $ resize=function(){
_ _ resize()；
};
只需实现一个简单的resize注册和调用机制，使用echarts的组件定义以下代码就可以完美解决。
这个。$addResize(r={
如果(这个。聊天)
这个。chat . resize()；
});
附：Echarts下载使用
您可以通过以下方式获得ECharts。
1.从Apache ECharts(孵化)官网下载界面获取官方源码包，进行构建。
2.在ECharts的GitHub得到它。
3.通过npm获取echarts，npm安装echarts - save，
4、通过jsDelivr等CDN引入
下图是成功的。
引入
(下载后的前提)
1.通过标签直接引入构建的echarts文件：
！声明文档类型
超文本标记语言
头
meta charset=utf-8
！-介绍ECharts文件-
script src= e charts . min . js /script
/头
/html
2.全球参考
在vue的main.js中
//介绍电子海图
从“电子海图”导入电子海图
Vue.prototype.$echarts=echarts
3.电子零件被直接引入到组件中，
(如果您想在其他组件中使用echarts，您必须重新引入它们)
从“echarts”导入e charts；
总结
关于vue.js集成echarts遇到的问题这篇文章就到这里了。更多关于vue.js集成echarts的问题，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。