• Layui 切换tab页,echarts显示问题


    1、

    layui在tab切换时是利用tab下的div显示和隐藏来实现的,而echarts在你页面刷新的时候就渲染出来了,

    而第二个tab已经隐藏了,导致echarts自动获取dom的宽高无效,所以使用的是echarts默认的高宽,通过监听tab切换事件然后执行resize进行echarts的重新 

    html 代码:

    <div class="layui-tab" lay-filter="test">


    </div>

    js 代码

    //引入 element
    layui.use(['element'], function () {
      element = layui.element;
      //监听Tab切换,以改变地址hash值
      element.on('tab(test)', function(data){
          if (data.index == 0) {
           //图表重新渲染    myChart_edu.resize();   }   if (data.index == 1) {   myChart_dep.resize();   }   });
    }

    //Echarts图表不显示,  没有设置好 宽高

    <div id="chart-sex" style="700px; height:500px" ></div>
  • 相关阅读:
    C#反射(一)
    找回密码
    常用的webservice接口 .
    C# 反射应用技术
    Delphi简介
    C#程序思想简介
    如何跨线程访问window控件
    C#如何判断某个文件夹是否为共享,访问权限为只读
    Delphi基础
    Web Service接口
  • 原文地址:https://www.cnblogs.com/wongzzh/p/15102397.html
Copyright © 2020-2023  润新知