## 一、项目描述
- 一个基于 Vue、Datav、Echart 框架的 " **数据大屏项目** ",通过 Vue 组件实现数据动态刷新渲染,内部图表可实现自由替换。部分图表使用 DataV 自带组件,可进行更改,详情请点击下方 DataV 文档。
- [**Vue3 版本请点击这里查看,使用 Hooks+TypeScript 实现,全新内容等你探索!**](https://gitee.com/MTrun/vue-big-screen-plugin)
- [**React 版本请点击这里查看,全新界面超级好看!!!**](https://gitee.com/MTrun/react-big-screen)
- 项目需要全屏展示(按 F11)。
- 项目部分区域使用了全局注册方式,增加了打包体积,在实际运用中请使用 **按需引入**。
- 拉取项目之后,建议按照自己的功能区域重命名文件,现以简单的位置进行区分。
- 项目环境:Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如果5.x版本有问题,请切换到4.x版本)、Webpack-4.0、Npm-6.13、Node-v12.16。
- 请拉取 master 分支的代码,其余分支是开发分支。
- Vue3 版本代码在新项目 vue-big-screen-plugin 开发当中,敬请期待~
友情链接:
1. [Vue 官方文档](https://cn.vuejs.org/v2/guide/instance.html)
2. [DataV 官方文档](http://datav.jiaminghi.com/guide/)
3. [echarts 实例](https://echarts.apache.org/examples/zh/index.html),[echarts API 文档](https://echarts.apache.org/zh/api.html#echarts)
4. [项目 gitee 地址(国内速度快)](https://gitee.com/MTrun/big-screen-vue-datav)
项目展示
![项目展示](https://images.gitee.com/uploads/images/2020/1208/183608_b893a510_4964818.gif "20201208_221020.gif")
## 二、主要文件介绍
| 文件 | 作用/功能 |
| ------------------- | --------------------------------------------------------------------- |
| main.js | 主目录文件,引入 Echart/DataV 等文件 |
| utils | 工具函数与 mixins 函数等 |
| views/ index.vue | 项目主结构 |
| views/其余文件 | 界面各个区域组件(按照位置来命名) |
| assets | 静态资源目录,放置 logo 与背景图片 |
| assets / style.scss | 通用 CSS 文件,全局项目快捷样式调节 |
| assets / index.scss | Index 界面的 CSS 文件 |
| components/echart | 所有 echart 图表(按照位置来命名) |
| common/... | 全局封装的 ECharts 和 flexible 插件代码(适配屏幕尺寸,可定制化修改) |
## 三、使用介绍
### 启动项目
需要提前安装好 `nodejs` 与 `yarn`,下载项目后在项目主目录下运行 `yarn` 拉取依赖包。安装完依赖包之后然后使用 `vue-cli` 或者直接使用命令`npm run serve`,就可以启动项目,启动项目后需要手动全屏(按 F11)。如果编译项目的时候提示没有 DataV 框架的依赖,输入 `npm install @jiaminghi/data-view` 或者 `yarn add @jiaminghi/data-view` 进行手动安装。
### 封装组件渲染图表
所有的 ECharts 图表都是基于 `common/echart/index.vue` 封装组件创建的,已经对数据和屏幕改动进行了监听,能够动态渲染图表数据和大小。在监听窗口小大的模块,使用了防抖函数来控制更新频率,节约浏览器性能。
项目配置了默认的 ECharts 图表样式,文件地址:`common/echart/theme.json`。
封装的渲染图表组件支持传入以下参数,可根据业务需求自行添加/删除。
参数名称 | 类型 | 作用/功能 |
| -------------------| --------- | ------------------------------|
| id | String | 唯一 id,渲染图表的节点(非必填,使用了 $el)|
| className | String | class样式名称(非必填) |
| options | Object | ECharts 配置(必填) |
| height | String | 图表高度(建议填) |
| width | String | 图表宽度(建议填) |
### 动态渲染图表
动态渲染图表案例为 `components` 目录下各个图表组件,index 文件负责数据获取和处理,chart 文件负责监听和数据渲染。
chart 文件的主要逻辑为:
```html
<template>
<div>
<Echart :options="options" id="id" height="height" width="width" ></Echart>
</div>
</template>
<script>
// 引入封装组件
import Echart from '@/common/echart'
export default {
// 定义配置数据
data(){ return { options: {}}},
// 声明组件
components: { Echart},
// 接收数据
props: {
cdata: {
type: Object,
default: () => ({})
},
},
// 进行监听,也可以使用 computed 计算属性实现此功能
watch: {
cdata: {
handler (newData) {
this.options ={
// 这里编写 ECharts 配置
}
},
// 立即监听
immediate: true,
// 深度监听
deep: true
}
}
};
</script>
```
### 复用图表组件
复用图表组件案例为中间部分的 `任务通过率与任务达标率` 模块,两个图表类似,区别在于颜色和主要渲染数据。只需要传入对应的唯一 id 和样式,然后在复用的组件 `components/echart/center/centerChartRate` 里进行接收并在对应位置赋值即可。
如:在调用处 `views/center.vue` 里去定义好数据并传入组件
```js
//组件调用
<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: {
...
}
}
]
}
}
```
### 更换边框
边框是使用了 DataV 自带的组件,只需要去 views 目录下去寻找对应的位置去查找并替换就可以,具体的种类请去 DavaV 官网查看
如:
```html
<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 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
### Mixins 解决自适应适配功能
使用 mixins 注入解决了界面大小变动图表自适应适配的功能,函数在 `utils/resizeMixins.js` 中,应用在 `common/echart/index.vue` 的封装渲染组件,主要是对 `this.chart` 进行了功能注入。
### 屏幕适配
1.5 版本项目放弃了 flexible 插件方案,将 rem 改回px,使用更流程通用的 `css3:scale` 缩放方案,通过 `ref` 指向 `views/index`,屏幕改变时缩放内容。项目的基准尺寸是 `1920px*1080px`,所以支持同比例屏幕 100% 填充,如果非同比例则会自动计算比例居中填充,不足的部分则留白。实现代码在 `src/utils/userDraw` ,如果有其它的适配方案,欢迎交流。
### 请求数据
现在的项目未使用前后端数据请求,建议使用 axios 进行数据请求,在 main.js 位置进行全局配置。
- axios 的 main.js 配置参考范例(因人而异)
```js
import axios from 'axios';
//把方法放到vue的原型上,这样就可以全局使用了
Vue.prototype.$http = axios.create({
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
基于SpringBoot、Vue、MapReduce、JDK8、JPA和Python的大数据期末大作业项目。通过爬虫代码获取Java岗位相关数据,并利用MapReduce进行数据处理和分析,最终通过前后端分离展示在一个大屏上。 后端方面使用SpringBoot集成JPA撰写接口,提供快速启动部署能力;前端方面,使用的Vue2脚手架,结合Echarts和Axios展示数据大屏;MapReduce作为大数据处理框架,能够高效地处理大规模数据;JPA用于与MySQL数据库进行交互;Python用于编写爬虫代码。 项目还包含方案设计图、Word报告和SQL文件。方案设计图展示了项目的整体架构和流程;Word报告详细介绍了项目的背景、需求、设计和实现过程;SQL文件包含了数据库的结构和初始化数据,方便项目的部署和使用。 通过Java岗位数据大屏分析项目,可以帮助用户更好地了解Java岗位的就业情况和趋势,为求职者和招聘方提供参考和决策依据。 效果图都截图在PDF上了,地址:https://open-yuan.com/static/resources/Java岗位数据分析大屏截图.pdf
资源推荐
资源详情
资源评论
收起资源包目录
大数据期末大作业-Java岗位数据大屏分析,集成SpringBoot+JPA+Python+Vue2+Echarts (444个子文件)
WorkareaReduce.class 4KB
EducationReduce.class 4KB
SkillLabelReduce.class 4KB
WorkyearReduce.class 4KB
CompanyTypeReduce.class 3KB
Workarea.class 3KB
JavaController.class 3KB
CompanyType.class 2KB
SkillLabel.class 2KB
CompanyTypeMain.class 2KB
SkillLabelMain.class 2KB
Education.class 2KB
WorkyearMain.class 2KB
EducationMain.class 2KB
WorkareaMain.class 2KB
Workyear.class 2KB
SkillLabelMap.class 2KB
CompanyTypeMap.class 2KB
EducationMap.class 2KB
JavaInfo.class 2KB
CompanyTypeServiceImpl.class 2KB
SkillLabelServiceImpl.class 2KB
EducationServiceImpl.class 2KB
WorkareaServiceImpl.class 2KB
WorkyearServiceImpl.class 2KB
WorkareaMap.class 2KB
WorkareaSort.class 2KB
WorkyearMap.class 2KB
CorsConfig.class 2KB
SkillLabelSort.class 2KB
EducationSort.class 2KB
WorkyearSort.class 2KB
WorkareaSort$1.class 1KB
SkillLabelSort$1.class 1KB
EducationSort$1.class 1KB
WorkyearSort$1.class 1KB
JavaJobSpringbootApplication.class 798B
JavaJobSpringbootApplicationTests.class 596B
CompanyTypeRepository.class 476B
SkillLabelRepository.class 473B
EducationRepository.class 470B
WorkareaRepository.class 467B
WorkyearRepository.class 467B
CompanyTypeService.class 356B
EducationService.class 350B
SkillLabelService.class 348B
WorkyearService.class 347B
WorkareaService.class 347B
设计报告.docx 6.32MB
.gitignore 214B
index.html 591B
favicon.ico 4KB
companytype-count.iml 14KB
java-job-springboot.iml 11KB
MapReduce源代码.iml 344B
education-count.iml 81B
拉勾网求职数据获取.ipynb 58KB
前程无忧数据获取.ipynb 55KB
WorkareaReduce.java 3KB
EducationReduce.java 2KB
WorkareaMain.java 2KB
CompanyTypeMain.java 2KB
SkillLabelMain.java 2KB
SkillLabelReduce.java 2KB
WorkyearMain.java 2KB
EducationMain.java 2KB
WorkyearReduce.java 2KB
JavaController.java 2KB
JavaInfo.java 2KB
EducationServiceImpl.java 1KB
CompanyTypeServiceImpl.java 1KB
SkillLabelServiceImpl.java 1KB
WorkyearServiceImpl.java 1KB
WorkareaServiceImpl.java 1KB
CompanyTypeReduce.java 1KB
SkillLabelMap.java 1KB
EducationSort.java 1KB
SkillLabelSort.java 1KB
WorkyearSort.java 1KB
WorkareaMap.java 1KB
CompanyTypeMap.java 1KB
WorkareaSort.java 1KB
WorkyearMap.java 1KB
EducationMap.java 1KB
CorsConfig.java 799B
CompanyTypeRepository.java 461B
SkillLabelRepository.java 457B
EducationRepository.java 453B
WorkyearRepository.java 449B
WorkareaRepository.java 449B
Workarea.java 421B
CompanyType.java 420B
SkillLabel.java 417B
Education.java 393B
Workyear.java 391B
JavaJobSpringbootApplication.java 356B
EducationService.java 302B
CompanyTypeService.java 301B
SkillLabelService.java 300B
WorkareaService.java 299B
共 444 条
- 1
- 2
- 3
- 4
- 5
资源评论
OpenYuan开袁
- 粉丝: 1w+
- 资源: 15
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功