技術標籤：視覺化演算法javascript陣列索引

echarts資料視覺化專案經驗積累

echarts圖表在初始化時可以在mounted中。

// An highlighted block
mounted() {
    this.myChart = this.$echarts.init(document.getElementById('raderGraph'));
  }

將從伺服器端獲取的資料顯示在介面上5列三行一列三個
遍歷從伺服器端獲取的資料，得到索引值。
然後對3取商和餘數。商代表在第幾列，餘數代表在第幾個。

// 獲取商和餘數的方法
 JsNum(num1, num2) {
      let
 
 Num = parseFloat(num1 / num2);
      let result = "";
      let a = Math.floor(Num);
      let b = parseInt(num1 % num2);
      result = [a, b]
      return result;
    },

先求出x座標

    coordinatesX(index) {
      let stat_x = 18.5;//初始位置
      let result = this.JsNum(index, this.col_count)
      let
 
 shang = result[0];//獲取商
      let remainder = result[1];
      return (stat_x + shang * 16) + "%"//商的結果為0，1，2，3，4

    },

再求出y的座標

// An highlighted block
 coordinatesY(index) {
      let stat_y = 61;
      let result = this.JsNum(index, this.col_count)
      let shang = result[0];
      let remainder =
 
 result[1];//獲取餘數
      //接頭要s形排列，對2取餘，偶數列向下，奇數列向上
      if (shang % 2 === 0) {
        return (stat_y + remainder * 12) + "%";
      } else {
        return (stat_y + (this.col_count - 1) * 12) - (remainder * 12) + "%";
      }
    },
    //(stat_y + (this.col_count - 1) * 12)先使y到最大，再依次減(remainder * 12)