关于页面图表相应式的问题，问题遇见时间，9月1日，到今天9月2日，尚未解决

Posted 2020-08-06 吴小二

首先，我在做公司的新的软件页面，后台页面，遇到的问题是当我引入百度的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能实现这个功能，也就是说百度已经有了合适的方法，但是我现在就需要从这个地方去进行改变，周六日解决这个问题。