echarts nextTick

src/views/quality/qualityMeasurement.vue

@@ -373,22 +373,22 @@
             </el-table>
           </el-tab-pane>
           <el-tab-pane v-if="pauseKey !== 5" label="数据视图" name="third">
-            <h4>1. 上线次数<span v-show="isTotalShowMountOrRateOrTotal" class="emptyEcharts">( 暂无数据～ )</span></h4>
-            <div v-show="!isTotalShowMountOrRateOrTotal" id="totalShow" style="width: 100%; height: 400px" />
-            <h4>2. 全量回滚数/裸奔上线数/小流量回滚数<span v-show="isTotalShowMountOrRateOrTotal" class="emptyEcharts">( 暂无数据～ )</span></h4>
-            <div v-show="!isTotalShowMountOrRateOrTotal" id="totalShowMount" style="width: 100%; height: 400px" />
-            <h4>3. 全量回滚率/裸奔上线率/小流量回滚率<span v-show="isTotalShowMountOrRateOrTotal" class="emptyEcharts">( 暂无数据～ )</span></h4>
-            <div v-show="!isTotalShowMountOrRateOrTotal" id="totalShowRate" style="width: 100%; height: 400px" />
+            <h4>1. 上线次数<span v-if="isTotalShowMountOrRateOrTotal" class="emptyEcharts">( 暂无数据～ )</span></h4>
+            <div v-if="!isTotalShowMountOrRateOrTotal" id="totalShow" style="width: 100%; height: 400px" />
+            <h4>2. 全量回滚数/裸奔上线数/小流量回滚数<span v-if="isTotalShowMountOrRateOrTotal" class="emptyEcharts">( 暂无数据～ )</span></h4>
+            <div v-if="!isTotalShowMountOrRateOrTotal" id="totalShowMount" style="width: 100%; height: 400px" />
+            <h4>3. 全量回滚率/裸奔上线率/小流量回滚率<span v-if="isTotalShowMountOrRateOrTotal" class="emptyEcharts">( 暂无数据～ )</span></h4>
+            <div v-if="!isTotalShowMountOrRateOrTotal" id="totalShowRate" style="width: 100%; height: 400px" />
             <h4>4. 线上问题数<span v-if="isTotalShowOnline" class="emptyEcharts">( 暂无数据～ )</span></h4>
             <div v-if="!isTotalShowOnline" id="totalShowOnline" style="width: 100%; height: 400px" />
           </el-tab-pane>
           <el-tab-pane v-if="pauseKey !== 5" label="数据比对" name="forth">
-            <h4>1. 上线次数<span v-show="isTotalShowMountOrRateOrTotal" class="emptyEcharts">( 暂无数据～ )</span></h4>
-            <div v-show="!isTotalShowMountOrRateOrTotal" id="comparatorBetween" style="width: 100%; height: 400px" />
-            <h4>2. 全量回滚数/裸奔上线数/小流量回滚数<span v-show="isTotalShowMountOrRateOrTotal" class="emptyEcharts">( 暂无数据～ )</span></h4>
-            <div v-show="!isTotalShowMountOrRateOrTotal" id="comparatorMountBetween" style="width: 100%; height: 400px" />
-            <h4>3. 全量回滚率/裸奔上线率/小流量回滚率<span v-show="isTotalShowMountOrRateOrTotal" class="emptyEcharts">( 暂无数据～ )</span></h4>
-            <div v-show="!isTotalShowMountOrRateOrTotal" id="comparatorRateBetween" style="width: 100%; height: 400px" />
+            <h4>1. 上线次数<span v-if="isTotalShowMountOrRateOrTotal" class="emptyEcharts">( 暂无数据～ )</span></h4>
+            <div v-if="!isTotalShowMountOrRateOrTotal" id="comparatorBetween" style="width: 100%; height: 400px" />
+            <h4>2. 全量回滚数/裸奔上线数/小流量回滚数<span v-if="isTotalShowMountOrRateOrTotal" class="emptyEcharts">( 暂无数据～ )</span></h4>
+            <div v-if="!isTotalShowMountOrRateOrTotal" id="comparatorMountBetween" style="width: 100%; height: 400px" />
+            <h4>3. 全量回滚率/裸奔上线率/小流量回滚率<span v-if="isTotalShowMountOrRateOrTotal" class="emptyEcharts">( 暂无数据～ )</span></h4>
+            <div v-if="!isTotalShowMountOrRateOrTotal" id="comparatorRateBetween" style="width: 100%; height: 400px" />
             <h4>4. 线上问题数<span v-if="isTotalShowOnline" class="emptyEcharts">( 暂无数据～ )</span></h4>
             <div v-if="!isTotalShowOnline" id="comparatorOnlineBetween" style="width: 100%; height: 400px" />
           </el-tab-pane>
