**通知:最新的低代码大屏系统GoView已开源,详见:[https://gitee.com/MTrun/go-view](https://gitee.com/MTrun/go-view)**
![输入图片说明](https://gitee.com/MTrun/go-view/raw/master/readme/logo-t-y.png)
## 一、项目描述
- 这里一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " **数据大屏项目** ",使用 '.vue' 和 '.tsx' 文件实现界面,采用新版动态屏幕适配方案,支持数据动态刷新渲染、内部DataV、ECharts图表都支持自由替换。组件详情请点击下方 ECharts 和 DataV 文档。
- [**Vue2 版本请点击这里查看,地图支持自动轮播哦~**](https://gitee.com/MTrun/big-screen-vue-datav)
- [**React 版本请点击这里查看,全新界面超级好看!!!(o ゚ v ゚)ノ**](https://gitee.com/MTrun/react-big-screen)
- 项目按照 1920*1080 比例设计,支持任何尺寸的同比例缩放。
- 项目封装的 ECharts 区域使用了全部引入的方式,增加了打包体积,在实际运用中请使用 **按需引入**。
- 拉取项目之后,建议按照自己的功能区域重命名文件,现以简单的位置进行区分。
- 项目环境:@vue/cli-4.5.13、DataV-2.10、Echarts-5.1.1、Npm-6.14.6、Node-v14.16。
- 请拉取 master 分支的代码,其余分支是开发分支。
- 需要其它地图数据的,请查看我的其它项目(有一个地图合集)
- 注意:dataV 暂不支持 Vue3 的数据更新,可以正常使用静态组件(边框等),如果动态数据修改的需求可以参考npm库 `bin-datav` 的源码进行更改。
- **好消息,dataV作者开放了 Vue3 版本,发布V1.0之后我会同步进行更新**
友情链接:
1. [Vue3 官方文档](https://composition-api.vuejs.org/zh/api.html#setup)
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/vue-big-screen-plugin)
项目展示
![项目展示](https://images.gitee.com/uploads/images/2020/1208/183608_b893a510_4964818.gif "20201208_221020.gif")
## 二、主要文件介绍
| 文件 | 作用/功能 |
| ------------------- | --------------------------------------------------------------------- |
| main.ts | 主目录文件,引入注册 自定义组件、DataV 、样式等数据 |
| views/* | 界面各个区域组件按照位置来命名,index 是项目主结构 |
| constant/* | 静态数据项,所有的标题和图标都配置在这里 |
| utils/* | 全局公共函数(包含屏幕适配函数) |
| assets/* | 静态资源目录,放置图片与全局样式(index 文件样式单独放在这里) |
| components/echart | 封装的全局图表渲染函数 |
| components/componentInstall | 全局组件注册位置 |
| common/* | 通用数据配置项(放置 echart 样式与地图数据) |
| router/* | 路由配置区域 |
| store/* | Vuex 相关区域 |
| src/ *.d.ts | 全局类型声明文件 |
## 三、使用介绍
### 启动项目
需要提前安装好 `nodejs` 与 `yarn`,下载项目后在项目主目录下运行 `yarn` 拉取依赖包。安装完依赖包之后然后使用 `vue-cli` 或者直接使用命令`npm run serve`,就可以启动项目,启动项目后最好是手动全屏查看(按 F11)。如果编译项目的时候提示没有 DataV 框架的依赖,输入 `npm install @jiaminghi/data-view` 或者 `yarn add @jiaminghi/data-view` 进行手动安装。
如果安装完依赖 @jiaminghi 报错 `<template v-for> key should be placed on the <template> tag` 类似的bug,我已经做了修复,大家把此工程目录下的 `other_modules/@jiaminghi.rar` 解压并替换掉 node_modules 里面的同名文件(或者手动修改,只需要把 v-for 移动到下方标签里,并删除 template 即可),我已经给作者提了 Issues 希望大家拉取的时候没有这个错误
如果大家不想每次都修改依赖,可以使用社区封装的 vue3 版本的 DataV:
1. https://gitee.com/kjgl77/datav-vue3
2. https://gitee.com/wangbin3162/bin-datav?_from=gitee_search
### 封装组件渲染图表
所有的 ECharts 图表渲染都是基于 `components/echart/index.tsx` 封装组件创建的,动态修改数据需要手动触发初始化函数 `initChart`,参考 `centerLeft1` 里的图表写法即可。如果遇到动态赋值图表无法监听到的时候,也可以调用这个函数进行手动更新。
封装的渲染图表组件支持传入以下参数,可根据业务需求自行添加/删除。
|参数名称 | 类型 | 作用/功能 |
| -------------------| --------- | ------------------------------|
| id | String | 唯一 id(非必填,项目使用 ref 指定节点) |
| className | String | class样式名称(非必填) |
| options | Object | ECharts 配置(非必填),可通过初始化参数打入 |
| height | String | 图表高度(必填) |
| width | String | 图表宽度(必填) |
### TSX与封装组件的使用
项目引入了 `babel-plugin-jsx` 依赖,可以直接使用 tsx 编写代码。 `src/views/chart` 下的文件使用了此方式编码,这里的文件专门处理数据内容,不涉及到任何的样式,并且返回的结构较为简单。
项目全局注册了 `echart` 组件,使用的时候大体方式如下:
```javascript
setup(props) {
// ....此处省略n行代码
return () => {
const height = "xxx"
const width = "xxx"
return <div>
<echart ref={chartRef} height={height} width={width} />
</div>
}
}
```
### 复用图表组件
复用图表组件案例为中间部分的 `任务通过率与任务达标率` 模块,两个图表类似,区别在于颜色和主要渲染数据。只需要传入对应样式,然后在复用的组件 `views/center/chart/draw.tsx` 里进行接收并在对应位置赋值即可。
如:在调用处 `views/center.vue` 里去定义好数据并传入组件
```js
//组件调用
<span>今日任务通过率</span>
<chart :tips="rate[0].tips" :colorObj="rate[0].colorData" />
<span>今日任务达标率</span>
<chart :tips="rate[1].tips" :colorObj="rate[1].colorData" />
...
import Chart from '../center/chart/draw'
components: {
Chart
}
setup() {
// ...
const rate = reactive([
{
id: "centerRate1",
tips: 60,
...
},
{
id: "centerRate2",
tips: 40,
colorData: {
...
}
}
])
return {rate, ....}
}
```
### 更换边框和图表
边框是使用了 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>
```
图表的话可以去各个 `src/views/*/chart/draw.tsx` 修改 `ECharts` 的配置文件即可,如果觉得官网的案例不够好看可以去社区逛:[ECharts 社区地址](https://www.isqqw.com/homepage#/homepag
没有合适的资源?快使用搜索试试~ 我知道了~
可视化大屏 Vue3 版本vue-big-screen-plugin-master.zip
共62个文件
tsx:12个
ts:10个
vue:9个
需积分: 5 0 下载量 184 浏览量
2024-04-04
07:55:04
上传
评论
收藏 2.61MB ZIP 举报
温馨提示
可视化大屏 Vue3 版本vue-big-screen-plugin-master.zip
资源推荐
资源详情
资源评论
收起资源包目录
vue-big-screen-plugin-master.zip (62个子文件)
vue-big-screen-plugin-master
.browserslistrc 30B
yarn.lock 289KB
babel.config.js 103B
.eslintrc.js 514B
src
constant
index.d.ts 86B
index.ts 816B
main.ts 528B
App.vue 200B
shims-plugins-d.ts 38B
store
index.ts 139B
assets
logo.png 7KB
pageBg.png 289KB
scss
index.scss 3KB
_variables.scss 1KB
style.scss 3KB
icon
demo.css 8KB
demo_index.html 29KB
iconfont.ttf 6KB
iconfont.css 2KB
iconfont.json 4KB
iconfont.woff2 3KB
iconfont.js 20KB
iconfont.woff 4KB
utils
useDraw.ts 2KB
index.ts 942B
components
echartCanvas
index.tsx 2KB
componentInstall.ts 287B
common
echart
map
fujian.js 44KB
style
theme.js 7KB
router
index.ts 322B
shims-vue.d.ts 168B
views
centerLeft2
index.vue 1KB
chart
index.tsx 1KB
draw.tsx 6KB
bottomRight
index.vue 975B
chart
index.tsx 2KB
draw.tsx 8KB
centerRight2
index.vue 2KB
index
index.vue 5KB
bottomLeft
index.vue 974B
chart
index.tsx 2KB
draw.tsx 4KB
center
index.vue 5KB
chart
draw.tsx 2KB
centerLeft1
index.vue 3KB
chart
index.tsx 966B
draw.tsx 2KB
centerRight1
index.vue 1KB
chart
index.tsx 1KB
draw.tsx 3KB
LICENSE 1KB
package.json 1KB
public
image.png 2KB
favicon.ico 4KB
index.html 611B
QQ2.png 146KB
vue.config.js 138B
.gitignore 231B
tsconfig.json 710B
other_modules
@jiaminghi.rar 2.01MB
README.md 248B
README.md 9KB
共 62 条
- 1
资源评论
流华追梦
- 粉丝: 4554
- 资源: 2149
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 1961ee27df03bd4595d28e24b00dde4e_744c805f7e4fb4d40fa3f695bfbab035_8(1).c
- mediapipe-0.9.0.1-cp37-cp37m-win-amd64.whl.zip
- windows注册表编辑工具
- mediapipe-0.9.0.1-cp37-cp37m-win-amd64.whl.zip
- 校园通行码预约管理系统20240522075502
- 车类型数据集6250张VOC+YOLO格式.zip
- The PyTorch implementation of STGCN.STGCN-main.zip
- 092300108.cpp
- 车类型数据集6000张VOC+YOLO格式.zip
- for daily read
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功