弃用 Echarts！这一次我选择 - Vue Data UI！

🌈 前言

Vue Data UI

诞生于一个问题：

如果你的仪表板这么好，为什么你的用户要求 CSV 导出功能？

这个

开源库

的目的是为最终用户提供一组围绕图表和表格的内置工具，以减少重新计算导出数据的麻烦。当然，Vue Data UI 保留了导出为 CSV 和 PDF 的选项，以防万一。

数据，是现代商业决策的基石。但如何将复杂的数据转化为直观、易理解的视觉信息？这正是

Vue Data UI

致力于解决的问题。

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

探索数据的无限可能，

Vue Data UI

带你领略数据之美！目前官方共提供 54 种 可视化组件，满足您的各种需求：

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

📊 强大的图表生成器

告别繁琐，迎接效率！

Vue Data UI

提供了一款超强大的图表

可视化生成器

，可视化编辑，所见即所得

• 通过直观的可视化界面，编写数据集，调整配置设置。
• 一切配置皆可可视化，无需再翻阅大量 API 文档。
• 直接复制组件代码，快速集成到您的项目中。

一键复制

组件代码，重点：组件代码

📈 提供高定制化 APi

Vue Data UI

不仅仅是一个图表库，它是您项目中的

定制化利器

。提供了丰富的

API

和

插槽

属性，确保您的每一个独特需求都能得到满足。

• 利用提供的 API，您可以对图表的每一个细节进行精细调整。
• 插槽属性让您能够插入自定义的 HTML 或 Vue 组件，实现真正的个性化设计。

比如我们需要在一个图表中注入另外一个图表：

注入一个箭头：

🛠️ 易于集成，快速上手

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

安装

csharp

代码解读

复制代码

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

组件使用

html

代码解读

复制代码

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

如果您也是一名

前端开发

，请一定要尝试下这个

可视化组件库

，因为这个可视化库真的太酷啦！

原文链接：https://juejin.cn/post/7419272082595708955