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

最新推荐文章于 2026-06-03 15:48:14 发布

原创

最新推荐文章于 2026-06-03 15:48:14 发布 · 3.7w 阅读

269

本项目基于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 分支的代码，其余是开发分支。

下载地址：
前端代码（旧版无词云）：前端代码下载
后端代码：后端代码下载
新版：暂未上传代码
在这里插入图片描述
旧版：

友情链接：

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.