当前位置：首页 > article >正文

一款基于 Vue 3 的现代化数据可视化组件库，功能强大，颜值爆表，开发者必备！（带私活源码）

article 2024/10/22 0:00:37

Vue Data UI 是一款基于 Vue 3 的现代化数据可视化组件库，专为开发者提供强大的数据展示功能，旨在帮助用户通过图形化手段生动地讲述数据故事。该库由开源开发者 Graphieros 创建和维护，专注于提升图形渲染性能与交互体验，并致力于帮助开发者解决复杂的数据展示问题。

解决数据展示难题

Vue Data UI 的诞生源于对数据可视化的思考：为什么许多用户在使用精美的仪表板时，仍需要导出数据进行额外分析？该库旨在减少开发者为满足数据导出需求而做的额外工作。虽然保留了导出 CSV 和 PDF 的功能，Vue Data UI 的核心是通过其多样化的可视化工具，让用户直接从图表中获取有价值的洞察，减少不必要的操作。

🚀丰富的图表类型，颜值爆表

组件的多样性与美感，`Vue Data UI` 带你领略数据之美！目前官方共提供 54 种可视化组件，满足您的各种需求：

• 🌟 迷你图表：小巧精致，适合快速展示数据。
• 📈 折线图：流畅的线条，清晰展现数据趋势。
• 🍕 饼图：直观展示数据占比，一目了然。
• 📋 仪表盘：动态展示关键指标，提升决策效率。
• 🔍 雷达图：全面展示多变量数据，洞察数据全貌。
• 🎨 3D 图表：立体展示数据，增强视觉冲击力。
• 🚀 其它：更多组件查看-https://vue-data-ui.graphieros.com/examples。

图表组件展示

部分迷你图表展示

图表配置与生成器

Vue Data UI 还提供了强大的图表生成器，帮助开发者告别繁琐的配置过程。

• 通过简单直观的界面，开发者可以实时调整图表的参数配置，所见即所得，不需要翻阅冗长的 API 文档。
• 这一功能提升了开发效率，尤其是在快速迭代的项目中非常实用。

一键复制组件代码，重点：组件代码

自定义能力

Vue Data UI 的 API 非常灵活，开发者可以通过丰富的属性和插槽对图表进行深度定制，甚至可以将多个图表嵌入到同一个组件中，以满足复杂的业务场景需求。无论是调整图表样式、插入自定义组件，还是改变图表交互逻辑，Vue Data UI 都提供了广泛的支持。

易于安装与集成

官方文档有很显眼的一句：1 import , 3 props , 54 components

Vue Data UI 的安装和使用过程非常简洁，只需通过 NPM 或 Yarn 安装，便可立即开始使用。通过简洁的配置与组件引用方式，开发者能够在短时间内将其集成到现有项目中：

安装

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

main.js使用组件以及引入样式：

import { createApp } from "vue";
import App from "./App.vue";
// Include the css;
import "vue-data-ui/style.css";

// You can declare Vue Data UI components globally
import { VueUiRadar } from "vue-data-ui";

const app = createApp(App);

app.component("VueUiRadar", VueUiRadar);
app.mount("#app");

这种是全局组件方式使用图表组件，也可以使用下面这种：

组件导入使用

<script setup>
import {(VueUiRadar, VueUiXy)} from "vue-data-ui";
</script>

新功能：从2.0.38版本开始，可以使用VueDataUi通用组件，只需指定要使用的组件。当然，如果目标组件有提供的插槽，也可以使用它们。

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

const config = ref({...});
const dataset = ref([...]);

</script>

<template>

  <VueDataUi
    component="VueUiXy"
    :config="config"
    :dataset="dataset"
  />

</template>

源码地址

https://github.com/graphieros/vue-data-ui

官方网站

https://vue-data-ui.graphieros.com/

随着社区的不断发展，Vue Data UI 有望成为数据可视化领域的重要工具，促进开发者之间的交流与合作。

结语

Vue Data UI 是一款功能强大且易于使用的 Vue 3 数据可视化组件库，凭借丰富的图表类型、灵活的定制化选项和简单的集成方式，它能够帮助开发者轻松地将复杂的数据转化为直观的图形展示。无论是用于仪表板、报告生成，还是业务分析，Vue Data UI 都能以优雅的方式满足各种需求，提升用户的可视化体验。