ECharts多个数据视图进行自适应大小的解决方案

项目场景:

在制作数据视图时经常会遇到多个数据视图的情况,在多个数据视图的情况下做自适应是比较麻烦的,这里就详细的分析一下该如何去制作,分享一下我的解决办法及思路。


定义 DOM 容器

这里需要注意一个地方,在定义高宽的 DOM 容器时,不能把宽度定为固定大小,或者父级也不能为固定大小,如果是固定的宽度哪怕重绘了,宽度也是一样的,所以是无法实现自适应的,一般情况下都是固定高度,然后宽度自适应

例:

<div ref="linechart" style="width:100%;height:400px;"></div>

想要实现数据视图的自适应就得先保证它的DOM容器是自适应的。

单个数据视图进行自适应

单个数据视图的解决方案就比较多了,也比较简单,就不过多的说明了

1. 使用window.onresize

let myChart = echarts.init(document.getElementById(dom))
window.onresize = function () {myChat.resize()
}

这个是通过ECharts自带的方法
myChart是你自己初始化一个 echarts,在myChart中有一个方法resize,调用这个方法可以实现重绘,实现自适应

这里拓展一下,myChat.resize()是可以自定义大小的:

myChart.resize({width: 800,height: 400
});

具体使用方法就看需求了。

这里还需要注意一个地方,就是这个方法也是可以实现多个数据视图自适应,但是比较笨一点

let myChart1 = echarts.init(document.getElementById(dom1))
let myChart2 = echarts.init(document.getElementById(dom2))
window.onresize = function () {myChat1.resize()myChat2.resize()
}

2.使用window.addEventListener添加resize方法

let myChart = echarts.init(document.getElementById(dom))
let sizeFun = function () {myChat.resize()
}
window.addEventListener('resize', sizeFun )

这个方法我也使用过,最大的问题就是当离开这个页面的时候这个函数依旧会去执行,当其他页面不存在这个DOM时则会报错,并且触发的非常频繁还需要写防抖节流器,所以不推荐使用,这里就不过多说明了。

多个数据视图进行自适应

这里分享一下我的思路:

1.通过父子传值

我是先用一个父组件,然后将这些视图分成一个个的子组件,在父组件监听浏览器的事件,当窗口大小改变之后把一个定义好的值(我这里用的是resize:true)传给子组件,子组件接收到时候在执行重绘。
具体代码就不展示了,因为就是一个父子传值的问题也比较简单,主要是分享一下解决方案

2.通过封装

这个是我目前使用的方法,但是这个方法存在一定的局限性,就是先要确定需求,保证使用的数据视图是差不多的,比如都使用到折线图,柱状图,这种相似的数据视图
在这里插入图片描述
我这里全部使用的就是折线面积图,当点击某个端点时则切换显示该字段的明细。

在这里插入图片描述

还有可以切换柱状图

在这里插入图片描述
数据视图

在这里插入图片描述
这里说一下为什么这样做:

  1. 使用过ECache都知道,这个组件的代码量比较大,尤其是在多个数据视图的情况下,代码冗余量非常多。
  2. 因为我封装好了,需要修改时只需要修改封装的组件,降低维护成本
  3. 后续在需要制作时直接调用即可

具体如何封装我会在后续发布
通过封装我们就可以非常简单的解决这个自适应的问题了。

      option = option1;option && myChart.setOption(option);//根据窗口的大小变动图表 --- 重点let listener = function(){myChart.resize()}EleResize.on(chartDom,listener)

EleResize

这个JS是我在网上找到的一个ECharts图表自适应的JS

