位置: 编程技术 - 正文

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怎么样)

  • 补缴的税款和罚款的会计处理
  • 土地入固定资产还是无形资产
  • 旅游业差额开票怎么做账
  • 社保基数变更上限怎么办
  • 飞机票退票费如何处理账务
  • 企业如何列支个人收入
  • 增值税即征即退收入要交企业所得税吗
  • 应收账款科目怎么写
  • 发票领购簿遗失怎么办
  • 税收的基本特点有
  • 接受现金捐赠怎么写分录
  • 企业所得税特殊性税务重组
  • 外购材料费用可能计入
  • 年底结账会计处理
  • 购买的商品赠送如何做账
  • 资产减值损失和信用损失的区别
  • 收到销项负数发票怎么处理
  • 生育津贴个税汇算清缴可以扣除吗
  • 税务迁移会影响外经证核销吗
  • 税盘没有抄报各月,有罚款吗
  • 沥青混凝土增值税风险
  • 税控盘未上传发票查询
  • 研发支出辅助账2021版
  • 核销坏账的会计处理分录
  • 讲课费税务发票类别
  • 营业成本过低的原因
  • 筹办期间的筹办费用支出
  • 利息调整摊销的经济意义
  • 跨年的工会经费怎么做分录
  • 已认证的进项税额转出怎么做账务处理
  • 空调计入什么会计科目二级
  • windows10显示未激活怎么办
  • 笔记本闪屏正常吗
  • 在windows7提供了一种什么技术
  • bios设置教程视频
  • php支付接口开发
  • 提前支付的费用记账
  • 报销差旅费会计科目怎么写
  • 企业支付银行的贷款利息可以税前扣除吗为什么
  • macos big sur值得升级吗
  • 营改增后甲供材的账务处理
  • php_fileinfo作用
  • 购买性支出和转移性支出都计入GDP
  • 发票抵税是怎么申报的
  • 弗洛雷斯岛
  • php数组函数题目
  • 期末增值税结转账务处理
  • vue3.0教程
  • 存在现金折扣的会计核算
  • 房屋租赁发票如何免税
  • 提取公益金会计怎么做账
  • 职工福利能开专票吗
  • 公司发放给员工的出差补助需要合并计算个税吗
  • 有销项无进项怎么处理
  • 财政总预算会计的特点
  • 季初资产总额和季末资产总额怎么算
  • 歌咏比赛服装费用规定标准最新
  • 新准则制度体系的核心变化
  • mysql锁表机制
  • 金税盘维护费发票
  • 增值税防伪税控系统
  • 增值税专用发票抵扣期限
  • 已认证的发票要冲红要退票吗
  • 买赠行为的会计处理
  • 合作经营利润分配协议
  • 一张凭证上可以写多个摘要吗
  • 本月购进金额怎么算
  • 开发阶段的支出计入什么科目
  • 借款利息如何记账
  • 银行承兑汇票如何背书转让
  • 会计账簿的登记实训报告
  • Win7系统进入桌面后点每个文件都会打转
  • linux开启ssh服务失败
  • css中层叠的含义
  • gridlayout动态添加view
  • jquery入口
  • 棚改房办房产证用不用交费
  • 济南社保减免政策2020通知
  • 12366国税网上申报
  • 税务稽查项目书的填写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设