this is the first small work that combines vue and django experiments. The problem occurs when the data is not available. Cannot be displayed in the thermal map. Please give me some advice. Thank you!

this is a vue component with the following code:

<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: "",
      // 
      bookList: [],
      // 
      pageSize: 10,
      // 
      currentPage: 1,
      // 
      totalCount: 1000,
      // 
      query: "",
      //
      heatmapValue:"",
    };
  },
  mounted: function() {
    this.showBooks();
    this.getHeatmapValue();
    this.calHeatMap();
  },
  methods: {
    calHeatMap() {
      var cal = new CalHeatMap();
      cal.init({
        itemSelector: "-sharpcal-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("");
            console.log(res["msg"]);
          }
        });
    },
</script>