50 如何引入一个数据可视化大屏应用的方法和步骤?

发布于 2022-06-20 16:59:48

我现在对如何运行、如果创建一个crud已经没有问题了。
现在希望根据drf返回的数据创建一个数据大屏。
数据大屏的原型以及文件都有了,我不清楚按照怎样的步骤去做。
vue项目参考大屏代码开源地址
在线参考地址
我希望大佬能提供具体的操作步骤和方法。
另外本例是数据写在文件中,如何调用api。
真的是前端一无所知,希望能详尽,如果有完整demo会另谢。

查看更多

关注者
0
被浏览
124
xiaodaocao
xiaodaocao 3 days ago
This guy hasn't written anything yet

需要了解VUE文件的基本格式
<template></template>
<script></script>
......
比如 在template中使用Elementplus

<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
  <line-chart :chart-data="lineChartData" />
</el-row>

引入了lineChartData

那么 在<script>中
类似 这样写

<script>
import axios from 'axios';
import LineChart from "./dashboard/LineChart";

const defaultLineChartData = {
 newVisitis: {
   expectedData: [50,50,50,50,50,50,50],
   actualData: [50,50,50,50,50,50,50],
 }
};
export default {
 name: "DashboardAdmin",
 components: {
   LineChart,
 },
 data() {
   return {
     lineChartData: defaultLineChartData.newVisitis
   };
 },
 mounted() 
   this.getData();
 },
 methods: {
   handleSetLineChartData(type) {
     this.lineChartData = defaultLineChartData[type];
   },
   getData() {
     axios.get('/test.json').then(response => {
       console.log(response.data.actualData);
       this.lineChartData =response.data      });

     // setTimeout(() => { 
     //   const data = {
     //     "expectedData": [100, 80, 161, 134, 105, 60, 165],
     //     "actualData": [120, 50, 91, 190, 162, 20, 130]
     //   }
     //   this.lineChartData = data;
     // }, 3000)
   },
 }
};
</script>
3 个回答
ins
ins 4 days ago
This guy hasn't written anything yet

这个就是需要把固定的数据变成动态的。而这个动态数据又是从api获取的。
这个需要去看下vue中关于axios请求数据的标准写法。另外注意跨域请求。如果问题,我可以远程帮助。

hongzai
hongzai 认证专家 5 days ago
life is coding

很简单,我也是做数据可视化的,我这里也有案例,首先说一下思路
1.第一步,在vue生命周期函数里mounted里获取后端数据
2.渲染echart图表
image.png
image.png
image.png
image.png

我这里的做法是每一个图表都封装成了一个组件,并通过prop传值方式渲染数据,在总的页面只查询一次以减少查询接口的次数的目的

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友

手机
浏览

扫码手机浏览