位置: 编程技术 - 正文

echarts学习笔记之图表自适应问题详解(echarts怎么用)

编辑:rootadmin

推荐整理分享echarts学习笔记之图表自适应问题详解(echarts怎么用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:echarts课程,echarts入门教程,echarts4教程,echarts详解,echarts入门教程,echarts教程视频,echarts教学视频,echarts教学视频,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

为了直观查看公司服务器各个进程占用的内存动态情况,我使用echarts进行数据可视化,具体的实现过程按下不表。

最后实现的效果如图:

然后问题就来了,因UI采用了Bootstrap响应式框架,所以除了图表之外其他都是响应式。当窗口缩小后,就会发生很尴尬的出界事件。

如图:

针对这个问题,刚开始的解决思路及方法:把echart容器的宽度设置为%;

这样之后依然存在问题:页面初始的宽度是多少,canvas宽度就是多少,之后不会再变化。

便尝试通过jsDOM操作,强行令canvas的宽度为%,however too young too simple!

echarts学习笔记之图表自适应问题详解(echarts怎么用)

调整浏览器宽度发现,canvas画布的宽度是随之变化的,然而画布里面的图表内容却像被挤压在一起的馅饼,模糊扭曲了。

到这里细心的同学可以发现,echart图表一旦绘制成功,内容就不会再变化。所以对于echart图表,其"响应式"应该是可以随着窗口调整不断被重新绘制,不是简单的调整宽高。

到echart官网看了Example,发现官网的实例都具有响应式功能,确实不是单纯的宽度改变,是每次调整后图表是重新绘制。猜想echart源码里应该有resize这个API,打开调试器,打开echart源码,Ctrl+F,果然找到了。

再仔细查看官方文档:

echart图表本身是提供了一个resize的函数的。

于是当浏览器发生resize事件的时候,让其触发echart的resize事件,重绘canvas。(也可以通过其他事件触发)

附:Echarts 页面多图自适应的解决办法

网上看到有不少人使用Echarts抽象出来的框架,实现自适应的效果代码:window.onresize = option.chart.resize() , 这个代码基本是官网上的window.onresize = myCharts.resize();的翻版。

但在实际的应用中一个页面可能会有好几个Echarts图表,而使用window.onresize = option.chart.resize() ,加载页面图表后,页面上只有一个图表会根据浏览器的变化而自适应。如果要是页面上的图表都要自适应。则需要将resize事件叠加在不同的图上面,使用一下代码可以实现。

总结

标签: echarts怎么用

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

上一篇:arcgis for js栅格图层叠加(Raster Layer)问题(arcgis栅格图像)

下一篇:echarts学习笔记之箱线图的分析与绘制详解(echarts怎么样)

  • 资金账簿印花税减半征收后可以叠加享受优惠吗
  • 预包装食品是否备案怎么查询
  • 售后维修的配件有哪些
  • 项目转包是什么意思
  • 个人取得什么收入不交税
  • 本年利润结转在贷方表示什么意思
  • 对供应商的罚款怎么入账
  • 负数发票跨月怎么重开
  • 一次性年终奖金个税税率表2023
  • 企业给员工的异地安家费交个税吗?
  • 小规模纳税人应纳税额减征额怎么算
  • 统一信用社会代码怎么填
  • 发票代码会有一样的吗
  • 一次性劳务费需要交税吗
  • 供应商给客户员工回扣有罪吗
  • 与收益相关的政府补助的确认
  • 小规模差旅费分录
  • led电子屏税收编码
  • linux批量删除
  • bios设置光驱为第一启动项
  • msiexec.exe是什么进程介绍
  • 应收账款坏账收回影响利润么
  • 工资达到起征点 报税时没有税款
  • 报销货物运输费需要什么凭证
  • 减税降费是针对个人还是企业
  • iis6配置php网站
  • linux shell 比较运算符
  • 转出未交增值税会计科目
  • 贴吧热门评论
  • dl是什么文件
  • broken pipe write failed
  • 固定资产终止确认的会计处理
  • 威尼斯海滩滑板场
  • post请求怎么用
  • 森林中的结香花,日本 (© nattya3714/Getty Images)
  • 实名办税人员承担什么责任
  • 销售自己使用过的固定资产
  • 用python编写素数
  • php判断数据表是否存在
  • php连接mysql8.0
  • python字典删除键值对方法
  • 长期待摊费用装修款如何摊销
  • 利润表中本期数
  • 缴纳税款滞纳金怎么算
  • mongodb官方文档中文
  • 查财务报表的网站有哪些
  • 医用增值税发票
  • 跨月发票红字冲销有影响吗
  • 差旅费报销人员范围
  • 差旅费用抵扣税款
  • 年底没有取得发票企业所得税
  • 公司年底奖金怎么计算
  • 合同资产结转收入
  • 金融企业借款费用扣除比例
  • 如何清除sql2008r2日志
  • Win7系统进入桌面后点每个文件都会打转
  • centos7权限管理
  • yosemite 10.10.5升级
  • 卸载声卡驱动有什么影响
  • windows开始界面
  • win7系统的文件夹怎么挪位置
  • unity进阶之路
  • jquery添加css样式
  • nodejs爬虫框架crawler
  • windows批处理命令教程
  • js实现计数
  • JavaScript中的复杂数据类型又称为
  • 计算字符串的长度使用哪个函数?
  • 用javascript
  • 页面怎么打印在一张张上
  • jq拖拽功能
  • jquery操作checkbox火狐下第二次无法勾选的解决方法
  • 请问在javascript程序中
  • flask框架图
  • 简述javascript原型和原型链有什么特点?
  • 出租车票真伪查询官网
  • 城市垃圾处理费会计分录
  • 个人所得税代扣代缴手续费退库申请
  • 国税和地税现在合并了吗
  • 云南省昆明市税收优惠政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设