位置: IT常识 - 正文

Echarts图表自适应?你可以这样做(echarts图大小设置)

编辑:rootadmin
Echarts图表自适应?你可以这样做 一、图表变形

推荐整理分享Echarts图表自适应?你可以这样做(echarts图大小设置),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:echarts图大小设置,echarts图表大小设置,echarts自定义图,echarts调整图表大小,echarts自定义图,echarts图表大小设置,echarts自定义图,echarts根据大小自动调整,内容如对您有帮助,希望把文章链接给更多的朋友!

使用 Echarts 绘制图表时,可能会遇到变形的问题。如下图:

其原因是 Echarts 在初始化实例的时候,对应 dom 元素的宽高还没有确定。

解决方案也很简单: 监听对应 dom 元素,如果大小发生变化,调用resize()方法。

import echarts from 'echarts';...const chartDom = document.getElementById('myChart');let myChart = echarts.init(chartDom);// 若dom尺寸变化,则resizeconst chartObserver = new ResizeObserver(() => {    myChart.resize();});chartObserver.observe(chartDom);二、自适应解决方案Echarts图表自适应?你可以这样做(echarts图大小设置)

自适应是浏览器窗口变化的时候,echarts 图表大小能够相应的变化。可通过监听浏览器窗口实现。

window.onresize = () => {    myChart.resize();}

多个 echarts 图的话,则

window.onresize = () => {    myChart1.resize();    myChart2.resize();}

个别时候,也会遇到myChart1与myaChart2不在同一个作用域内,如果多次调用window.onresize(),后一个将会覆盖掉前一个。如下:

window.onresize = () => {    myChart1.resize();}...// 后一个执行的代码会覆盖掉前一个window监听window.onresize = () => {    myChart2.resize();}

这时,可以使用window.addEventListener('resize', callback)来避免监听被覆盖:

window.addEventListener('resize', () => {    myChart1.resize();}, false); // false代表事件句柄在冒泡阶段执行...window.addEventListener('resize', () => {    myChart2.resize();}, false);

当然,也可以跟最上面的处理一样,使用ResizeObserver分别监听对应 dom 元素,调用resize()解决。

「参考资料:」

「ResizeObserver API」:https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

本文由 mdnice 多平台发布

本文链接地址:https://www.jiuchutong.com/zhishi/298907.html 转载请保留说明!

上一篇:图像修复(Image Restoration)算法数据集详细介绍(图像修复技术)

