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

  • 交易性金融资产公允价值变动计入
  • 陈列费属于什么大类
  • 员工可以签订两份劳动合同吗
  • 企业财务独立核算
  • 一般纳税人必须先有进项才能开出来发票吗
  • 出售使用过的固定资产
  • 房产税没交会怎么样
  • 货物的运输费用怎么算
  • 生产企业运费收入怎么处理?
  • 增值税发票已作废怎么办
  • 买烟酒开专票可以抵税吗
  • 电子税务局里的利润表,本月金额是填累计数吗
  • 现代服务促销服务费的经营范围
  • 手机压缩包损坏怎么修复
  • vmware11安装win10
  • 软件开发公司怎么做账
  • linux中ping命令怎么用
  • 红字专用发票是红色的吗
  • 工会经费如何计提会计分录
  • 旅行社代订的住宿费可以抵扣吗
  • tp-link无线路由器怎么样
  • 个体户流水太大工商局会查吗
  • php中session的作用
  • 财务工作中如何用进销存软件
  • 退休人员被返聘还能领养老金吗?
  • 一般纳税人怎么交税
  • php 设计模式 鸟哥
  • php教程全集
  • 企业重组税收政策汇编
  • 大雾笼罩的早晨
  • 销售滞后税务处理
  • ci框架如何做api
  • linux时间12小时制
  • Vue3入门笔记----登录功能
  • 2021前端热门技术解读
  • 用友u8删除凭证的步骤
  • 小微企业普惠性税收减免政策2022
  • 企业所得税包含在税金及附加里面吗
  • 企业之间收的借款利息该如何交税 原文
  • 未认证发票如何导出
  • 未分配利润做账
  • 快递公司的收件员好干吗
  • 公司注册地址变更有什么影响
  • 企业没收入也要交税吗
  • 加计抵减的其他收益免税吗
  • 外购的商品
  • 购销合同印花税计税依据
  • 物流辅助服务包含哪些内容
  • 上年度财务费用会计分录
  • 土地出让金进项税怎么算
  • 未收到投资款可以确认实收资本吗
  • 国税地税发票样式区别
  • 无形资产原值变更 摊销
  • 暂估成本以后也没有票回来了
  • 福利费可以直接发钱吗
  • 汽车加油费属于交通费用吗
  • 费用类科目的明细怎么写
  • 租车费报销管理规定
  • 没有销售收入可以有销售费用吗
  • windows2003设置自动重启
  • 解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
  • Centos7 中 Node.js安装简单方法
  • linux 搜索文件
  • perl 教程
  • vue中拦截器
  • css怎么设置表单居中
  • js settimeout用法
  • vlc录制没反应
  • 深入了解工作优势怎么回答
  • python3 pygame
  • axios使用jsonp
  • JavaScript中的数据类型分为两大类
  • python编程内容
  • 全国大学生数学竞赛证书电子版查询
  • 北京地税残疾人补贴政策
  • 十月报税2021
  • 进出口货物的报关时限
  • 税控盘版开票软件打不开是什么原因
  • 个体商户营业额多少万以下免税
  • 超期未申报还能申报吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设