首页 > 代码库 > 关于页面图表相应式的问题,问题遇见时间,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日,尚未解决