@@ -638,68 +638,70 @@ export default {
               product: eachName,
               [pauseArr[0]]: this.visualizationData[index].totalOnlineNum
             }))
-            const totalOneEcharts = echarts.init(document.getElementById('comparatorBetween'))
-            const totalOneEchartsMount = echarts.init(document.getElementById('comparatorMountBetween'))
-            const totalOneEchartsRate = echarts.init(document.getElementById('comparatorRateBetween'))
-            // const totalOneEchartsOnline = echarts.init(document.getElementById('comparatorOnlineBetween'))
-            totalOneEcharts.setOption({
-              legend: {},
-              tooltip: {},
-              grid: { containLabel: true },
-              dataset: {
-                dimensions: ['product', ...pauseArr],
-                source: this.seriesDeal
-              },
-              xAxis: { type: 'category', 'axisLabel': { interval: 0, rotate: 40 }},
-              yAxis: {},
-              // Declare several bar series, each will be mapped
-              // to a column of dataset.source by default.
-              series: [
-                { type: 'bar' }
-              ]
-            })
-            totalOneEchartsMount.setOption({
-              legend: {},
-              tooltip: {},
-              grid: { containLabel: true },
-              dataset: {
-                dimensions: ['product', ...pauseArrOthersMount],
-                source: this.seriesDealOthersMount
-              },
-              xAxis: { type: 'category', 'axisLabel': { interval: 0, rotate: 40 }},
-              yAxis: {},
-              // Declare several bar series, each will be mapped
-              // to a column of dataset.source by default.
-              series: [
-                { type: 'bar' },
-                { type: 'bar' },
-                { type: 'bar' }
-              ]
-            })
-            totalOneEchartsRate.setOption({
-              legend: {},
-              tooltip: {},
-              grid: { containLabel: true },
-              dataset: {
-                dimensions: ['product', ...pauseArrOthersMountRate],
-                source: this.seriesDealOthersRate
-              },
-              xAxis: { type: 'category', 'axisLabel': { interval: 0, rotate: 40 }},
-              yAxis: {},
-              // Declare several bar series, each will be mapped
-              // to a column of dataset.source by default.
-              series: [
-                { type: 'bar' },
-                { type: 'bar' },
-                { type: 'bar' }
-              ]
-            })
-            window.onresize = () => {
-              totalOneEcharts.resize()
-              totalOneEchartsMount.resize()
-              totalOneEchartsRate.resize()
+            this.$nextTick(() => {
+              const totalOneEcharts = echarts.init(document.getElementById('comparatorBetween'))
+              const totalOneEchartsMount = echarts.init(document.getElementById('comparatorMountBetween'))
+              const totalOneEchartsRate = echarts.init(document.getElementById('comparatorRateBetween'))
+              // const totalOneEchartsOnline = echarts.init(document.getElementById('comparatorOnlineBetween'))
+              totalOneEcharts.setOption({
+                legend: {},
+                tooltip: {},
+                grid: { containLabel: true },
+                dataset: {
+                  dimensions: ['product', ...pauseArr],
+                  source: this.seriesDeal
+                },
+                xAxis: { type: 'category', 'axisLabel': { interval: 0, rotate: 40 }},
+                yAxis: {},
+                // Declare several bar series, each will be mapped
+                // to a column of dataset.source by default.
+                series: [
+                  { type: 'bar' }
+                ]
+              })
+              totalOneEchartsMount.setOption({
+                legend: {},
+                tooltip: {},
+                grid: { containLabel: true },
+                dataset: {
+                  dimensions: ['product', ...pauseArrOthersMount],
+                  source: this.seriesDealOthersMount
+                },
+                xAxis: { type: 'category', 'axisLabel': { interval: 0, rotate: 40 }},
+                yAxis: {},
+                // Declare several bar series, each will be mapped
+                // to a column of dataset.source by default.
+                series: [
+                  { type: 'bar' },
+                  { type: 'bar' },
+                  { type: 'bar' }
+                ]
+              })
+              totalOneEchartsRate.setOption({
+                legend: {},
+                tooltip: {},
+                grid: { containLabel: true },
+                dataset: {
+                  dimensions: ['product', ...pauseArrOthersMountRate],
+                  source: this.seriesDealOthersRate
+                },
+                xAxis: { type: 'category', 'axisLabel': { interval: 0, rotate: 40 }},
+                yAxis: {},
+                // Declare several bar series, each will be mapped
+                // to a column of dataset.source by default.
+                series: [
+                  { type: 'bar' },
+                  { type: 'bar' },
+                  { type: 'bar' }
+                ]
+              })
+              window.onresize = () => {
+                totalOneEcharts.resize()
+                totalOneEchartsMount.resize()
+                totalOneEchartsRate.resize()
               // totalOneEchartsOnline.resize()
-            }
+              }
+            })
           }
           if (resProblem.data === null || resProblem.data.length === 0) {
             this.visualizationDataOnline = []
@@ -778,40 +780,42 @@ export default {
               type: 'line',
               data: this.visualizationData.map(eachData => eachData.totalOnlineNum)
             }))
