echarts图表在tab切换中宽度失效

最新推荐文章于 2024-08-07 23:54:34 发布

学习代表未来

最新推荐文章于 2024-08-07 23:54:34 发布

阅读量4.4k

点赞数 1

分类专栏： js 文章标签： echarts tab切换

本文链接：https://blog.csdn.net/weixin_39907729/article/details/93076381

版权

js 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

如果设置了宽度100%，在初始化的时候echarts图表正常显示，但在点击tab切换的时候，发现宽度变为了100px，

主要原因的当前的元素被隐藏了，但是echarts实例还存在，

解决办法是：在点击tab切换的时候，先把所有的echarts实例给销毁掉 myChart.dispose();，再给当前显示的元素，调用echarts数据。全部的代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        * {
            box-sizing: border-box;

        }

        ul {
            margin: 0;
            padding: 0;
            font-size: 0;
        }

        li {
            font-size: 14px;
            padding: 10px;
            width: 33.33%;
            display: inline-block;
            vertical-align: top;
            list-style: none;
            text-align: center;
            cursor: pointer;
        }

        li.active {
            background: #fff;
        }

        .wrapper {
            background: #ccc;
        }

        .inner {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px;

        }

        .item {
            width: 100%;
            height: 200px;
            display: none;
            background: #fff;
        }

        .item.active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="inner">
            <ul>
                <li class="active">图表1</li>
                <li>图表2</li>
                <li>图表3</li>
            </ul>
            <div class="box">
                <div class="item active">
                    <div id="item1" style="width: 100%;height: 100%;"></div>
                </div>
                <div class="item">
                    <div id="item2" style="width: 100%;height: 100%;"></div>
                </div>
                <div class="item">
                    <div id="item3" style="width: 100%;height: 100%;"></div>
                </div>

            </div>
        </div>
    </div>
    <script src="../jquery.js"></script>
    <script src="echarts.min.js"></script>
    <script>
        
        var myChart; // 定义全局变量来接收echarts实例

        function render(dom) {
            myChart = echarts.init(document.getElementById(dom));
            var option = {

                // 图例组件。
                // legend: {
                //     // show:false

                // },
                grid: {
                    left: 0, //grid 组件离容器左侧的距离。
                    // top:0,
                    right: 0,
                    bottom: 0

                },
                tooltip: { //提示框组件。
                    trigger: 'axis'
                },
                xAxis: {

                    show: false, // 是否显示 x 轴。

                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    boundaryGap: false //坐标轴两边留白策略
                },
                yAxis: {

                    show: false, // 是否显示 y 轴。
                    splitLine: {
                        show: false //坐标轴在 grid 区域中的分隔线。

                    }

                },
                series: [{
                    name: '销量',
                    type: 'line',
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    areaStyle: { //区域填充样式。
                        // color:'#8c617a'
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8ec6ad'
                            }, {
                                offset: 1,
                                color: '#fff'
                            }])
                        }

                    },
                    itemStyle: { //折线拐点标志的样式。
                        color: '#8ec6ad'
                    },
                    lineStyle: { //线条样式。
                        color: '#8ec6ad',
                        shadowColor: '#8ec6ad',
                        shadowBlur: 20
                        // width:1
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    // smooth:true, //是否平滑曲线显示。
                    symbol: 'none' //标记的图形。
                    // label:{ //图形上的文本标签
                    //     show:true
                    // }

                }]
            }
            myChart.setOption(option);
            $(window).on('resize', function () { //屏幕大小自适应，重置容器高宽
                myChart.resize();
            });
        }
        render('item1'); //初始化图表

        //tab栏切换
        $("li").on('click', function () {           
            myChart.dispose(); //销毁所有实例
            var index = $(this).index();
            $(this).addClass("active").siblings("li").removeClass("active");
            $(".box .item:eq(" + index + ")").addClass("active").siblings(".item").removeClass("active");
            //给当前显示容器渲染图表
            if (index == '0') {
                render('item1');
            } else if (index == '1') {
                render('item2');
            } else if (index == '2') {
                render('item3');
            }
        });
    </script>
</body>

</html>