这里一个基于 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" />
