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

  • 网页上的文字无法复制怎么办(网页上的文字无法选中怎么办)

    网页上的文字无法复制怎么办(网页上的文字无法选中怎么办)

  • 物联网卡是什么意思(物联网卡是什么卡)

    物联网卡是什么意思(物联网卡是什么卡)

  • 苹果手机怎么屏蔽广告弹窗(苹果手机怎么屏幕一直亮)

    苹果手机怎么屏蔽广告弹窗(苹果手机怎么屏幕一直亮)

  • iwatch5上市时间

    iwatch5上市时间

  • ipad分屏没有中线(ipad2018分屏没有分隔条)

    ipad分屏没有中线(ipad2018分屏没有分隔条)

  • 两部手机怎么转移软件(两部手机怎么转移聊天记录)

    两部手机怎么转移软件(两部手机怎么转移聊天记录)

  • 华为Nova5网速显示在哪里设置(华为nova5网速慢)

    华为Nova5网速显示在哪里设置(华为nova5网速慢)

  • iOS 微信把地区改任意文字(怎样把微信地区关掉苹果手机)

    iOS 微信把地区改任意文字(怎样把微信地区关掉苹果手机)

  • 华为play4t和play4tpro有什么区别(华为play4t和play3哪个好)

    华为play4t和play4tpro有什么区别(华为play4t和play3哪个好)

  • 苹果6s和6的手机壳是通用的吗(苹果手机6与6s)

    苹果6s和6的手机壳是通用的吗(苹果手机6与6s)

  • pcgm00是什么手机(pcgm00是什么手机型号)

    pcgm00是什么手机(pcgm00是什么手机型号)

  • 摄像头到晚上就看不清怎么办(摄像头到晚上就花屏白天就好了)

    摄像头到晚上就看不清怎么办(摄像头到晚上就花屏白天就好了)

  • ppt文字样式怎么设置(ppt怎么设置文字效果)

    ppt文字样式怎么设置(ppt怎么设置文字效果)

  • 金立手机声音小怎么办(金立手机声音小怎么才能变大)

    金立手机声音小怎么办(金立手机声音小怎么才能变大)

  • 华为p30pro可以插耳机吗(华为p30Pro可以插耳机嘛)

    华为p30pro可以插耳机吗(华为p30Pro可以插耳机嘛)

  • 微信怎么发朋友圈消息(微信怎么发朋友圈)

    微信怎么发朋友圈消息(微信怎么发朋友圈)

  • u盘直接拔出会不会坏(u盘直接拔出会怎么样)

    u盘直接拔出会不会坏(u盘直接拔出会怎么样)

  • 苹果x最适合的ios版本(苹果x适合的版本)

    苹果x最适合的ios版本(苹果x适合的版本)

  • 如何用平板登录微信(如何用平板登录生源地贷款)

    如何用平板登录微信(如何用平板登录生源地贷款)

  • 抖音拍摄的视频怎么剪辑(抖音拍摄的视频怎么调倍速)

    抖音拍摄的视频怎么剪辑(抖音拍摄的视频怎么调倍速)

  • 陌陌语音聊天怎么没有了(陌陌语音聊天怎么计算流量)

    陌陌语音聊天怎么没有了(陌陌语音聊天怎么计算流量)

  • 苹果xr控制中心在哪里(苹果xr控制中心怎么拉出来)

    苹果xr控制中心在哪里(苹果xr控制中心怎么拉出来)

  • qq 被对方屏蔽了还可以发信息吗(qq被对方屏蔽了还能看到对方空间吗)

    qq 被对方屏蔽了还可以发信息吗(qq被对方屏蔽了还能看到对方空间吗)

  • 苹果手机旁白是干嘛的(苹果手机旁白是什么意思)

    苹果手机旁白是干嘛的(苹果手机旁白是什么意思)

  • 下载的视频怎么转换格式(下载的视频怎么设置成动态壁纸)

    下载的视频怎么转换格式(下载的视频怎么设置成动态壁纸)

  • Win10两个屏幕配置和切换的方法(win10两个屏幕两个桌面)

    Win10两个屏幕配置和切换的方法(win10两个屏幕两个桌面)

  • ps大型文件储存不了jpg(ps大型文件储存位置在哪)

    ps大型文件储存不了jpg(ps大型文件储存位置在哪)

  • 建筑企业交税流程
  • 向个人提供居住证明
  • 小规模纳税人已过开票截止日期禁止开票怎么办
  • 递延所得税费用在资产负债表哪一项
  • 房产税的纳税义务人是征税范围内房屋产权所有人
  • 收到个人保险费会计分录
  • 抚恤金入账
  • 监理行业增值税税率多少
  • 个人所得税纳税义务人
  • 回购股票注销股本,股价大涨案例
  • 个人所得税哪里报税
  • 几个月以前发现便血是肠癌吗
  • 现金折扣要扣除折扣金额入账吗
  • 开专票还要另外再交钱么
  • 固定资产的资本化后续支出
  • 实收资本不到账如何做凭证
  • 预收账款转收入附单据吗
  • 上月工资多计提了怎么调整
  • 原材料入库单运费要怎么计入?
  • 2020年小规模生活服务业优惠政策
  • 超豪华小汽车消费税起征点
  • 建筑业小规模纳税人异地开票
  • 建筑安装业跨省经营管理税务通知
  • 高新企业研发投入后产出增加
  • 房地产企业预缴增值税及附加税
  • 子公司和母公司可以一起投标吗
  • 公园门票可以开发票吗
  • 市政工程税率多少
  • 企业所得税怎么征收
  • 股东增加投资款要交印花税吗
  • 关闭 ipv6
  • 股权转让相关手续
  • bios里硬盘是哪个
  • linux dism
  • 有限合伙企业如何退出合伙人股份
  • 微软的机会
  • msoobe.exe是什么
  • 2020香港回归23年
  • 今日元宵节图片
  • 阿里云 gtm
  • es6箭头函数写法
  • 删除命令rm rf
  • 小规模纳税人的企业所得税怎么算
  • 未达起征点销售额是含税还是不含税
  • 建筑总承包分包单位可以是市政总承包吗
  • 银行结算方式有哪几种?其具体内容是什么
  • 经营范围没有的项目开票了会怎么样
  • 福利费用属于哪个部门
  • 金税四期查到了怎么办
  • 一次性扣除固定资产出售处理
  • 企业贴现会计分录
  • 钢管租赁怎么算的
  • 财务负责人岗位要求
  • 酒店客房收入会计分录
  • 预收工程款怎么做账
  • 纳税调整怎么做
  • 企业微信对公账户认证
  • 保险公司理赔款如何入账
  • win10一年更新一次
  • windows z
  • win8.1安装过程
  • windows8.1界面
  • win7连接VPN时提示800错误怎么办 连接VPN时提示错误800解决方法
  • win7系统步骤
  • win10系统如何删除用户账户
  • linux mv命令的用法
  • androidserviceslibrary停用
  • css中hack
  • unity与android交互详细
  • Mongoose中document与object的区别示例详解
  • android开发教程视频
  • js实现vue
  • javascript例题
  • 漂亮的相片超好看的
  • 车辆购置税大厅办理流程
  • 企业购房契税怎么入账
  • 如何查看自己公司的税种
  • 税务局发涵有几种
  • 国家规定的免税项目
  • 税务局窗口人员工作内容
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设