vue 结合django,问题出现在热力图获取不到数据
这是第一次结合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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
什么报错都不给 准备我猜吗