**通知:最新的低代码大屏系统GoView已开源,详见:[https://gitee.com/MTrun/go-view](https://gitee.com/MTrun/go-view)**
<p align="center">
<img src="https://gitee.com/MTrun/go-view/raw/master/readme/logo-t-y.png" alt="go-view" />
</p>
**长期赞助商**
<div align="center">
<a href="http://www.ccflow.org/?from=vueBigScreenGitee" target="_blank">
<img src="https://gitee.com/dromara/go-view/raw/master/readme/sponsors/ccflow-banner.png" alt="go-view" style="width: 320px!important;" width="320px!important;" />
</a>
</div>
## 一、项目描述
- 一个基于 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 分支的代码,其余分支是开发分支。
- 需要其它地图数据的,请查看我的其它项目(有一个地图合集)
友情链接:
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)
项目展示
![项目展示](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% 填充,如果非同比例则会自动计算比
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
基于spark的共享单车数据分析前端后端的完整代码(优质项目).zip个人经导师指导并认可通过的98分毕业设计项目,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试,确保可以运行! 基于spark的共享单车数据分析前端后端的完整代码(优质项目).zip个人经导师指导并认可通过的98分毕业设计项目,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试,确保可以运行! 基于spark的共享单车数据分析前端后端的完整代码(优质项目).zip个人经导师指导并认可通过的98分毕业设计项目,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试,确保可以运行! 基于spark的共享单车数据分析前端后端的完整代码(优质项目).zip个人经导师指导并认可通过的98分毕业
资源推荐
资源详情
资源评论
收起资源包目录
基于spark的共享单车数据分析前端后端的完整代码(毕业设计优质项目).zip (265个子文件)
ad60b8b6e75b7d80ea3441c372d5f5b965deca7c 873B
Test.class 5KB
CsvToHBase.class 4KB
Clee2.class 4KB
TestDemo.class 2KB
Data.class 577B
App.class 537B
AppTest.class 469B
bicycle.csv 11.71MB
.gitignore 233B
.gitignore 214B
.gitignore 182B
test_line.html 100KB
start_station_ride_count.html 6KB
average_distance_bar_chart.html 5KB
render.html 4KB
chart.html 2KB
index.html 613B
favicon.ico 4KB
Bigdata.iml 18KB
bigdata4.iml 336B
CsvToHBase.java 4KB
Test.java 3KB
Clee2.java 3KB
TestDemo.java 2KB
AppTest.java 283B
App.java 174B
fujian.js 44KB
drawMixin.js 2KB
index.js 1KB
main.js 928B
resizeMixin.js 824B
vue.config.js 304B
index.js 242B
index.js 168B
babel.config.js 73B
theme.json 8KB
package.json 1KB
LICENSE 11KB
yarn.lock 405KB
README.md 9KB
.name 7B
index.pb 85B
other_image2.png 1.53MB
other_image.png 1.03MB
pageBg.png 289KB
logo.png 7KB
image.png 2KB
log4j.properties 5KB
log4j.properties 5KB
avgdis.scala 4KB
top_routes.scala 4KB
memberTopStations.scala 4KB
hour_counts.scala 4KB
index.scss 3KB
style.scss 3KB
_variables.scss 1KB
建表.txt 141B
chart.vue 8KB
chart.vue 8KB
center.vue 6KB
index.vue 4KB
chart.vue 3KB
centerLeft1.vue 3KB
chart.vue 3KB
index.vue 2KB
index.vue 2KB
index.vue 2KB
centerRight1.vue 2KB
centerRight2.vue 2KB
chart.vue 1KB
index.vue 1KB
bottomRight.vue 1KB
index.vue 1KB
index.vue 1KB
centerLeft2.vue 1KB
bottomLeft.vue 979B
index.vue 646B
App.vue 197B
pom.xml 4KB
Project_Default.xml 1KB
hbase-site.xml 1KB
hbase-site.xml 1KB
core-site.xml 1KB
core-site.xml 1KB
jarRepositories.xml 1KB
jarRepositories.xml 1KB
Maven__org_glassfish_jersey_containers_jersey_container_servlet_core_2_34.xml 715B
Maven__org_apache_directory_server_apacheds_kerberos_codec_2_0_0_M15.xml 692B
Maven__com_fasterxml_jackson_module_jackson_module_scala_2_12_2_12_3.xml 689B
Maven__org_scala_lang_modules_scala_parser_combinators_2_12_1_1_2.xml 686B
Maven__org_apache_hbase_thirdparty_hbase_shaded_miscellaneous_2_1_0.xml 685B
Maven__org_glassfish_jersey_containers_jersey_container_servlet_2_34.xml 680B
Maven__com_github_stephenc_findbugs_findbugs_annotations_1_3_9_1.xml 661B
Maven__org_glassfish_hk2_external_aopalliance_repackaged_2_6_1.xml 653B
Maven__org_apache_hbase_thirdparty_hbase_shaded_protobuf_2_1_0.xml 650B
Maven__org_apache_parquet_parquet_format_structures_1_12_2.xml 649B
Maven__org_apache_spark_spark_network_shuffle_2_12_3_2_1.xml 641B
Maven__com_fasterxml_jackson_core_jackson_annotations_2_12_3.xml 639B
Maven__org_apache_spark_spark_network_common_2_12_3_2_1.xml 634B
共 265 条
- 1
- 2
- 3
资源评论
- dyahh2024-05-21这个资源总结的也太全面了吧,内容详实,对我帮助很大。
程序员张小妍
- 粉丝: 1w+
- 资源: 3026
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功