Version

V 5.4.2

Link to Minimal Reproduction

https://codesandbox.io/s/trusting-stallman-5m2vpw?file=/test.php

Steps to Reproduce

when i put a chart in a layui card, it can be reponsive and displayed normally. but when i add a layui crousal in the card container, it only paint the left side of the the canvas.i have checked css of layui.crousal, and the atrribute width is set as "100%".So i think it might be something wrong with echarts.

<div class="layui-card" >
    <div class="layui-card-header">个人已完成工作统计</div>
    <div class="layui-card-body">
        <div class="layui-carousel " id="ID-carousel-demo">
            <div carousel-item >
                <div id="main1" style="width:774px ;height:400px;background-color: #fff"></div>
                <div></div>
            </div>
        </div>
    </div>
</div>

<script>

var difficulty_evaluation_Series = {
    // name: '难度评价图',
    type: 'heatmap',
    itemStyle: {},
    label: {
        show: true
    },
    emphasis: {
        itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    },
    data: []
};

var options = {
        title: {},
        tooltip: {
            axisPointer: {
                type: 'shadow'
            },
            position: 'right',
            formatter: function (obj) {
                var value = obj.value;
                // prettier-ignore
                return "难度" + '：' + value[1] + '<br>'
                    + "评价" + '：' + value[0] + '<br>'
                    + "数量" + '：' + value[2] + '<br>';
            }
        },
        visualMap: {
            min: 0,
            max: 25,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '0%',
            // inRange: {
            //     color: ['blue', 'red'] // Specify the color range for values above zero
            // },
            // pieces: [
            //     // Add an additional visual mapping for zero value
            //     { value: 0, color: 'white'  }
            // ]
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: '5%',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: true},
                // magicType: {show: true, type: ['bar', 'line']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {},
        grid: {
            height: '70%',
            top: '13%',
            containLabel: true
        },
        xAxis: {
            name: '评价',
            type: 'category',
            axisLabel: {
                formatter: '{value} 星'
            },
            nameTextStyle: {
                fontSize: 16
            },
            splitLine: {
                show: true
            },
            data:["未评价没","1","2","3","4","5"]
        },
        yAxis: {
            name: '难度',
            type: 'category',
            axisLabel: {
                formatter: '{value} 级'
            },
            nameTextStyle: {
                fontSize: 16
            },
            splitArea: {
                show: true
            },
            data:[1,2,3,4,5,6,7,8,9,10]
        },
        series: [difficulty_evaluation_Series]
    };

    //渲染chart
    options && chart1.setOption(options);
    //界面尺寸自适应
    window.addEventListener('resize', function () {
        chart1.resize();
    });
</script>

<script>
    layui.use(function(){
        var carousel = layui.carousel;
        // 渲染 - 常规轮播
        carousel.render({
            elem: '#ID-carousel-demo',
            // width: '100%',
            height: '400px',
            width: 'auto',
            indicator: 'card_head',
            autoplay: 'true'
        });
    });
</script>

Current Behavior

Expected Behavior

Environment

- OS: win 10
- Browser: Microsoft Edge 版本 114.0.1823.58 (正式版本) (64 位)
- Framework: layui 2.7.6

Any additional comments?

No response