最近在做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. Typescript All In One

    Typescript All In One TypeScript 3.5 is now available. https://www.typescriptlang.org/#download-link ...

  2. CSS Dark Mode

    CSS Dark Mode https://kevq.uk/automatic-dark-mode/ https://kevq.uk/how-to-add-css-dark-mode-to-a-web ...

  3. uniapp 扫二维码跳转

    在h5和wxapp中 生成qrcode的组件 https://ext.dcloud.net.cn/plugin?id=39 wx小程序扫二位码文档 生成链接时 computed: { ...mapSt ...

  4. flutter 自定义TabBar

    这里有个工作示例 import 'dart:async'; import 'package:flutter/material.dart'; import 'package:rxdart/subject ...

  5. app启动速度怎么提升?

    简介: APP 启动速度的重要性不言而喻.高德地图是一个有着上亿用户的超级 APP,本文从唤端技术.H5 启动页.下载速度.APP加载.线程调度和任务编排等方面,详解相关技术原理和实现方案,分享高德在 ...

  6. 在多线程编程中不要使用sleep()、usleep()函数

    这两个函数是非线程安全的,可能会造成程序卡死. 对于c++程序,建议使用std::this_thread::sleep_for()和std::this_thread::yield()代替. 纯c程序可 ...

  7. 深入浅出的JS执行机制(图文教程)

    前序 作为一个有理想有抱负的前端攻城狮,想要走向人生巅峰,我们必须将我们使用的功法练到天人合一的地步.我在们日常工作中,使用最多的语言就是JavaScript了,为了写出完美的.能装逼的代码,我们必须 ...

  8. Maven遇到的各种问题

    1.遇到报错-Dmaven.multiModuleProjectDirectory system propery is not set.Check $M2_HOME environment varia ...

  9. 正则表达式匹配${key}并在Java中使用

    1.正则表达式匹配${key} \$\{([a-z]+)\} 能够匹配字符串中以${key}形式的文本(其中key为小写应为字母) .*\$\{([a-z]+)\}.* 可以用来检测文本中是否有${k ...

  10. Android 7.0 TextView点击事件无效修复方案

    public class PostTextView extends TextView { private Handler handler = new Handler(Looper.getMainLoo ...