vue3项目大数据可视化平台项目 记录

这里一个基于 Vue3、TypeScript、DataV、ECharts 框架的项目

1.创建Vue项目

vue create datav-project

cd datav-project

2.进行组件库安装

npm安装

npm install@jiaminghi/data-view

yarn安装

yarn add@jiaminghi/data-view

3.1 将自动注册所有组件为全局组件

import dataV from'@jiaminghi/data-view' 

Vue.use(dataV)

3.2 按需引入

按需引入仅支持基于ES module的tree shaking，按需引入示例如下：

import {borderBox1}from'@jiaminghi/data-view' 

Vue.use(borderBox1)

接下来就可以引入所需要的组件内容了

整体布局可以采用flex布局，按照一层一层的来可以区分出不同的组件，使用多个组件的好处是可以更好优化页面。都引入到父组件中

flex布局

每层组件内的内容为了使页面美观，一般使用padding来撑起盒子而不是用margin值。

同时给出所需要的宽度高度。还有子绝父相，绝对定位的时候需要用到。

所有的 ECharts 图表渲染都是基于某个组件封装组件创建的

复用图表组件部分：

复用图表组件案例为中间部分的 `任务通过率与任务达标率` 模块，两个图表类似，区别在于颜色和主要渲染数据。

//组件调用

<span>今日任务通过率</span>

<chart :tips="rate[0].tips" :colorObj="rate[0].colorData" />

<span>今日任务达标率</span>

<chart :tips="rate[1].tips" :colorObj="rate[1].colorData" />