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)語句
//實(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>效果如下：
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Vue.js一些問題和思考學(xué)習(xí)筆記（1）
這篇文章主要為大家分享了關(guān)于Vue.js一些問題和思考的學(xué)習(xí)筆記,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Vue下拉框雙向聯(lián)動(dòng)效果,實(shí)現(xiàn)聯(lián)動(dòng)，大家都知道在vue的頁面中，想要實(shí)現(xiàn)多個(gè)<el-select 下拉框的值動(dòng)態(tài)改變，必須要調(diào)用@change 函數(shù)，具體操作方法跟隨小編一起學(xué)習(xí)下吧2022-04-04
vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí)
這篇文章主要為大家介紹了vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-11-11
vue.js 實(shí)現(xiàn)評(píng)價(jià)五角星組件的實(shí)例代碼
這篇文章主要介紹了vue.js 實(shí)現(xiàn)評(píng)價(jià)五角星組件的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
Vue實(shí)現(xiàn) 點(diǎn)擊顯示再點(diǎn)擊隱藏效果(點(diǎn)擊頁面空白區(qū)域也隱藏效果)
這篇文章主要介紹了Vue實(shí)現(xiàn) 點(diǎn)擊顯示 再點(diǎn)擊隱藏 點(diǎn)擊頁面空白區(qū)域也隱藏效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Vue.js條件渲染和列表渲染以及Vue中key值的內(nèi)部原理
這篇文章主要介紹了Vue.js條件渲染和列表渲染，以及Vue中key值的內(nèi)部原理，文中有詳細(xì)的代碼示例，感興趣的同學(xué)可以參考閱讀2023-04-04
在vue3.x中vuex調(diào)取值在html代碼里可以直接使用vue2.x的方法,但是在js里與vue2.x就有了那么一丟丟的不同,下面這篇文章主要給大家介紹了關(guān)于Vue3中Vuex詳細(xì)使用的相關(guān)資料,需要的朋友可以參考下2022-07-07
Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式實(shí)例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)拖拽穿梭框功能四種方式,使用原生js實(shí)現(xiàn)拖拽，VUe使用js實(shí)現(xiàn)拖拽穿梭框，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
本篇文章主要介紹了Vue的加載順序探討，詳細(xì)的介紹了加載順序以及如何判斷所有的子組件加載完成。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
解決vue keep-alive 數(shù)據(jù)更新的問題
今天小編就為大家分享一篇解決vue keep-alive 數(shù)據(jù)更新的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09