-            const totalOneEcharts = echarts.init(document.getElementById('totalShow'))
-            const totalOneEchartsMount = echarts.init(document.getElementById('totalShowMount'))
-            const totalOneEchartsRate = echarts.init(document.getElementById('totalShowRate'))
-            // const totalOneEchartsOnline = echarts.init(document.getElementById('totalShowOnline'))
-            totalOneEcharts.setOption({
-              tooltip: { trigger: 'axis' },
-              legend: { data: pauseArr },
-              grid: { containLabel: true },
-              xAxis: { type: 'category', boundaryGap: false, data: this.xAxisDeal, 'axisLabel': { interval: 0 }},
-              yAxis: { type: 'value' },
-              series: this.seriesDeal
-            })
-            totalOneEchartsMount.setOption({
-              tooltip: { trigger: 'axis' },
-              legend: { data: pauseArrOthersMount },
-              grid: { containLabel: true },
-              xAxis: { type: 'category', boundaryGap: false, data: this.xAxisDeal, 'axisLabel': { interval: 0 }},
-              yAxis: { type: 'value' },
-              series: this.seriesDealOthersMount
-            })
-            totalOneEchartsRate.setOption({
-              tooltip: { trigger: 'axis' },
-              legend: { data: pauseArrOthersMountRate },
-              grid: { containLabel: true },
-              xAxis: { type: 'category', boundaryGap: false, data: this.xAxisDeal, 'axisLabel': { interval: 0 }},
-              yAxis: { type: 'value' },
-              series: this.seriesDealOthersRate
-            })
-            window.onresize = () => {
-              totalOneEcharts.resize()
-              totalOneEchartsMount.resize()
-              totalOneEchartsRate.resize()
+            this.$nextTick(() => {
+              const totalOneEcharts = echarts.init(document.getElementById('totalShow'))
+              const totalOneEchartsMount = echarts.init(document.getElementById('totalShowMount'))
+              const totalOneEchartsRate = echarts.init(document.getElementById('totalShowRate'))
+              // const totalOneEchartsOnline = echarts.init(document.getElementById('totalShowOnline'))
+              totalOneEcharts.setOption({
+                tooltip: { trigger: 'axis' },
+                legend: { data: pauseArr },
+                grid: { containLabel: true },
+                xAxis: { type: 'category', boundaryGap: false, data: this.xAxisDeal, 'axisLabel': { interval: 0 }},
+                yAxis: { type: 'value' },
+                series: this.seriesDeal
+              })
+              totalOneEchartsMount.setOption({
+                tooltip: { trigger: 'axis' },
+                legend: { data: pauseArrOthersMount },
+                grid: { containLabel: true },
+                xAxis: { type: 'category', boundaryGap: false, data: this.xAxisDeal, 'axisLabel': { interval: 0 }},
+                yAxis: { type: 'value' },
+                series: this.seriesDealOthersMount
+              })
+              totalOneEchartsRate.setOption({
+                tooltip: { trigger: 'axis' },
+                legend: { data: pauseArrOthersMountRate },
+                grid: { containLabel: true },
+                xAxis: { type: 'category', boundaryGap: false, data: this.xAxisDeal, 'axisLabel': { interval: 0 }},
+                yAxis: { type: 'value' },
+                series: this.seriesDealOthersRate
+              })
+              window.onresize = () => {
+                totalOneEcharts.resize()
+                totalOneEchartsMount.resize()
+                totalOneEchartsRate.resize()
               // totalOneEchartsOnline.resize()
-            }
+              }
+            })
           }
           if (resProblem.data === null || resProblem.data.length === 0) {
             this.visualizationDataOnline = []
@@ -999,6 +1003,7 @@ export default {
         return
       } else if ((this.pauseKey === 0 && this.activeIndexSecondary === 'third') || (this.pauseKey === 3 && this.activeIndexSecondary === 'third')) {
         this.guild = this.treeGuide(this.dealWithBusinessDate, this.pauseTreeNode.id, this.pauseTreeNode.type).join('/')
+        console.log(1)
         this.visualizationDataGet()
         return
       } else if ((this.pauseKey === 0 && this.activeIndexSecondary === 'forth') || (this.pauseKey === 3 && this.activeIndexSecondary === 'forth')) {