首页 > 代码库 > 关于页面图表相应式的问题,问题遇见时间,9月1日,到今天9月2日,尚未解决
关于页面图表相应式的问题,问题遇见时间,9月1日,到今天9月2日,尚未解决
首先,我在做公司的新的软件页面,后台页面,遇到的问题是当我引入百度的echarts.js,想使用他们的插件来实现图表的功能,发现JS的信息描述必须放在他们div id的下面,否则会失效,这是问题一。
现在遇到的问题是解决不了关于图表在PC端和在手机端显示的问题,由于echarts.js的机制,他是需要在
<div class="am-panel am-panel-default am-u-sm-12"> <div id="tfe" class="wutoo" style="min-width: 60rem; min-height:40rem;"></div> </div>
style里面进行宽度和长度的设置,也就是说,他在DOM里自己设置了宽度的DOM,这就是问题所在。
我开始寻找网上所有关于响应式页面的问题,也就是CSS3新属性,根据页面宽度来判断 例如 width的显示问题,比如这样
@media screen and (max-width:700rem){ div#tfe{ width: 6rem;height:4rem; } } @media screen and (max-width:1024rem){ div#tfe{ width: 60rem;height:40rem;
根据@media screen and来进行媒体判断宽度,进而实现根据宽度调整DOM的样式。
但是style是写在 div里面的,他的权限高于在css type里的权限,也就是说,我这么写并不能修改图表的样式。
JS的办法,直接给宽度设定
网上有个给我推荐了这么一个方法,但是对我来说不适用,当然,这是一个办法,能让我短暂的解决移动端的样式问题。
<script type="text/javascript"> let height = window.innerHeight(); document.docunmentElement.style.fontSize =(height/1080)*100+"px"</script>
还有一个方法是在百度的API文档里找到他们专门在JS的方法,昨天嫌繁琐,想找个偷懒的办法,看来今天必须解决这个问题了
手机端的echarts能实现这个功能,也就是说百度已经有了合适的方法,但是我现在就需要从这个地方去进行改变,周六日解决这个问题。
关于页面图表相应式的问题,问题遇见时间,9月1日,到今天9月2日,尚未解决
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。