vue 结合django,问题出现在热力图获取不到数据

xiangbin
  • 3
新手上路,请多包涵

这是第一次结合vue和django实验的一个小作品。问题出现在获取不到数据。无法显示在热力图中。请大神指点一二,谢谢!

这是一个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: "",
      // 当前数据
      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: "#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("获取数据失败");
            console.log(res["msg"]);
          }
        });
    },
</script>
回复
阅读 2.3k
1 个回答

什么报错都不给 准备我猜吗

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