2021数据大屏-词云-源码分享(VUE+iDataV+Echarts，后端SpringBoot)

数据大屏-实现方案

现公司做政务项目，两周左右搞了个大屏项目。在此分享一下前、后端代码，看着下面博客快速上手，大家记得收藏关注，如果能帮到大家那万分荣幸。

废话不多说直接上效果图:
下载地址及博客：
前端

• 代码：前端代码下载（V1.0）、前端代码下载（V2.0）
• 博客：数据大屏项目Vue+DataV+Echarts

后端

• 后端：后端代码下载
• 博客：数据大屏+词云SpringBoot+Redis+Jieba

预览（V1.0）

预览（V2.0）

一、项目描述

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. DataV 官方文档（建议使用之前先浏览）
2. echarts 实例，echarts 官方文档
3. 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 使用介绍

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.prot