最近在做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();
});
 

vuejs集成echarts的一些问题的更多相关文章

  1. vue-cli +echarts-amap集成echarts和高德地图TypeError: Cannot read property 'dataToPoint' of null解决方案

    由于项目的需求,需要做一种迁徙效果, 最后我们采用了组件化开发,可以说这个坑自己一个人踩,有点累,但也收获不少. vue-cli +echarts-amap集成echarts和高德地图,出现报错,错误 ...

  2. 在OAF页面中集成ECharts以及highcharts用于显示图表

    历史博文中有讲解在请求中输出基础图表的方式,见地址:EBS 请求输出Html报表集成Echarts 本文讲述在OAF中集成这两类图表. 集成的基本思路:在OAF页面中加入一个rawText组件,在ra ...

  3. ArcGIS JS API4 With VueJS集成开发

    1.USING VUEJS WITH ARCGIS API FOR JAVASCRIPT,集成VUE到ArcGIS JS开发中. 2.ARCGIS API 4 FOR JS WITH VUE-CLI ...

  4. EBS 请求输出Html报表集成Echarts

    百度开源的ECharts有样式丰富且美观的报表类型可供选用,可以将其集成至EBS请求输出的Html报表中,这其实就是一个生成Html数据的过程. 定义输出类型为HTML的请求我就不在此处赘述.   我 ...

  5. Simditor学习--vuejs集成simditor

    唠叨 因为项目需要我自己研究了和集成在vue方便以后再使用,详情官方文档在这里.希望大家有好的建议提出让我继续改进. simditor介绍 Simditor 是团队协作工具 Tower 使用的富文本编 ...

  6. Springboot集成ECharts

    ECharts 是中国的,也是世界的! ECharts官网: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前 绝大部分浏览器(IE8 ...

  7. VUE中集成echarts时 getAttribute of null错误

    错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...

  8. VueJS 集成 medium editor 自定义编辑器按钮

    详见我的新博客: 守望之吻

  9. Ionic2系列——在Ionic2中使用ECharts

    在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...

随机推荐

  1. js 截取固定长度字符串但不打断单词

    适用地方:英文网站中,比如面包屑导航处新闻标题过长.用css截取文本简介时将单词打断   // 使用方法 // 1.复制下面函数 // 2.调用 // 3.填参数  sliceString(targe ...

  2. Mybatis-03 配置解析

    Mybatis-03 配置解析 配置解析 1.核心配置文件 mybatis-config.xml: configuration(配置) properties(属性) settings(设置) type ...

  3. 算法型稳定币USDN是如何保持稳定的?

    数据显示,2019年稳定币市场总市值25亿美元,在整个加密货币市场占比 1.3%.可别小瞧了看似微小的1.3%这个数据,它其实是一个庞大的市场.稳定币不仅仅是货币的电子化,它还是一种可编程的加密货币, ...

  4. [转]关于特征点法、直接法、光流法slam的对比

    转载网址:https://blog.csdn.net/weixin_38203573/article/details/79787499 特征点法: 通过特征点匹配来跟踪点,计算几何关系得到R,t,BA ...

  5. oracle impdp ORA-02304 invalid object identifier literal

    reference: https://webgeest.blogspot.com/2015/07/ora-39083-ora-02304-on-impdp-datapump.html     解决方法 ...

  6. 翻译:《实用的Python编程》03_02_More_functions

    目录 | 上一节 (3.1 脚本) | 下一节 (3.3 错误检查) 3.2 深入函数 尽管函数在早先时候介绍了,但有关函数在更深层次上是如何工作的细节却很少提供.本节旨在填补这些空白,并讨论函数调用 ...

  7. 手把手教你SpringBoot2整合Redis

    此文仅为初学java的同学学习,大佬请勿喷,文末我会附上完整代码包供大家参考 redis的搭建教程此处略过,大家自行百度,本文的教程开始: 一.先在pom.xml中添加相关依赖 <!--redi ...

  8. (报错解决)Exception encountered during context initialization

    转: (报错解决)Exception encountered during context initialization 关键词 JavaEE JavaWeb eclipse XML AspectJ ...

  9. Java基础语法学习

    Java基础语法学习 1. 注释 单行注释: //单行注释 多行注释: /*多行注释 多行注释 多行注释 多行注释 */ 2. 关键字与标识符 关键字: Java所有的组成部分都需要名字.类名.变量名 ...

  10. WPF 应用 - 在 web 中启动 exe

    以下 F:/Debug/xx.exe 为客户端路径. 1. Web 调用 1.1 IE 内核的浏览器调用方式 js 函数调用如下: var a=new ActiveXObject("Wscr ...