# big-screen-vue-datav

**Repository Path**: autoer/big-screen-vue-datav

## Basic Information

- **Project Name**: big-screen-vue-datav
- **Description**: 一个基于 vue、datav、Echart 框架的大数据可视化（大屏展示）模板
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-01-20
- **Last Updated**: 2022-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 一、项目描述

- 一个基于 Vue、Datav、Echart 框架的 " **数据大屏项目** "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。
- 项目需要全屏展示（按 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。

友情链接：

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)



## 二、文件目录结构

```tex
Project
├── src
│  │  ├── assets 静态资源目录，放置 logo 与背景图片
│  │  │  │  ├── style.scss 通用 CSS 文件，全局项目快捷样式调节
│  │  │  │  └── index.scss index 界面的 CSS 文件
│  │  ├── common 全局封装的 ECharts 和 flexible 插件代码（适配屏幕尺寸，可定制化修改）
│  │  ├── components/echart 所有 echart 图表（按照位置来命名）
│  │  ├── utils 工具函数与 mixins 函数等
│  │  ├── router 路由主界面定义
│  │  ├── view
│  │  │  │  ├── index.vue 项目柱结构
│  │  │  │  └── 其余文件 界面各个区域组件（按照位置来命名）
│  │
│  └── main.js 主函数文件
```



## 三、使用指南

### 启动项目

需要提前安装好 `nodejs` 与 `yarn`,下载项目后在项目主目录下运行 `yarn` 拉取依赖包。安装完依赖包之后然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。如果编译项目的时候提示没有 DataV 框架的依赖，输入 `npm install @jiaminghi/data-view` 或者 `yarn add @jiaminghi/data-view` 进行手动安装。

---

### 封装组件渲染

项目中用到的Echarts图表都是基于 `commo/echart/index.vue` 封装组件创建的，实现了对数据和屏幕改动的监听功能，以及能够动态渲染图表数据和大小。

项目配置了默认的 Echarts 图表样式，基于 `common/echart/theme.json`。

封装的渲染图表组件支持传入如下参数：

| 参数      | 类型   | 功能                    |
| --------- | ------ | ----------------------- |
| id        | String | 唯一 id，渲染图表的节点 |
| className | String | class 样式名称          |
| options   | Object | Echart 配置             |
| height    | String | 图表高度                |
| width     | String | 图表宽度                |

---

### 动态渲染图表

动态渲染图表的案例为 `components` 目录下各图表组件，index 文件负责数据获取和处理，chart 文件负责监听和数据渲染。

chart 文件的主要逻辑为：

```vue
<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>
```

---

### 复用图表组件

复用图表组件为 `center` 模块中的 `任务通过率与任务达标率` 模块，两个图标相似，区别在于颜色和主要渲染数据。只需要传入对应的唯一 id 和 样式，然后再复用组件 `components/echarts/center/centerChartRate` 里接收并对应在相应位置赋值即可。



如：在调用处 `views/center.vue` 里去定义好数据并传入组件

```vue
//组件调用
<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";
<script>
data() {
  return {
    rate: [
      {
        id: "centerRate1",
        tips: 60,
        ...
      },
      {
        id: "centerRate2",
        tips: 40,
        colorData: {
          ...
        }
      }
    ]
  }
}
</script>
```

---

### 更换边框

边框是调用了 **DataV** 自带的组件，只需要在views 目录下寻找对应位置并替换即可，具体种类自清 [DataV 官方](http://datav.jiaminghi.com/) 查看

---

### 更换图表

在 `compontents/echart` 下的文件修改成想要的echart 模式，也可以在 [echarts 官网社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all) 中查看案例

---

### Mixins 解决自适应适配功能

使用 mixins 注入解决了界面大小变动图表自适应适配功能，函数在 `uitls/resizeMixins.js` 中，应用在 `common/echart/index.vue` 的封装渲染组件，主要是对 `this.chart` 进行了功能注入。