下一篇:Chatgpt私有化部署(全流程)

  • kaadas智能锁怎么添加指纹(kaadas智能锁怎么修改管理密码)

    kaadas智能锁怎么添加指纹(kaadas智能锁怎么修改管理密码)

  • excel如何快速插入多列(excel如何快速插行)

    excel如何快速插入多列(excel如何快速插行)

  • 抖音私信能留微信吗(抖音私信留微信号会不会被限流)

    抖音私信能留微信吗(抖音私信留微信号会不会被限流)

  • 电子器件有哪些(柔性电子器件有哪些)

    电子器件有哪些(柔性电子器件有哪些)

  • 微信名改过一次了怎么才能再改(微信名改过一次怎么恢复)

    微信名改过一次了怎么才能再改(微信名改过一次怎么恢复)

  • 拼多多主图为什么自动切换(拼多多主图为什么不显示第一个了)

    拼多多主图为什么自动切换(拼多多主图为什么不显示第一个了)

  • 微信朋友圈设置一年可见(微信朋友圈设置位置)

    微信朋友圈设置一年可见(微信朋友圈设置位置)

  • b站视频播放量计算规则(b站视频播放量旁边的符号是什么意思)

    b站视频播放量计算规则(b站视频播放量旁边的符号是什么意思)

  • QQ5个共同好友如何查看(qq5个共同好友如何删除)

    QQ5个共同好友如何查看(qq5个共同好友如何删除)

  • 手机突然有音乐关不掉(华为手机突然有音乐)

    手机突然有音乐关不掉(华为手机突然有音乐)

  • 情侣qq解除记录还在吗(qq情侣解除了)

    情侣qq解除记录还在吗(qq情侣解除了)

  • 苹果11pro不能用充电宝了吗(苹果11pro不能用华为充电头吗?)

    苹果11pro不能用充电宝了吗(苹果11pro不能用华为充电头吗?)

  • icloud满了手机影响吗(icloud满了手机会不会变卡)

    icloud满了手机影响吗(icloud满了手机会不会变卡)

  • 如何让内存空间变大(如何让内存空间变得更大)

    如何让内存空间变大(如何让内存空间变得更大)

  • 华为畅享10plus有语音唤醒功能吗(华为畅享10plus有OTG功能吗)

    华为畅享10plus有语音唤醒功能吗(华为畅享10plus有OTG功能吗)

  • 华为p30支持红外遥控吗(华为p30支持红外遥控器吗)

    华为p30支持红外遥控吗(华为p30支持红外遥控器吗)

  • 京东评价在哪看(京东自己的评价找不到)

    京东评价在哪看(京东自己的评价找不到)

  • 太行山属于哪个省(太行山属于哪个省哪个市哪个县)

    太行山属于哪个省(太行山属于哪个省哪个市哪个县)

  • 快手怎么弄长腿瘦身(快手有没有超长腿特效)

    快手怎么弄长腿瘦身(快手有没有超长腿特效)

  • 摄像机3mp4mp5mp代表什么(摄像机3mp是什么意思)

    摄像机3mp4mp5mp代表什么(摄像机3mp是什么意思)

  • 电子发票微信怎么查看(电子发票微信怎么发送给对方)

    电子发票微信怎么查看(电子发票微信怎么发送给对方)

  • vivo如何关闭锁屏新闻(vivo如何关闭锁屏显示的快递)

    vivo如何关闭锁屏新闻(vivo如何关闭锁屏显示的快递)

  • 手机拍照时间怎么显示设置(手机拍照时间怎么关闭)

    手机拍照时间怎么显示设置(手机拍照时间怎么关闭)

  • 全球第一家上市的互联网电商平台
  • 每月长摊金额如何分摊
  • 一般纳税人增值税申报操作流程
  • 销售费用与管理的关系
  • 股权转让与增资扩股的税务
  • 如何设置采购入库的对方科目暂估科目
  • 对外投资借款费用计入
  • 预收账款年底要确认收入吗
  • 进项发票认证多了留抵
  • 印花税按次申报是什么意思
  • 其他应收款怎么分析
  • 建筑业预缴税款怎么退税
  • 计提固定资产减值准备会计科目
  • 厂房转让会计分录
  • 返利发票税率
  • 对公账户资金往来会产生税吗
  • 商标续展费用入什么科目
  • 小规模纳税人买车可以抵税吗
  • 期末增值税进项税大于销项税的金额计入哪里
  • 默认网关不可用频繁掉线
  • 建筑企业总产值是什么
  • 对公账户转私人账户手续费多少
  • 营改增后哪些费用可以抵扣
  • php缩放图片
  • php的正则表达式
  • 筹建期间发生的开办费属于什么费用
  • 原始凭证容易出现错误的原因
  • web渗透实战
  • 工商年报纳税总额包括滞纳金吗
  • php中的异常和错误怎么写
  • 人脸识别测颜值,al
  • php加密后的代码能运行吗?
  • hexdump windows
  • vuejs echarts
  • 担保贷款借款人征信不好有影响吗
  • 各会计科目的含义
  • 公司没有人需要申报个税吗
  • 帝国cms8.0
  • 物流企业财务流程
  • centos上安装vscode
  • mongo 更新数据
  • mysql获取字段值的长度
  • 全资子公司注销的账务处理
  • 当月购买固定资产需要计提吗
  • 交易性金融资产公允价值变动怎么算
  • 不动产登记流程有哪些
  • 暂估入账的固定资产
  • 企业办理名称变更怎么办
  • 小规模公司购买汽车如何抵税
  • 案例分析应收账款管理存在的问题
  • 资产负债表中的货币资金怎么算
  • 增值税结转是月结转还是年度
  • 房地产开发企业增值税税率
  • mysql安装过程中报错
  • sqlserver数据库事物日志已满
  • winpe如何安装驱动
  • Windows Server AD 访问数量控制配置方法
  • WIN10专业版怎么查看操作位数
  • centos6.5升级到7.2
  • win10移动版和win10区别
  • win8.1 应用商店是不是不能用了
  • linux小技巧
  • win10系统打不开网页怎么办
  • Cocos2d-x3.3 Physics物理引擎模块解决了刚体穿透问题
  • extjs4 treepanel动态改变行高度示例
  • system命令行
  • 文本左右对齐排版怎么弄
  • linux中的ls命令的功能是变换工作目录到目标指定目录
  • js简单实现鼠标移动后面文字也移动
  • 安卓app性能测试
  • unity mesh编程
  • js数组entries
  • js实现的倒计时怎么用
  • python数据通信
  • 浅析2种JavaScript继承方式
  • 财务报表盖章位置
  • 增值税申报表更正申报期限
  • 医疗机构执业许可证办理的条件
  • 建设工程合同纠纷属于专属管辖吗
  • 城市维护建设税减半征收政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设