Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

vuejs集成echarts的一些问题

smark 2021-04-13 10:32:17 阅读数:78 评论数:0 点赞数:0 收藏数:0

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

        在讲解之前先分享一下实际使用效果。具体可以查看 http://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进行初始化操作。所以需要把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();
});
 
版权声明
本文为[beetlex]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/smark/p/14651892.html

支付宝红包,每日可领(支付宝免费1-2元支付红包)