// ECharts图表自适应JS
var EleResize = {_handleResize: function (e) {var ele = e.target || e.srcElementvar trigger = ele.__resizeTrigger__if (trigger) {var handlers = trigger.__z_resizeListenersif (handlers) {var size = handlers.lengthfor (var i = 0; i < size; i++) {var h = handlers[i]var handler = h.handlervar context = h.contexthandler.apply(context, [e])}}}},_removeHandler: function (ele, handler, context) {var handlers = ele.__z_resizeListenersif (handlers) {var size = handlers.lengthfor (var i = 0; i < size; i++) {var h = handlers[i]if (h.handler === handler && h.context === context) {handlers.splice(i, 1)return}}}},_createResizeTrigger: function (ele) {var obj = document.createElement('object')obj.setAttribute('style','display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')obj.onload = EleResize._handleObjectLoadobj.type = 'text/html'ele.appendChild(obj)obj.data = 'about:blank'return obj},_handleObjectLoad: function () {this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)}
}
if (document.attachEvent) { // ie9-10EleResize.on = function (ele, handler, context) {var handlers = ele.__z_resizeListenersif (!handlers) {handlers = []ele.__z_resizeListeners = handlersele.__resizeTrigger__ = eleele.attachEvent('onresize', EleResize._handleResize)}handlers.push({handler: handler,context: context})}EleResize.off = function (ele, handler, context) {var handlers = ele.__z_resizeListenersif (handlers) {EleResize._removeHandler(ele, handler, context)if (handlers.length === 0) {ele.detachEvent('onresize', EleResize._handleResize)delete ele.__z_resizeListeners}}}
} else {EleResize.on = function (ele, handler, context) {var handlers = ele.__z_resizeListenersif (!handlers) {handlers = []ele.__z_resizeListeners = handlersif (getComputedStyle(ele, null).position === 'static') {ele.style.position = 'relative'}var obj = EleResize._createResizeTrigger(ele)ele.__resizeTrigger__ = objobj.__resizeElement__ = ele}handlers.push({handler: handler,context: context})}EleResize.off = function (ele, handler, context) {var handlers = ele.__z_resizeListenersif (handlers) {EleResize._removeHandler(ele, handler, context)if (handlers.length === 0) {var trigger = ele.__resizeTrigger__if (trigger) {trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)ele.removeChild(trigger)delete ele.__resizeTrigger__}delete ele.__z_resizeListeners}}}
}
export {EleResize} 

将这个JS导入到页面中就可以直接使用了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/91833.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

idea Springboot 校园助学贷款系统VS开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot 校园助学贷款系统是一套完善的信息系统&#xff0c;结合springboot框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统 具有完整的源代码和数据库&…

2023.09.30使用golang1.18编译Hel10-Web/Databasetools的windows版

#Go 1.21新增的 log/slog 完美解决了以上问题&#xff0c;并且带来了很多其他很实用的特性。 本次编译不使用log/slog 包 su - echo $GOPATH ;echo $GOROOT; cd /tmp; busybox wget --no-check-certificate https://go.dev/dl/go1.18.linux-amd64.tar.gz;\ which tar&&am…

C++核心编程--继承篇

4.6、继承 继承是面向对象三大特征之一 有些类与类之间存在特殊的关系&#xff0c;例如下图中&#xff1a; ​ 我们发现&#xff0c;定义这些类的定义时&#xff0c;都拥有上一级的一些共性&#xff0c;还有一些自己的特性。那么我们遇到重复的东西时&#xff0c;就可以考虑使…

用go实现http服务端和请求端

一、概述 本文旨在学习记录下如何用go实现建立一个http服务器&#xff0c;同时构造一个专用格式的http客户端。 二、代码实现 2.1 构造http服务端 1、http服务处理流程 基于HTTP构建的服务标准模型包括两个端&#xff0c;客户端(Client)和服务端(Server)。HTTP 请求从客户端…

泰国数字加密平台Bitkub创始人到访上海和数集团

2023年9月21日&#xff0c;泰国数字加密货币交易平台Bitkub创始人兼首席执行官&#xff08;CEO&#xff09;Jirayut Srupsrisopa (Topp)先生到访上海和数集团总部。董事长唐毅先生热情会见了来宾&#xff0c;双方进行了友好深入的交流。 和数集团国际部经理晋松&#xff1b;苏州…

BUUCTF reverse wp 76 - 80

