vue摸板 大数据_Vue和DataV强强联合,这个大数据可视化模板你一定要拥有
项目名称:vue-big-screen
项目作者:奔跑的面条
开源许可协议:Apache-2.0
项目简介一个基于 vue、datav、Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新渲染,内部图表可实现自由替换。部分图表使用 DataV 自带组件,可进行更改。
项目需要全屏展示(按 F11)。
项目部分区域使用了全局注册方式,增加了打包体积,在实际运用中请使用按需引入。
拉取项目之后,建议按照自己的功能区域重命名文件,现以简单的位置进行区分。
项目环境:vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。
项目展示
主要文件介绍
使用介绍
1.如何启动项目
需要提前安装好nodejs与npm,下载项目后在项目主目录下运行npm/cnpm install拉取依赖包,然后使用 vue-cli 或者直接使用命令npm run serve,就可以启动项目,启动项目后需要手动全屏(按 F11)。
2.如何请求数据
现在的项目未使用前后端数据请求,建议使用 axios 进行数据请求,在 main.js 位置进行全局配置,在 views/xx.vue 文件里进行前后端数据请求。axios 的 main.js 配置参考范例(因人而异)
import axios from "axios";
//把方法放到vue的原型上,这样就可以全局使用了Vue.prototype.$http = axios.create({
//设置20秒超时时间 timeout: 20000,
baseURL: "http://172.0.0.1:80080", //这里写后端地址});在 vue 页面中调用 axios 方法并通过 props 传给 echarts 图表子组件
export default {
data() {
ListDataSelf:[]
},
mounted() {
this.fetchList(); //获取数据 },
methods: {
async fetchList(){
const { code,listData }= await this.$http.get("xx/xx/xx"x);
if(code === 200){
this.ListDataSelf= listData;
}
}
}
}
3.如何动态渲染图表
在components/echart下的文件,比如drawPie()是渲染函数,echartData是需要动态渲染的数据,当外界通过props传入新数据,我们可以使用watch()方法去监听,一但数据变化就调用this.drawPie()并触发内部的.setOption函数,重新渲染一次图表。
//这里是子组件内部
props: ["listData"],
watch: {
listData(newValue) {
this.echartData= newValue;
this.drawPie();
},
},
methods: {
drawPie() {
.....
'渲染节点名称'.setOption(option);
}
}
以上就是对这个 Vue 大屏项目的简单介绍,如果你想看到更详细的文档,那就点击后面的链接前往项目主页看看吧:https://gitee.com/MTrun/big-screen-vue-datav
vue摸板 大数据_Vue和DataV强强联合,这个大数据可视化模板你一定要拥有相关推荐
- vue 怎么样不重复往数组里插入数据_Vue.js在数组中插入重复数据的实现代码分享...
1.在默认的情况下,Vue.js默认不支持往数组中加入重复的数据.可以使用track-by="$index"来实现. 2.不使用track-by="$index" ...
- 1万条数据大概占多大空间_Vue - Table表格渲染上千数据优化
这次项目经验会谈谈经常在项目中,针对成千上万数据渲染优化的不断探索来谈谈自己的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操作过程中不会出现UI卡顿或者最糟糕的情况,直接浏览器 ...
- vue接收json数据_Vue之使用ajax获取json数据,并用v-for循环显示在表格中
运行的时候,出现了php跨域问题,解决办法是在php的头文件中添加了如下代码: header('Content-Type: application/json'); header('Content-Ty ...
- vue渲染大量数据如何优化_Vue - Table表格渲染上千数据优化
Vue - Table表格渲染上千数据优化 此次项目经验会谈谈常常在项目中,针对成千上万数据渲染优化的不断探索来谈谈本身的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操做过程当 ...
- 海量大数据大屏分析展示一步到位:DataWorks数据服务对接DataV最佳实践
概述 数据服务(https://ds-cn-shanghai.data.a... 是DataWorks产品家族的一员,提供了快速将数据表生成API的能力,通过可视化的向导,一分钟"零代码&q ...
- vue如何把数组转为json数组_vue.js,_vuejs Ajax取得一个数据json数组,vue.js - phpStudy...
vuejs Ajax取得一个数据json数组 vuejs Ajax取得一个数据json数组后,要通取回的数据再做判断一定只能通这种方式或者 套template标签 {{item.displayWord ...
- 海量大数据大屏分析展示一步到位:DataWorks数据服务对接DataV最佳实践 1
为什么80%的码农都做不了架构师?>>> 1. 概述 数据服务(https://ds-cn-shanghai.data.aliyun.com) 是DataWorks产品家族的 ...
- vue获取当前选中行的数据_Vue编程的团队代码规范
来源:https://www.javascriptcn.com/read-5ecef0f64d553e7cc39e1aba.html 规范与每个团队和个人都是息息相关的,因为其影响的不只是只是代码的维 ...
- 阿里云大数据认证——使用DataV制作实时销售数据可视化大屏-课堂笔记
原文链接:https://juejin.im/post/5c735004e51d45454b62dad5 阿里云Clouder认证 五.使用DataV制作实时销售数据可视化大屏 1. 课程目标 (1) ...
最新文章
- php tab标签,JavaScript代码分享:tab标签的切换
- python三大神器之生成器
- java中toString的使用
- nsswitch.conf文件详解
- golang 中 map 转 struct
- Python正则表达式介绍 re.findall(pattern, str, flag=0)/re.I re.L re.M
- VS2005 there is no source code available for the current location 解决方案
- SSH:WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
- 15寸计算机显示器,苹果确认15寸RMBP支持全球首款5K显示器
- 树形结构叶子节点的作用_树形结构的算法
- 上采样、下采样到底是什么?
- 分区助手克隆linux,PartAssist 9.1+7.0 AOMEI 分区助手 免安装版 (简/繁/英 PE/Win 通用)...
- C#迷宫Winform小游戏,生成可连通的迷宫地图
- 淘宝API接口调用:item_search_img - 按图搜索淘宝商品(拍立淘)
- java中isolate时间_Dart异步编程:Isolate和事件循环
- Error: ADB exited with exit code 1 Performing Streamed Install adb: failed to install D:\svn\app\sm
- 生死看淡,不服就GAN(四)---- 用全连层GAN生成MNIST手写体
- 实战虚拟化存储设计之LUN Sizing
- VulnHub-XXE
- SAP MM批次切换
热门文章
- source insight常用命令--实际使用中比较常用的
- 分享-利用VPC防止病毒软件的进入你的windows电脑
- 01_MySQL基础课堂笔记
- 计算机系统结构 期末复习
- android动态加home,Android 解决监听home键的几种方法
- android getdecorview 出现空指针,android – 为什么我从TabWidget得到一个空指针异常?...
- 计算机 运行新ie 命令,(新)计算机应用基础IE浏览器设置学习笔记——精品.doc
- linux la 的使用方法,Linux简介及常用命令使用4--linux高级命令与技巧(示例代码)
- api laravel 统一返回方法_Laravel API 错误处理:当异常时,如何返回消息
- MATLAB GUI的CreateFcn如何创建