vuejs集成echarts的一些问题
最近在做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的一些问题的更多相关文章
- vue-cli +echarts-amap集成echarts和高德地图TypeError: Cannot read property 'dataToPoint' of null解决方案
由于项目的需求,需要做一种迁徙效果, 最后我们采用了组件化开发,可以说这个坑自己一个人踩,有点累,但也收获不少. vue-cli +echarts-amap集成echarts和高德地图,出现报错,错误 ...
- 在OAF页面中集成ECharts以及highcharts用于显示图表
历史博文中有讲解在请求中输出基础图表的方式,见地址:EBS 请求输出Html报表集成Echarts 本文讲述在OAF中集成这两类图表. 集成的基本思路:在OAF页面中加入一个rawText组件,在ra ...
- 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 ...
- EBS 请求输出Html报表集成Echarts
百度开源的ECharts有样式丰富且美观的报表类型可供选用,可以将其集成至EBS请求输出的Html报表中,这其实就是一个生成Html数据的过程. 定义输出类型为HTML的请求我就不在此处赘述. 我 ...
- Simditor学习--vuejs集成simditor
唠叨 因为项目需要我自己研究了和集成在vue方便以后再使用,详情官方文档在这里.希望大家有好的建议提出让我继续改进. simditor介绍 Simditor 是团队协作工具 Tower 使用的富文本编 ...
- Springboot集成ECharts
ECharts 是中国的,也是世界的! ECharts官网: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前 绝大部分浏览器(IE8 ...
- VUE中集成echarts时 getAttribute of null错误
错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...
- VueJS 集成 medium editor 自定义编辑器按钮
详见我的新博客: 守望之吻
- Ionic2系列——在Ionic2中使用ECharts
在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...
随机推荐
- css & clip-path
css & clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path https://tongqu.me/ tw ...
- 算法型稳定币USDN有什么魔力引发市场热潮?
最近比特币重新突破了8万大关,区块链行业又再次火爆起来,吸引了圈内圈外人的火热讨论,而这其中市场投资者讨论最频繁的就要属算法型稳定币USDN了. USDN是基于NGK.IO区块链中的稳定币, 1枚US ...
- JDK源码阅读-ByteBuffer
本文转载自JDK源码阅读-ByteBuffer 导语 Buffer是Java NIO中对于缓冲区的封装.在Java BIO中,所有的读写API,都是直接使用byte数组作为缓冲区的,简单直接.但是在J ...
- 【Notes_4】现代图形学入门——光栅化、离散化三角形、深度测试与抗锯齿
光栅化 Viewport Transform(视口变换) 将经过MVP变换后得到的单位空间模型变换到屏幕上,屏幕左边是左下角为原点. 所以视口变换的矩阵 \[M_{viewport}=\begin{p ...
- postman工具的用法
1.postman发送json字符串的方法 1)设置header Content-Type application/json 2)指定发送类型和json数据
- Charles 抓取https 包
1. Recording Settings中 include 添加 host , port端口为443 2. SSL Proxying Settings 选中 Enable SSL Proxyin ...
- POJ-2516(最小费用最大流+MCMF算法)
Minimum Cost POJ-2516 题意就是有n个商家,有m个供货商,然后有k种商品,题目求的是满足商家的最小花费供货方式. 对于每个种类的商品k,建立一个超级源点和一个超级汇点.每个商家和源 ...
- Java程序员必备后台前端框架--Layui【从入门到实战】(一)
layui入门使用及图标的使用 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] [编程工具:IDEA] 下载Layui与文件分析 下载直接去官网下载即可 文件分析 下载完成后,解压会 ...
- Python爬虫学习一------HTTP的基本原理
昨天刚买的崔大大的<Python3网络爬虫开发实战>,今天就到了,开心的读完了爬虫基础这一章,现记录下自己的浅薄理解,如有见解不到位之处,望指出. 1.HTTP的基本原理 ①我们经常会在浏 ...
- FreeBSD jail 折腾记(一)
创建jail目录 mkdir -p /usr/jail/ 放入基本系统 方案一 make buildworld #编译基本系统 make installworld DESTDIR=/usr/jail/ ...