ulee19 opened a new issue, #18830: URL: https://github.com/apache/echarts/issues/18830
### 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 ```markdown - OS: win 10 - Browser: Microsoft Edge 版本 114.0.1823.58 (正式版本) (64 位) - Framework: layui 2.7.6 ``` ### Any additional comments? _No response_ -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
