zoukankan      html  css  js  c++  java
  • echarts图表在Tab页中width: 100%失效导致的第一个Tab页之后的Tab页图表不能正常显示的问题

    解决Tab切换echarts图表不能正常显示问题:

        // 绘图div父容器的宽度
        let w = $('.figure').width();
        $('#fig-t').css('width', w); // 获取父容器的宽度直接赋值给图表以达到宽度100%的效果
        $('#fig-f').css('width', w); // 获取父容器的宽度直接赋值给图表以达到宽度100%的效果
        $('#fig-e').css('width', w); // 获取父容器的宽度直接赋值给图表以达到宽度100%的效果
        fig_t = echarts.init(document.getElementById('fig-t'), 'white', {renderer: 'canvas'});
        fig_f = echarts.init(document.getElementById('fig-f'), 'white', {renderer: 'canvas'});
        fig_e = echarts.init(document.getElementById('fig-e'), 'white', {renderer: 'canvas'});

    上面只是解决了Tab页切换导致的图表显示问题,

    由于是在图表初始化的时候设置了容器宽度,图表并不能随窗口缩放自适应,下面是解决方法:

    window.onresize = function () {
        // 绘图div父容器的宽度
        let w = $('.figure').width();
        $('#fig-t').css('width', w); // 获取父容器的宽度直接赋值给图表以达到宽度100%的效果
        $('#fig-f').css('width', w); // 获取父容器的宽度直接赋值给图表以达到宽度100%的效果
        $('#fig-e').css('width', w); // 获取父容器的宽度直接赋值给图表以达到宽度100%的效果
        if ((typeof fig_t) !== "undefined" && fig_t.dispose) {
            // ECharts随窗口大小改变而自适应
            fig_t.resize();
        }
        if ((typeof fig_f) !== "undefined" && fig_f.dispose) {
            // ECharts随窗口大小改变而自适应
            fig_f.resize();
        }
        if ((typeof fig_e) !== "undefined" && fig_e.dispose) {
            // ECharts随窗口大小改变而自适应
            fig_e.resize();
        }
    };
  • 相关阅读:
    Bellman-Ford算法
    POJ 1990 MooFest
    POJ3067:Japan(树状数组求逆序对)
    树状数组求逆序对
    树状数组
    Is It A Tree?(hdu1325)
    强连通图 Tarjan算法
    UVALive
    UVALive
    Problem Statement
  • 原文地址:https://www.cnblogs.com/jingsupo/p/13042425.html
Copyright © 2011-2022 走看看