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