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

发布于 2022-09-06 22:04:18 字数 1950 浏览 21 评论 0

这是第一次结合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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

夜血缘 2022-09-13 22:04:18

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文