在前端開(kāi)發(fā)領(lǐng)域，數(shù)據(jù)可視化已然成為不可或缺的一環(huán)。

目前市面上主流的圖表庫(kù)諸如 ECharts、AntV 等，雖然功能強(qiáng)大，然而在實(shí)際使用過(guò)程中，不少開(kāi)發(fā)者會(huì)遇到一些問(wèn)題。

比如，這些圖表庫(kù)常常給人一種過(guò)于臃腫的感覺(jué)，配置項(xiàng)繁多復(fù)雜，每次想要配置一個(gè)圖表，往往需要查找大量的資料，這對(duì)于開(kāi)發(fā)效率而言無(wú)疑是一種拖累。

不過(guò)，隨著 Vue3 的不斷發(fā)展，一款全新的全能圖標(biāo)庫(kù) Vue Data UI 逐漸嶄露頭角，它憑借著諸多優(yōu)勢(shì)，有望成為新的數(shù)據(jù)可視化利器，甚至有取代傳統(tǒng)圖表庫(kù)的趨勢(shì)。

1. 什么是 Vue Data UI

Vue Data UI 是專為 Vue3 打造的開(kāi)源數(shù)據(jù)可視化組件庫(kù)。

Vue Data UI 誕生于一個(gè)問(wèn)題：如果你的儀表板這么好，為什么你的用戶要求 CSV 導(dǎo)出功能？

這個(gè)開(kāi)源庫(kù)的目的是為最終用戶提供一組圍繞圖表和表格的內(nèi)置工具，以減少重新計(jì)算導(dǎo)出數(shù)據(jù)的麻煩。

它以 “賦予用戶權(quán)力” 為理念，旨在為最終更便捷的數(shù)據(jù)可視化解決方案，減少數(shù)據(jù)處理和導(dǎo)出的繁瑣步驟。

2. Vue Data UI 的優(yōu)勢(shì)

• 輕量級(jí) ：無(wú)需依賴其他重型庫(kù)，自身體積小，加載速度快，不會(huì)對(duì)項(xiàng)目性能造成明顯影響。
• 易用性 ：安裝過(guò)程簡(jiǎn)單，通過(guò) npm 或 yarn 即可完成。使用方式友好，文檔和示例清晰，新手也能快速上手并集成到項(xiàng)目中。
• 自帶圖表生成器 ：配備強(qiáng)大直觀的圖表生成器，無(wú)需復(fù)雜編碼，簡(jiǎn)單操作即可生成圖表，還可直接復(fù)制代碼集成到項(xiàng)目，節(jié)省大量時(shí)間和精力，提升開(kāi)發(fā)效率。
• 社區(qū)支持與文檔完善 ：擁有活躍社區(qū)，開(kāi)發(fā)者可交流經(jīng)驗(yàn)、解決問(wèn)題。官方文檔詳細(xì)，涵蓋從入門到高級(jí)自定義的內(nèi)容，支持多種語(yǔ)言。

3. 豐富的圖表類型，顏值爆表

Vue Data UI 為開(kāi)發(fā)者提供了豐富多樣的圖表類型，多達(dá) 60+ 可視化組件。

• 迷你圖表：小巧精致，適合快速展示數(shù)據(jù)。
• 折線圖：流暢的線條，清晰展現(xiàn)數(shù)據(jù)趨勢(shì)。
• 餅圖：直觀展示數(shù)據(jù)占比，一目了然。
• 儀表盤：動(dòng)態(tài)展示關(guān)鍵指標(biāo)，提升決策效率。
• 雷達(dá)圖：全面展示多變量數(shù)據(jù)，洞察數(shù)據(jù)全貌。
• 其它：更多組件查看-https://vue-data-ui.graphieros.com/examples。

除此之外，它還包含了極具視覺(jué)沖擊力的 3D 圖表等高級(jí)選項(xiàng)：

為數(shù)據(jù)展示增添了更多的可能性和創(chuàng)意空間，無(wú)論是簡(jiǎn)單的數(shù)據(jù)統(tǒng)計(jì)，還是復(fù)雜的數(shù)據(jù)分析場(chǎng)景，都能輕松應(yīng)對(duì)。

4. 強(qiáng)大的圖表生成器

Vue Data UI 配備了一款強(qiáng)大且直觀的圖表生成器，這極大地提升了開(kāi)發(fā)效率。

通過(guò)可視化界面，開(kāi)發(fā)者無(wú)需編寫(xiě)大量的代碼，只需進(jìn)行簡(jiǎn)單的操作，如編寫(xiě)數(shù)據(jù)集、調(diào)整配置設(shè)置等，即可快速生成所需的圖表。

而且，圖表生成器實(shí)現(xiàn)了所見(jiàn)即所得的效果，開(kāi)發(fā)者可以實(shí)時(shí)查看圖表的生成效果，并根據(jù)需要進(jìn)行調(diào)整。

當(dāng)圖表配置完成后，還可以直接復(fù)制組件代碼，將其快速集成到項(xiàng)目中，無(wú)需再翻閱繁雜的 API 文檔，節(jié)省了大量的時(shí)間和精力。

5. 提供高定制化 API

盡管 Vue Data UI 提供了豐富的默認(rèn)配置和組件，但它并不局限于固定的形式，而是為開(kāi)發(fā)者提供了高定制化 API。

比如我們需要在一個(gè)圖表中注入另外一個(gè)圖表：

此外，Vue Data UI 的插槽屬性允許插入自定義的 HTML 或 Vue 組件。

比如我們需要在一個(gè)圖表中注入另外一個(gè)箭頭標(biāo)識(shí)：

6. 如何快速上手

(1) 安裝

在 Vue 項(xiàng)目中，通過(guò) npm 或 yarn 安裝 Vue Data UI 庫(kù)及其樣式文件。

npm i vue-data-ui
# or
yarn add vue-data-ui

(2) 全局注冊(cè)

在項(xiàng)目的主入口文件中引入并注冊(cè) Vue Data UI 組件，使其可以在整個(gè)項(xiàng)目中使用。

具體的代碼如下：

import { createApp } from 'vue'
import App from './App.vue'
import { VueDataUi } from 'vue-data-ui'
import 'vue-data-ui/style.css'

const app = createApp(App)
app.use(VueDataUi)
app.mount('#app')

(3) 局部引入

在單個(gè) Vue 文件中按需引入所需的組件，然后在模板中使用。

例如，如果要使用一個(gè)名為 VueDataUi 的組件，可以在組件中進(jìn)行如下設(shè)置：

<script setup>
  import { ref } from "vue";
  import { VueDataUi } from "vue-data-ui";
  import "vue-data-ui/style.css";

  const dataset = ref([...]);
  const config = ref({...});
</script>

<template>
  <div style="width:600px;">
    <VueDataUi
      component="VueUiXy"
      :dataset="dataset"
      :config="config"
    />
  </div>
</template>

如果您也是一名前端開(kāi)發(fā)，請(qǐng)一定要嘗試下這個(gè)可視化組件庫(kù)，因?yàn)檫@個(gè)可視化庫(kù)真的太酷啦！

• Vue Data UI 官網(wǎng)：https://vue-data-ui.graphieros.com/
• Vue Data UI Github：https://github.com/graphieros/vue-data-ui