• 作者:老汪软件技巧
  • 发表时间:2024-09-29 15:01
  • 浏览量:

大家好,我是 xy‍。今天,我要向大家隆重推荐一款令人惊艳的可视化图表库——Vue Data UI,一个赋予用户权力的数据可视化 Vue3 组件库!

前言

Vue Data UI 诞生于一个问题:如果你的仪表板这么好,为什么你的用户要求 CSV 导出功能?

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

数据,是现代商业决策的基石。但如何将复杂的数据转化为直观、易理解的视觉信息?这正是 Vue Data UI 致力于解决的问题。

丰富的图表类型,颜值爆表

探索数据的无限可能,Vue Data UI 带你领略数据之美!目前官方共提供 54 种 可视化组件,满足您的各种需求:

强大的图表生成器

告别繁琐,迎接效率!Vue Data UI 提供了一款超强大的图表可视化生成器,可视化编辑,所见即所得

一键复制组件代码,重点:组件代码

_怎么调出仪表的数据_如何读取仪表数据

提供高定制化 APi

Vue Data UI 不仅仅是一个图表库,它是您项目中的定制化利器。提供了丰富的 API 和 插槽 属性,确保您的每一个独特需求都能得到满足。

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

注入一个箭头:

️ 易于集成,快速上手

官方文档有很显眼的一句: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>

如果您也是一名前端开发,请一定要尝试下这个可视化组件库,因为这个可视化库真的太酷啦!

最后给大家送上官网地址:/

写在最后