数据大屏项目Vue+DataV+Echarts(附源码)

一、项目描述

1 前端项目

1.1 项目简介

一个基于 Vue、datav、Echart 框架的 " 数据大屏项目 "，通过 vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。
项目需要全屏展示（按 F11）。
项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用按需引入。
拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
项目环境：vue-cli-3.0、webpack-4.0、npm-6.13、node-v12.16。
请拉取 master 分支的代码，其余是开发分支。

下载地址：
前端代码（旧版无词云）：前端代码下载
后端代码：后端代码下载
新版：暂未上传代码

旧版：

友情链接：

DataV 官方文档（建议使用之前先浏览）
echarts 实例，echarts 官方文档
Vue 官方文档

1.2 主要文件介绍

文件	作用/功能
main.js	主目录文件，引入Echart/DataV等文件
utils	工具函数与 mixins 函数等
views/ index.vue	项目主结构
views/其余文件	界面各个区域组件（按照位置来命名）ajax 接口请求位置
assets	静态资源目录，放置 logo 与背景图片
assets / style.scss	通用 CSS 文件，全局项目快捷样式调节
assets / index.scss	Index 界面的 CSS 文件
components/echart	所有 echart 图表（按照位置来命名）
common/flexible.js	flexible 插件代码（适配屏幕尺寸，定制化修改）

1.3 使用介绍

如何启动项目

需要提前安装好nodejs与npm,下载项目后在项目主目录下运行npm/cnpm install拉取依赖包，然后使用 vue-cli 或者直接使用命令npm run serve，就可以启动项目，启动项目后需要手动全屏（按 F11）。
如何请求数据

有配套后端项目（下面会讲），建议使用 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;}}}}

如何动态渲染图表

在components/echart下的文件，比如drawPie()是渲染函数，echartData是需要动态渲染的数据，当外界通过props传入新数据，我们可以使用watch()方法去监听，一但数据变化就调用this.drawPie()并触发内部的.setOption函数，重新渲染一次图表。

//这里是子组件内部props: ["listData"],
watch: {listData(newValue) {this.echartData= newValue;this.drawPie();},},
methods: {drawPie() {.....'渲染节点名称'.setOption(option);}}

如何复用图表组件

因为 Echart 图表是根据id/class去获取 Dom 节点并进行渲染的，所以我们只要传入唯一的 id 值与需要的数据就可以进行复用。如中间部分的任务通过率与任务达标率组件就是采用复用的方式。

如：在调用处views/center.vue里去定义好数据并传入组件（项目里的所有id都不能重复!!!）

//组件调用
<span>今日任务通过率</span>
<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" /><span>今日任务达标率</span>
<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />...
import centerChart from "@/components/echart/center/centerChartRate";data() {return {rate: [{id: "centerRate1",tips: 60,...},{id: "centerRate2",tips: 40,colorData: {...}}]}
}

然后在复用的组件components/echart/center/centerChartRate里进行接收并在用到的地方赋值。

如何更换边框

边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
如：

<dv-border-box-1></dv-border-box-1>
<dv-border-box-2></dv-border-box-2>
<dv-border-box-3></dv-border-box-3>

如何更换图表

直接进入 components/echart 下的文件修改成你要的 echarts 模样，可以去echarts 官方社区里面查看案例。
Mixins 注入的问题

使用 mixins 注入解决了图表重复书写响应式适配的代码，如果要更换(新增)图形，需要将echarts.init()函数赋值给this.chart，然后 mixins 才会自动帮你注入响应式功能。
屏幕适配问题

本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如’动态文字变换组件’会影响布局，需要手动换成一般节点，

// flexible文件位置: `common/flexible.js`,修改部分如下
function refreshRem() {var width = docEl.getBoundingClientRect().width;// 最小1366px，最大适配2560pxif (width / dpr < 1366) {width = 1366 * dpr;} else if (width / dpr > 2560) {width = 2560 * dpr;}// 原项目是1920px我设置成24等份，这样1rem就是80pxvar rem = width / 24;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;
}

四、更新情况

增加了 Echart 组件复用的功能，如：中间任务达标率的两个百分比图使用的是同一个组件。
修复了头部右侧的图案条不对称的问题。
修复屏幕适配问题，更换了所有的尺寸单位，统一使用 rem。
使用 Mixins 注入图表响应式代码。
vue-awesome 改成按需引入的方式

五、其余

前端框架是基于项目 gitee 地址（国内速度快）开发，吃水不忘挖井人！感谢大佬无私奉献~

后端是我自己搭建SpringBoot+Redis+Jieba的项目，详情见链接数据大屏后端源码分享

数据大屏项目Vue+DataV+Echarts(附源码)相关推荐

【threejs】可视化大屏酷炫3D地图附源码
目录效果如下: 1. 前言: 2. 使用: 1.修改整体的背景图可以使用颜色或用贴图改材质编辑方法: 2. 取消地图上柱状图显示 3.更换地图.更换省份.市 4.修改相机的视角,页面展示的远近角 ...
20个大数据可视化大屏模板（评论区附源码）
为什么大屏数据展示模板越来越受欢迎? 大屏在企业中越来越受欢迎,主要有两个方面的原因第一:全方位的数据展示. 目前企业都有面临"信息孤岛"问题,各个系统平台之间的数据无法实现融合 ...
深度盘点：这20套可视化炫酷大屏真香啊（附源码）
由于公司项目里面用到一个数据可视化大屏页面,自己网上各种谷歌百度,发现资源良莠不齐,而且大多数都是收费的,甚至一个页面一收费的那种,前前后后自己不管是付费的还是免费的收集了不少,于是自己打算整理下,免 ...
java计算机毕业设计ssm基于大数据的汽车流量监控cvej1（附源码、数据库）
java计算机毕业设计ssm基于大数据的汽车流量监控cvej1(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也 ...
Java项目——物业管理系统（附源码+数据库）
今天给小伙伴们分享一个Java项目--物业管理系统(附源码+数据库) 感兴趣的小伙伴可以点击下方链接和小编一起学习哟~ https://www.bilibili.com/video/BV1cD4y1s ...
web大屏展示用到的组件_从零开始设计数据大屏—基于Vue
为什么要做数据大屏? 现如今的大数据逐渐发挥出了它的力量,并无形的改变着我们的生活.但大数据在不是从事技术开发的人来说没有很明显的感受,很多人对大数据的概念只是停留在每年网易云音乐对个人听歌的汇总上. ...
javaWeb-SpringBoot微信调查问卷+问卷数据大屏项目
项目效果概览: 项目架构: 获取文件模板,前端就会展示问卷的列表,我们就可以选择选项,结果就会同步到我们的后端,通过后端把统计结果发生到前端,完成整个流程. git仓库地址: 目录标题项目效果概览: ...
Java项目—健身房管理系统（附源码+文档）
今天给大家分享一个Java实战项目-健身房管理系统(附源码+数据库+文档) 需要资料源码的小伙伴可以点击下方链接和小编一起学习~ 需要源码直接私信小编哟~https://www.bilibili.co ...
Java项目—停车场管理系统（附源码+资料课件）
今天给大家分享一个Java项目开发-停车场管理系统(附源码+课件资料). 感兴趣的小伙伴可以点击下方链接,和小编一起学编程哟~ https://www.bilibili.com/video/BV1de ...