layui的选项卡使用echarts显示多图，图表宽度显示异常

最新推荐文章于 2023-11-06 08:39:05 发布

janthinasnail

最新推荐文章于 2023-11-06 08:39:05 发布

阅读量892

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/janthinasnail/article/details/117658456

版权

js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

layui的选项卡使用echarts显示多图，图表宽度显示异常，选项卡第一个图显示正常，点击其他选项卡，图表异常，宽度为100px，如何解决呢？

解决的思路：主要解决宽度的问题，如果能获取宽度，我们重新设置宽度，图表就应该能正常显示了，操作如下。

主要是修改$('.layui-tab-item')宽度，如下所示：

// 修改宽度
function resizeTabsWidth() {
    var w = $('.layui-tab-content').css('width');
    $('.layui-tab-item').css('width', w).children('div').css('width', w);
}

// 监听改变
window.addEventListener('resize', function () {
    resizeTabsWidth();
});

// 散点图
function scatterChart(elem, data) {
    resizeTabsWidth();
    var chartDom = document.getElementById(elem);
    var myChart = echarts.init(chartDom);
    var option = {}; // echarts配置
    myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
}

完整demo的代码如下：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="引入layui.css文件路径" media="all">
</head>
<body>
<style>
    .layui-tab-content {
        height: 480px;
    }

    #chart-1, #chart-2, #chart-3 {
        width: 100%;
        height: 480px;
    }
</style>
<div class="layui-tab layui-tab-card" lay-filter="tabs">
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="1">图1</li>
        <li lay-id="2">图2</li>
        <li lay-id="3">图3</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div id="chart-1"></div>
        </div>
        <div class="layui-tab-item">
            <div id="chart-2"></div>
        </div>
        <div class="layui-tab-item">
            <div id="chart-3"></div>
        </div>
    </div>
</div>
<script src="引入layui.js文件路径"></script>
<script src="引入echarts.min.js文件路径"></script>
<script>
    layui.use(['element', 'jquery'],
        function () {
            var element = layui.element
                , $ = layui.jquery;

            sendRequest();

            function sendRequest() {
                $.ajax({
                    url: '',
                    type: 'post',
                    dataType: 'json',
                    data: {},
                    success: function (res) {
                        scatterChart('chart-1', res.data.chart1);
                        scatterChart('chart-2', res.data.chart2);
                        scatterChart('chart-3', res.data.chart3);
                    },
                    error: function (e) {

                    }
                });
            }

            /*element.on('tab(tabs)', function () {
                resizeTabsWidth();
            });*/

            // 监听改变
            window.addEventListener('resize', function () {
                resizeTabsWidth();
            });

            // 修改宽度
            function resizeTabsWidth() {
                var w = $('.layui-tab-content').css('width');
                $('.layui-tab-item').css('width', w).children('div').css('width', w);
            }

            // 散点图
            function scatterChart(elem, data) {
                resizeTabsWidth();
                var chartDom = document.getElementById(elem);
                var myChart = echarts.init(chartDom);
                var option = {}; // echarts配置
                myChart.setOption(option);
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
            }
        });
</script>
</body>
</html>

janthinasnail

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
layui的选项卡使用echarts显示多图，图表宽度显示异常

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>demo</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta n..
复制链接

扫一扫