解决echarts图宽度自适应问题,设置100%宽度显示100px
1、原因:这里是因为你的echarts图表的盒子使用了v-show或class隐藏样式引起的图表在执行js初始化的时候找不到这个元素,所以自动将“100%”转成了“100”,最后计算出来的图表就成了100px。
2、解决方法:既然要保证初始化时DOM元素已经渲染,那么我们可以使用v-if,并搭配nextTick()实现echarts图表异步加载,让其走在DOM渲染之后。
3、代码
<div class="chart_position">
<!-- 柱状图 -->
<div id="mainThree" class="chartBar_box" v-if="showFlag"> </div>
</div>
const showFlag = ref(false);
if (progressDataArray.value.length > 0) {
showFlag.value = true;
nextTick(() => {
onEchartsThree();
});
} else {
showFlag.value = false;
}
.chartBar_box {
width: 100%;
height: 240px;
}