請求axios的執行順序問題


mounted() {
       (async () => {
           await this.getParamTypeData(); // 先執行這個在執行下面代碼
           this.drawLine()
       })()
  },

getParamTypeData() { 
    // 必須return 
        return  this.$http.getDictionaryTree({pid:"wq_qt"}).then(res => {
            if (res.code === "CODE_0000") { 
                   this.typeData = res.data;
                 //  this.drawLine();
            }
        });
       
    },
 drawLine() {
        let yName = "";
       if (this.fileName === "waterqualityHistory") {
           yName = `${this.getSelectVal(this.typeData, this.currentRow.type)}(°C)`
       }
      // 基於准備好的dom,初始化echarts實例
      const myCharts = this.$echarts.init(this.$refs.myChartsLine);
      // 繪制圖表
      let options = {
        // title: {
        //   text: "未來一周氣溫變化", //圖表頂部的標題
        //   subtext: "純屬虛構", //副標題
        // },
        grid: {
            left: 15,
            right: 15,
            bottom: 60,
            containLabel: true,
        },
        color: '#409EFF',
        tooltip: {
          //鼠標懸浮框的提示文字
          trigger: "axis",
        },
        legend: {
          data: ["最高氣溫"],
        },
        xAxis: [
          {
            //x軸坐標數據
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
        ],
        yAxis: [
          {
            //y軸坐標數據
            type: "value",
            name: yName,
            // axisLabel: {
            //   formatter: "{value} °C",
            // },
          },
        ],
        dataZoom: this.fileName === "waterqualityHistory" ? null : [{
            type: 'inside',
            start: 0,
            end: 100
        }, {
            start: 0,
            end: 100,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '50%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            },
            bottom: 20
        }],
        series: [
          //驅動圖表生成的數據內容數組,幾條折現,數組中就會有幾個對應對象,來表示對應的折線
          {
            name: "最高氣溫",
            type: "line", //pie->餅狀圖  line->折線圖  bar->柱狀圖
            data: [11, 11, 15, 13, 12, 13, 10],
          },
        ],
      };
      myCharts.setOption(options);
    },

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM