位置: 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私有化部署(全流程)

  • window更新清理可以清吗(windows 更新清理可以删除吗)

    window更新清理可以清吗(windows 更新清理可以删除吗)

  • 如何查看网线是几类线(如何查看网线是不是千兆)

    如何查看网线是几类线(如何查看网线是不是千兆)

  • 获取取件码失败是什么原因(获取取件码失败什么意思)

    获取取件码失败是什么原因(获取取件码失败什么意思)

  • 手机关不了机屏幕失灵怎么办(手机关不了机屏幕显示字母怎么回事)

    手机关不了机屏幕失灵怎么办(手机关不了机屏幕显示字母怎么回事)

  • 荣耀20lite是什么手机(华为荣耀20lite)

    荣耀20lite是什么手机(华为荣耀20lite)

  • 电脑突然自动关机了再按电源打不开(电脑突然自动关机重启)

    电脑突然自动关机了再按电源打不开(电脑突然自动关机重启)

  • 抖音没有扫一扫(抖音没有扫一扫变成直播了)

    抖音没有扫一扫(抖音没有扫一扫变成直播了)

  • 华为Mate10怎么分屏(华为mate10怎么分享热点?)

    华为Mate10怎么分屏(华为mate10怎么分享热点?)

  • iphonex蓝牙搜索不到设备(苹果蓝牙搜索功能)

    iphonex蓝牙搜索不到设备(苹果蓝牙搜索功能)

  • air4什么时候上市(apple air4什么时候上市)

    air4什么时候上市(apple air4什么时候上市)

  • 闲鱼见面交易买家不确认收货怎么办(闲鱼见面交易买家不确认收货或者退款不退货怎么办)

    闲鱼见面交易买家不确认收货怎么办(闲鱼见面交易买家不确认收货或者退款不退货怎么办)

  • qq举报会被对方知道吗(qq举报会不会被发现 知乎)

    qq举报会被对方知道吗(qq举报会不会被发现 知乎)

  • 戴尔3590有键盘灯吗(戴尔3501键盘)

    戴尔3590有键盘灯吗(戴尔3501键盘)

  • 手机动态壁纸怎么取消(手机动态壁纸怎么做)

    手机动态壁纸怎么取消(手机动态壁纸怎么做)

  • realmeQ怎么给应用加密(realme应用加密怎么设置)

    realmeQ怎么给应用加密(realme应用加密怎么设置)

  • 什么叫横屏模式(什么是横屏模式?)

    什么叫横屏模式(什么是横屏模式?)

  • 江高是哪个省的城市(江高什么意思)

    江高是哪个省的城市(江高什么意思)

  • 字体怎么设置(字体怎么设置大一点)

    字体怎么设置(字体怎么设置大一点)

  • 华为nxtcl00什么型号

    华为nxtcl00什么型号

  • cad怎么查看块的数量(cad查看块的快捷命令)

    cad怎么查看块的数量(cad查看块的快捷命令)

  • 旧硬盘装到新电脑(旧硬盘装到新电脑上资料会消失吗)

    旧硬盘装到新电脑(旧硬盘装到新电脑上资料会消失吗)

  • 京东轻松购怎么设置(京东轻松购和正常购买的区别)

    京东轻松购怎么设置(京东轻松购和正常购买的区别)

  • Linux如何通过命令查看日志文件的某几行(中间几行或最后几行)(linux系统命令查询)

    Linux如何通过命令查看日志文件的某几行(中间几行或最后几行)(linux系统命令查询)

  • chmod命令  改变文件或目录权限(chmod命令用于更改文件或目录的所有者)

    chmod命令 改变文件或目录权限(chmod命令用于更改文件或目录的所有者)

  • 季度所得税计提
  • 融资租赁业务如何开具增值税
  • 送货单和收据单的区别
  • 收到赠送的商品并销售
  • 企业购买理财都需先交税再提现吗
  • 会议服务费怎么开
  • 企业间拆借资金是否缴税
  • 建帐时库存的原材料如何入帐?
  • 钉钉报销费用明细怎么写
  • 合并报表盈余公积怎么提
  • 不同税率的产品可以开一张票里吗
  • 发票不一致是什么原因
  • 所得税费用一年交几次
  • 开票金额小于付款金额,怎么办理
  • 对外投资的风险及对策
  • 承兑贴息收入账务处理怎么做?
  • 职工食堂报销经费标准
  • 进口材料怎么做账
  • 预定机票如何正常退票
  • 领用工程物资用于在建工程的进项税抵扣问题
  • 应收款项包括哪些内容,各自有何特点?
  • 小额纳税人增值税专用发票税率1%
  • 结转未交增值
  • 中秋福利费会计分录
  • env文件夹是什么文件
  • 货物无偿赠送分录
  • 最快的网络传输速率
  • 公司资金被税务部门冻结
  • php代码扫描
  • laravel框架的优缺点
  • 固定资产加速一次性扣除
  • 2021前端面试题校招
  • web自动化selenium实战项目
  • http命令
  • 已提减值准备的固定资产报废,确认的所得税资产
  • PostgreSQL之分区表(partitioning)
  • 退预收款需要对账吗
  • 辞退员工补偿金计入什么科目
  • SqlServer 2005 T-SQL Query 学习笔记(1)
  • 小企业如何核算成本费用
  • 个税申报可以去税务局吗
  • 企业给灾区捐款可以抵税吗
  • 服务费可以计入主营业务成本吗
  • 普通发票可以抵扣吗
  • 消费税也是流转税吗
  • 土地转移是什么意思
  • 营业费用占比
  • 建厂期间购买材料怎么办
  • 结转资金和结余资金
  • 财务负责人和办税员可以是一个吗
  • 政府会计准则具体准则的作用
  • sql server的使用方法
  • centos sh
  • 小黑马科技
  • 如何禁止win10系统更新到win11
  • windows的气泡屏保会加速
  • winxp系统界面图片
  • win7 系统没有声音
  • ubuntu系统启动流程
  • redhat linux安装
  • window10删除自带输入法
  • 编程javascript
  • nodejs 异步io底层原理
  • [置顶]星陨计划
  • macos 升级python
  • unity sp
  • 初步使用筷子而动作不规范的幼儿保育员应该
  • [置顶]游戏名:chivalry2
  • JavaScript中Number.MIN_VALUE属性的使用示例
  • unity打包安卓apk
  • 关于Colloder事件
  • android基础入门教程
  • 组件中js可以做什么
  • 供暖配套费
  • 深圳税务网上申报客户端更正申报流程
  • 开票员怎么登录电子税务局进行开票验证
  • 不动产租赁和经营租赁发票的区别
  • 别墅与普通住宅的优缺点
  • 一般纳税人企业所得税5%还是25%
  • 国税申报作废怎么操作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设