這是第一次結(jié)合vue和django實驗的一個小作品。問題出現(xiàn)在獲取不到數(shù)據(jù)。無法顯示在熱力圖中。請大神指點一二，謝謝！

這是一個vue 組件，代碼如下：

<template>

    <el-row type="flex" class="row-bg" justify="center">
      <div id="cal-heatmap"></div>
    </el-row>
    
</template>    

<script>
import CalHeatMap from "cal-heatmap";
export default {
  name: "home",
  filters: {
    date(val) {
      return moment(val).calendar();
    }
  },
  data() {
    return {
      input: "",
      // 當前數(shù)據(jù)
      bookList: [],
      // 默認每頁數(shù)量
      pageSize: 10,
      // 當前頁碼
      currentPage: 1,
      // 默認數(shù)據(jù)總數(shù)
      totalCount: 1000,
      // 搜索內(nèi)容
      query: "",
      //熱力圖
      heatmapValue:'',
    };
  },
  mounted: function() {
    this.showBooks();
    this.getHeatmapValue();
    this.calHeatMap();
  },
  methods: {
    calHeatMap() {
      var cal = new CalHeatMap();
      cal.init({
        itemSelector: "#cal-heatmap",
        domain: "month",
        data: this.heatmapValue,
        start: new Date(2017, 12),
        end: new Date(2018,12),
        cellSize: 9,
        range: 12,
        legend: [6, 10, 14, 20],
        legendHorizontalPosition: "right",
        itemName: ["張卡片", "張卡片"],
        subDomainDateFormat: function(date) {
          return moment(date).calendar();
        }
      });
      // return cal;
    },
    getHeatmapValue(){
      this.$http
        .get(
          "http://127.0.0.1:8000/api/heatmap_value",
          {
            params: {}
          },
          { emulateJSON: true }
        )
        .then(response => {
          var res = JSON.parse(response.bodyText);
          console.log(res);
          
          if (res.error_num == 0) {
            this.heatmapValue = res["heatmapValue"];
            console.log(this.heatmapValue)
          } else {
            this.$message.error("獲取數(shù)據(jù)失敗");
            console.log(res["msg"]);
          }
        });
    },
</script>