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

目前市面上主流的圖表庫諸如 ECharts、AntV 等，雖然功能強大，然而在實際使用過程中，不少開發(fā)者會遇到一些問題。

比如，這些圖表庫常常給人一種過于臃腫的感覺，配置項繁多復雜，每次想要配置一個圖表，往往需要查找大量的資料，這對于開發(fā)效率而言無疑是一種拖累。

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

什么是 Vue Data UI

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

Vue Data UI 誕生于一個問題：如果你的儀表板這么好，為什么你的用戶要求 CSV 導出功能？

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

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

Vue Data UI 的優(yōu)勢

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

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

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

• 迷你圖表：小巧精致，適合快速展示數(shù)據(jù)。
• 折線圖：流暢的線條，清晰展現(xiàn)數(shù)據(jù)趨勢。
• 餅圖：直觀展示數(shù)據(jù)占比，一目了然。
• 儀表盤：動態(tài)展示關(guān)鍵指標，提升決策效率。
• 雷達圖：全面展示多變量數(shù)據(jù)，洞察數(shù)據(jù)全貌。

其它：更多組件查看-https://vue-data-ui.graphieros.com/examples。

除此之外，它還包含了極具視覺沖擊力的 3D 圖表等高級選項

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

強大的圖表生成器

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

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

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

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

提供高定制化 API

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

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

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

比如我們需要在一個圖表中注入另外一個箭頭標識：

如何快速上手

(1) 安裝

在 Vue 項目中，通過 npm 或 yarn 安裝 Vue Data UI 庫及其樣式文件。

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

(2) 全局注冊

在項目的主入口文件中引入并注冊 Vue Data UI 組件，使其可以在整個項目中使用。

具體的代碼如下：

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) 局部引入

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

例如，如果要使用一個名為 VueDataUi 的組件，可以在組件中進行如下設置：

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

如果您也是一名前端開發(fā)，請一定要嘗試下這個可視化組件庫，因為這個可視化庫真的太酷啦！

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