vue彈窗里面使用echarts不顯示的問題及解決

更新時間：2023年01月23日 12:40:57 作者：呱呱?.?

這篇文章主要介紹了vue彈窗里面使用echarts不顯示的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

前言

彈出層中插入echarts圖表，沒有報錯，但是圖表加載不出來

此彈出層沒有用element 的dialog 對話框，用的自己封裝的組件，但是出現(xiàn)的問題是一樣的

原因分析

彈出層的內(nèi)容是懶渲染的，即在第一次被打開之前，傳入的默認(rèn) slot 不會被渲染到 DOM 上。

彈出層組件會監(jiān)聽 visible 的狀態(tài)，當(dāng)狀態(tài)為 true 時，立刻觸發(fā) open 事件，但這個時候彈出層的內(nèi)容還沒有渲染。

因為 Vue 組件通過 $emit 觸發(fā)的事件并不是異步執(zhí)行的，而是同步執(zhí)行。

解決方式

一、nextTick

? ? ? this.$nextTick(() => {
? ? ? // ?執(zhí)行echarts方法
? ? ? ? this.initEcharts()
? ? ? })

二、setInterval

?setInterval(() => {
? ? ? ? // ?執(zhí)行echarts方法
? ? ? ? this.initEcharts()
? ? ? }, 500);

彈出層組件和畫圖方法：

? ? <popup :tClick="retreatFromSave" :tBoot="organizationUp" tWidth='1080px'> ?
? ? ? <div slot="main" class="teamwork-text-nr">
? ? ? ? <div class="line">實景圖</div>
?? ? ? ? ? ?<!-- 圖表 -->
?? ? ? ? ? ?<div id="sCharts" style="height: 500px;"></div>
? ? ? ?? ?</div>
? ? ? <div slot="footer" style="text-align: right;padding-right: 30px;">
? ? ? ? <jurisbtn tFloat="none" :tClick="retreatFromSave" tName="關(guān)閉" type="primary"></jurisbtn>
? ? ? </div>
? ? </popup>

? ? // ? 圖表
? ? initEcharts() {
? ? ? const myChart = this.$echarts.init(document.getElementById('sCharts'))
? ? ? const option = {
? ? ? ? tooltip: {
? ? ? ? ? trigger: 'axis',
? ? ? ? ? axisPointer: {
? ? ? ? ? ? type: 'cross'
? ? ? ? ? }
? ? ? ? },
? ? ? ? xAxis: [
? ? ? ? ? {
? ? ? ? ? ? type: 'category',
? ? ? ? ? ? data: [
? ? ? ? ? ? ? '1月',
? ? ? ? ? ? ? '2月',
? ? ? ? ? ? ? '3月',
? ? ? ? ? ? ? '4月',
? ? ? ? ? ? ? '5月',
? ? ? ? ? ? ? '6月',
? ? ? ? ? ? ? '7月',
? ? ? ? ? ? ? '8月',
? ? ? ? ? ? ? '9月',
? ? ? ? ? ? ? '10月',
? ? ? ? ? ? ? '11月',
? ? ? ? ? ? ? '12月'
? ? ? ? ? ? ],
? ? ? ? ? ? axisPointer: {
? ? ? ? ? ? ? type: 'shadow'
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ],
? ? ? ? yAxis: [
? ? ? ? ? {
? ? ? ? ? ? type: 'value',
? ? ? ? ? ? name: '總體積',
? ? ? ? ? ? min: 0,
? ? ? ? ? ? max: 10,
? ? ? ? ? ? interval: 1,
? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? formatter: '{value} m3'
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? type: 'value',
? ? ? ? ? ? name: '使用負(fù)荷',
? ? ? ? ? ? min: 0,
? ? ? ? ? ? max: 100,
? ? ? ? ? ? interval: 10,
? ? ? ? ? ? axisLabel: {
? ? ? ? ? ? ? formatter: '{value} %'
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ],
? ? ? ? series: [
? ? ? ? ? {
? ? ? ? ? ? name: '總體積',
? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? data: [2.0, 4.9, 5.5, 2.2, 4.6, 6.7, 5.6, 6.2, 3.6, 2.0, 6.4, 3.3],
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? color: '#d0e17d'
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: '使用負(fù)荷',
? ? ? ? ? ? type: 'line',
? ? ? ? ? ? yAxisIndex: 1,
? ? ? ? ? ? data: [100, 22, 33, 45, 63, 80, 20, 23, 23, 65, 12, 6.2],
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? color: '#898989'
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ]
? ? ? }
? ? ? myChart.setOption(option);
? ? },