vue中Echarts圖表寬度沒占滿的問題

更新時(shí)間：2022年10月22日 10:37:58 作者：未來可期xm

這篇文章主要介紹了vue中Echarts圖表寬度沒占滿的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue Echarts圖表寬度沒占滿

顯示效果：

在這里插入圖片描述

經(jīng)過測(cè)試，當(dāng)把寬度寫成固定px的時(shí)候，就能正確渲染。

解決方法

1、寬高寫成固定px，針對(duì)寬度不需要自適應(yīng)的大屏。

2、當(dāng)寬度需要自適應(yīng)，父元素需要設(shè)置寬高，可以使用$nextTick 當(dāng)元素寬度發(fā)生改變，只需要等待DOM渲染完成在渲染圖表，這樣就不會(huì)出現(xiàn)問題了。

相似案例：

當(dāng)點(diǎn)擊按鈕使用v-if進(jìn)行圖表切換，同樣會(huì)使出現(xiàn)寬高不占滿情況。

mounted() {
	this.$nextTick( () => {
	  this.drawBar();
	})
}

vue Echarts圖表寬度自適應(yīng)，親測(cè)有效

實(shí)現(xiàn)寬度自適應(yīng)語(yǔ)句

//實(shí)現(xiàn)自適應(yīng)部分
?window.onresize = () => {
? ? ?// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
? ? let myChart = this.$echarts.init(document.getElementById('newEcharts'));
? ? myChart.resize();
};

代碼使用如下：

<template>
? <el-row>
? ? ?<el-col :xs="24" :sm="24" :md="24" :lg="24">
? ? ? ?<div id="newEcharts" style="width:100%;height:400px;padding-top:40px"></div>
? ? ?</el-col>
? </el-row>
</template>
<script>
? ?export default {
? ? data() {
? ? ? return {
? ? ? ? newVisible: false,
? ? ? ? newDialogFormVisible: false,
? ? ? ?
? ? ? };
? ? },
? ? mounted () {
? ? ? this.initEcharts()
? ? ? //實(shí)現(xiàn)自適應(yīng)部分
? ? ? window.onresize = () => {
? ? ? // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
? ? ? ? let myChart = this.$echarts.init(document.getElementById('newEcharts'));
? ? ? ? myChart.resize();
? ? ? ? };
? ? },
? ? methods: {
? ? ? // 創(chuàng)建方法
? ? ? initEcharts() {
? ? ? ? var echarts = require('echarts');
?
? ? ? ? // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
? ? ? ? const myChart = this.$echarts.init(document.getElementById('newEcharts'));
? ? ? ? // 繪制圖表
? ? ? ? ?const option = {
? ? ? ? ? ? title: {
? ? ? ? ? ? ? ? text: 'ECharts 入門示例'
? ? ? ? ? ? },
? ? ? ? ? ? tooltip: {},
? ? ? ? ? ? xAxis: {
? ? ? ? ? ? ? ? data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
? ? ? ? ? ? },
? ? ? ? ? ? yAxis: {},
? ? ? ? ? ? series: [{
? ? ? ? ? ? ? ? name: '銷量',
? ? ? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? ? ? data: [5, 20, 36, 10, 10, 20]
? ? ? ? ? ? }]
? ? ? ? };
? ? ? ? myChart.setOption(option)
? ? ? },
? ? },
? }
</script>

效果如下：