[CISCN2018]2ex 四处游走寻找关键代码 int __fastcall sub_400430(int a1, unsigned int a2, int a3) {unsigned int v3; // $v0int v4; // $v0int v5; // $v0int v6; // $v0unsigned int i; // [sp8h] [8h]unsigned int v9; // [sp8h] [8h]int v10; // [spCh] [Ch]v10 0;for…

在 Python 中列出虚拟环境

文章目录 在Python中列出虚拟环境使用lsvirtualenv命令使用Conda命令使用workon命令 总结 虚拟环境是一个独立的环境&#xff0c;我们可以在其中安装库、包、脚本和Python解释器。如果你的项目需要不同版本的库或Python解释器&#xff0c;你可以为每个项目创建单独的虚拟环境。…

2.索引操作

1. 创建索引 创建索引就等于创建数据库&#xff0c;ES使用put操作创建索引&#xff0c;我们创建一个students的索引&#xff0c;只需要发生put请求&#xff1a;http://127.0.0.1:9200/students 2. 查看索引 2.1 查看所有索引&#xff1a; 使用http://127.0.0.1:9200/_cat/ind…

Firefox 开发团队对 Vue 3 进行优化效果显著

Mozilla 官方博客近日发表文章《Faster Vue.js Execution in Firefox》&#xff0c;介绍了 Firefox 开发团队对 Vue 3 进行的优化。 文章写道&#xff0c;在使用 Speedometer 3 对 Firefox 进行基准测试时&#xff0c;他们发现 Vue.js test 的测试结果从 Vue 2 升级到 Vue 3 后…

ElasticSearch 同步数据变少了

一、前言 这几天对接ES遇到几个坑&#xff0c;我们将一张库存表同步到ES发现Docs Count和我们表中的数据对不上&#xff0c;需要加上Docs deleted才对得上&#xff0c;也不知道批量写入数据为什么有些数据就会成 Docs deleted。 二、ID和版本号 ES中每一个Document都有一个_…

大规模语言模型--中文 LLaMA和Alpaca

中文LLaMA 尽管 LLaMA 和 Alpaca 在 NLP 领域取得了重大进展&#xff0c; 它们在处理中文语言任务时&#xff0c; 仍存在一些局限性。这 些原始模型在字典中仅包含数百个中文 tokens (可以理解为单词)&#xff0c;导致编码和解码中文文本的效率受到了很大 影响。 之前已经对…

数据结构--队列

一、队列是什么 队列是一种特殊的线性表&#xff0c;特殊之处在于它只允许在表的前端&#xff08;front&#xff09;进行删除操作&#xff0c;而在表的后端&#xff08;rear&#xff09;进行插入操作&#xff0c;队列是一种操作受限制的线性表。进行插入操作的端称为队尾&…

GEO生信数据挖掘(一)数据集下载和初步观察

检索到目标数据集后&#xff0c;开始数据挖掘&#xff0c;本文以阿尔兹海默症数据集GSE1297为例 目录 GEOquery 简介 安装并加载GEOquery包 getGEO函数获取数据&#xff08;联网下载&#xff09; 更换下载数据源 对数据集进行初步观察处理 GEOquery 简介 GEOquery是一个…

第1篇 目标检测概述 —(4)目标检测评价指标

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。目标检测评价指标是用来衡量目标检测算法性能的指标&#xff0c;可以分为两类&#xff0c;包括框级别评价指标和像素级别评价指标。本节课就给大家重点介绍下目标检测中的相关评价指标及其含义&#xff0c;希望大家学习之后…

【中秋国庆不断更】HarmonyOS对通知类消息的管理与发布通知(上)

一、通知概述 通知简介 应用可以通过通知接口发送通知消息&#xff0c;终端用户可以通过通知栏查看通知内容&#xff0c;也可以点击通知来打开应用。 通知常见的使用场景&#xff1a; 显示接收到的短消息、即时消息等。显示应用的推送消息&#xff0c;如广告、版本更新等。显示…

【中秋国庆不断更】OpenHarmony多态样式stateStyles使用场景

Styles和Extend仅仅应用于静态页面的样式复用&#xff0c;stateStyles可以依据组件的内部状态的不同&#xff0c;快速设置不同样式。这就是我们本章要介绍的内容stateStyles&#xff08;又称为&#xff1a;多态样式&#xff09;。 概述 stateStyles是属性方法&#xff0c;可以根…

机器人中的数值优化(十九)—— SOCP锥规划应用:时间最优路径参数化(TOPP)

本系列文章主要是我在学习《数值优化》过程中的一些笔记和相关思考&#xff0c;主要的学习资料是深蓝学院的课程《机器人中的数值优化》和高立编著的《数值最优化方法》等&#xff0c;本系列文章篇数较多&#xff0c;不定期更新&#xff0c;上半部分介绍无约束优化&#xff0c;…

Vue3父子组件数据传递

getCurrentInstance方法 Vue2中&#xff0c;可以通过this来获取当前组件实例&#xff1b; Vue3中&#xff0c;在setup中无法通过this获取组件实例&#xff0c;console.log(this)打印出来的值是undefined。 在Vue3中&#xff0c;getCurrentInstance()可以用来获取当前组件实例…

SoloX:Android和iOS性能数据的实时采集工具

SoloX&#xff1a;Android和iOS性能数据的实时采集工具 github地址&#xff1a;https://github.com/smart-test-ti/SoloX 最新版本&#xff1a;V2.7.6 一、SoloX简介 SoloX是开源的Android/iOS性能数据的实时采集工具&#xff0c;目前主要功能特点&#xff1a; 无需ROOT/越狱…

新型信息基础设施IP追溯:保护隐私与网络安全的平衡

随着信息技术的飞速发展&#xff0c;新型信息基础设施在全球范围内日益普及&#xff0c;互联网已经成为我们社会和经济生活中不可或缺的一部分。然而&#xff0c;随着网络使用的增加&#xff0c;隐私和网络安全问题也引发了广泛关注。在这个背景下&#xff0c;IP&#xff08;In…