這里一個基于 Vue3敛苇、TypeScript薄腻、DataV焕襟、ECharts 框架的項目
1.創(chuàng)建Vue項目
vue create datav-project
cd datav-project
2.進(jìn)行組件庫安裝
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)
接下來就可以引入所需要的組件內(nèi)容了
整體布局可以采用flex布局朱监，按照一層一層的來可以區(qū)分出不同的組件岸啡，使用多個組件的好處是可以更好優(yōu)化頁面。都引入到父組件中
每層組件內(nèi)的內(nèi)容為了使頁面美觀赫编，一般使用padding來撐起盒子而不是用margin值巡蘸。
同時給出所需要的寬度高度。還有子絕父相擂送，絕對定位的時候需要用到悦荒。
所有的 ECharts 圖表渲染都是基于某個組件封裝組件創(chuàng)建的
復(fù)用圖表組件部分：
復(fù)用圖表組件案例為中間部分的 `任務(wù)通過率與任務(wù)達(dá)標(biāo)率` 模塊，兩個圖表類似嘹吨，區(qū)別在于顏色和主要渲染數(shù)據(jù)搬味。
//組件調(diào)用
<span>今日任務(wù)通過率</span>
<chart :tips="rate[0].tips" :colorObj="rate[0].colorData" />
<span>今日任務(wù)達(dá)標(biāo)率</span>
<chart :tips="rate[1].tips" :colorObj="rate[1].colorData" />
