|
|
@@ -2,7 +2,7 @@
|
|
|
|
|
|
- 这里一个基于 Vue3、TypeScript、DataV、ECharts 框架的 " **数据大屏项目** "，使用 '.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案，支持数据动态刷新渲染、内部DataV、ECharts图表都支持自由替换。组件详情请点击下方 ECharts 和 DataV 文档。
|
|
|
|
|
|
-- [**Vue2 版本请点击这里查看**](https://gitee.com/MTrun/big-screen-vue-datav)
|
|
|
+- [**Vue2 版本请点击这里查看，地图支持自动轮播哦~**](https://gitee.com/MTrun/big-screen-vue-datav)
|
|
|
- [**React 版本请点击这里查看，全新界面超级好看！！！(o ﾟ v ﾟ)ノ**](https://gitee.com/MTrun/react-big-screen)
|
|
|
- 项目按照 1920*1080 比例设计，支持任何尺寸的同比例缩放。
|
|
|
- 项目封装的 ECharts 区域使用了全部引入的方式，增加了打包体积，在实际运用中请使用 **按需引入**。
|
|
|
@@ -24,15 +24,17 @@
|
|
|
|
|
|
| 文件 | 作用/功能 |
|
|
|
| ------------------- | --------------------------------------------------------------------- |
|
|
|
-| 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 插件代码（适配屏幕尺寸，可定制化修改） |
|
|
|
+| main.ts | 主目录文件，引入注册 自定义组件、DataV 、样式等数据 |
|
|
|
+| views/* | 界面各个区域组件按照位置来命名，index 是项目主结构 |
|
|
|
+| constant/* | 静态数据项，所有的标题和图标都配置在这里 |
|
|
|
+| utils/* | 全局公共函数（包含屏幕适配函数） |
|
|
|
+| assets/* | 静态资源目录，放置图片与全局样式（index 文件样式单独放在这里） |
|
|
|
+| components/echart | 封装的全局图表渲染函数 |
|
|
|
+| components/componentInstall | 全局组件注册位置 |
|
|
|
+| common/* | 通用数据配置项（放置 echart 样式与地图数据） |
|
|
|
+| router/* | 路由配置区域 |
|
|
|
+| store/* | Vuex 相关区域 |
|
|
|
+| src/ *.d.ts | 全局类型声明文件 |
|
|
|
|
|
|
## 三、使用介绍
|
|
|
|
|
|
@@ -40,65 +42,82 @@
|
|
|
|
|
|
需要提前安装好 `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 里面的同名文件，我已经给作者提了 Issues 希望大家拉取的时候没有这个错误
|
|
|
+如果安装完依赖 @jiaminghi 报错 `<template v-for> key should be placed on the <template> tag` 类似的bug，作者已经做了修复，大家把此工程目录下的 `other_modules/@jiaminghi.rar` 解压并替换掉 node_modules 里面的同名文件，我已经给作者提了 Issues 希望大家拉取的时候没有这个错误
|
|
|
|
|
|
|
|
|
### 封装组件渲染图表
|
|
|
|
|
|
-所有的 ECharts 图表渲染都是基于 `components/echart/index.tsx` 封装组件创建的，已经对数据和屏幕改动进行了监听，能够动态渲染图表数据和大小。
|
|
|
-
|
|
|
-项目配置了默认的 ECharts 图表样式，文件地址：`common/echart/style/theme.js`，地图数据在同父级别的 map 文件夹下。
|
|
|
+所有的 ECharts 图表渲染都是基于 `components/echart/index.tsx` 封装组件创建的，已经对数据动进行了深度监听，能够动态渲染图表数据。如果项目传入的数据量巨大，深度监听将会影响到项目性能，此时建议手动触发初始化函数 `initChart`。如果遇到动态赋值图表无法监听到的时候，也可以调用这个函数进行手动更新。
|
|
|
|
|
|
封装的渲染图表组件支持传入以下参数，可根据业务需求自行添加/删除。
|
|
|
|
|
|
|参数名称 | 类型 | 作用/功能 |
|
|
|
| -------------------| --------- | ------------------------------|
|
|
|
-| id | String | 唯一 id（非必填，使用 ref 指定节点）|
|
|
|
+| id | String | 唯一 id（非必填，项目使用 ref 指定节点） |
|
|
|
| className | String | class样式名称（非必填） |
|
|
|
-| options | Object | ECharts 配置（非必填），可通过初始化参数打入（大数据场景可使用）|
|
|
|
+| 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>
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
|
|
|
### 复用图表组件
|
|
|
|
|
|
-复用图表组件案例为中间部分的 `任务通过率与任务达标率` 模块，两个图表类似，区别在于颜色和主要渲染数据。只需要传入对应的唯一 id 和样式，然后在复用的组件 `components/echart/center/centerChartRate` 里进行接收并在对应位置赋值即可。
|
|
|
+复用图表组件案例为中间部分的 `任务通过率与任务达标率` 模块，两个图表类似，区别在于颜色和主要渲染数据。只需要传入对应样式，然后在复用的组件 `views/center/chart/draw.tsx` 里进行接收并在对应位置赋值即可。
|
|
|
|
|
|
如：在调用处 `views/center.vue` 里去定义好数据并传入组件
|
|
|
|
|
|
```js
|
|
|
//组件调用
|
|
|
<span>今日任务通过率</span>
|
|
|
-<chart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
|
|
|
+<chart :tips="rate[0].tips" :colorObj="rate[0].colorData" />
|
|
|
|
|
|
<span>今日任务达标率</span>
|
|
|
-<chart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
|
|
|
+<chart :tips="rate[1].tips" :colorObj="rate[1].colorData" />
|
|
|
|
|
|
...
|
|
|
-import Chart from "@/components/echart/center/centerChartRate";
|
|
|
-
|
|
|
-data() {
|
|
|
- return {
|
|
|
- rate: [
|
|
|
- {
|
|
|
- id: "centerRate1",
|
|
|
- tips: 60,
|
|
|
- ...
|
|
|
- },
|
|
|
- {
|
|
|
- id: "centerRate2",
|
|
|
- tips: 40,
|
|
|
- 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 官网查看
|
|
|
如：
|
|
|
@@ -109,12 +128,12 @@ data() {
|
|
|
<dv-border-box-3></dv-border-box-3>
|
|
|
```
|
|
|
|
|
|
-### 更换图表
|
|
|
-
|
|
|
-直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
|
|
|
+图表的话去各个 `src/views/*/chart/draw.tsx` 修改 `ECharts` 的配置文件即可，如果觉得官网的案例不够好看可以去社区逛：[ECharts 社区地址](https://www.makeapie.com/explore.html)。
|
|
|
|
|
|
### 屏幕适配
|
|
|
|
|
|
+屏幕适配方案放弃了 Vue2 版本的 rem 方案，使用更流程通用的 `css3：scale` 缩放方案，项目的基准尺寸是 `1920px*1080px`，所以支持用比例屏幕 100% 填充，如果非同比例则会自动计算比例居中填充，不足的部分则留白。实现代码在 `src/utils/userDraw.ts` 中，通过 `ref` 指向 `views/index` ，如果觉得 Vue2 版本的适配方案不能试图您的场景，则可以参考此方案进行代替。
|
|
|
+
|
|
|
### 请求数据
|
|
|
|
|
|
现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置。
|
|
|
@@ -132,8 +151,6 @@ Vue.prototype.$http = axios.create({
|
|
|
});
|
|
|
```
|
|
|
|
|
|
-## 四、更新情况
|
|
|
-
|
|
|
## 五、其余
|
|
|
|
|
|
这个项目是个人的作品，难免会有问题和 BUG，如果有问题请进行评论，我也会尽力去更新，自己也在前端学习的路上，欢迎交流，非常感谢！
|
MTrun