🌈 前言
Vue Data UI
诞生于一个问题:如果你的仪表板这么好,为什么你的用户要求 CSV 导出功能?
这个开源库
的目的是为最终用户提供一组围绕图表和表格的内置工具,以减少重新计算导出数据的麻烦。当然,Vue Data UI 保留了导出为 CSV 和 PDF 的选项,以防万一。
数据,是现代商业决策的基石。但如何将复杂的数据转化为直观、易理解的视觉信息?这正是 Vue Data UI
致力于解决的问题。
🚀 丰富的图表类型,颜值爆表
探索数据的无限可能,Vue Data UI
带你领略数据之美!目前官方共提供 54 种 可视化组件,满足您的各种需求:
🌟 迷你图表:小巧精致,适合快速展示数据。 📈 折线图:流畅的线条,清晰展现数据趋势。 🍕 饼图:直观展示数据占比,一目了然。 📋 仪表盘:动态展示关键指标,提升决策效率。 🔍 雷达图:全面展示多变量数据,洞察数据全貌。 🎨 3D 图表:立体展示数据,增强视觉冲击力。 🚀 其它:更多组件查看-https://vue-data-ui.graphieros.com/examples。
📊 强大的图表生成器
告别繁琐,迎接效率!Vue Data UI
提供了一款超强大的图表可视化生成器
,可视化编辑,所见即所得
通过直观的可视化界面,编写数据集,调整配置设置。 一切配置皆可可视化,无需再翻阅大量 API 文档。 直接复制组件代码,快速集成到您的项目中。
一键复制
组件代码,重点:组件代码
📈 提供高定制化 APi
Vue Data UI
不仅仅是一个图表库,它是您项目中的定制化利器
。提供了丰富的 API
和 插槽
属性,确保您的每一个独特需求都能得到满足。
利用提供的 API,您可以对图表的每一个细节进行精细调整。 插槽属性让您能够插入自定义的 HTML
或Vue
组件,实现真正的个性化设计。
比如我们需要在一个图表中注入另外一个图表:
注入一个箭头:
🛠️ 易于集成,快速上手
官方文档有很显眼的一句:1 import , 3 props , 54 components
安装
npm i vue-data-ui
# or
yarn add vue-data-ui
组件使用
<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://vue-data-ui.graphieros.com/