DataV-React 数据可视化组件库教程

平钰垚Zebediah

于 2024-08-31 07:25:40 发布

阅读量814

点赞数 7

本文链接：https://blog.csdn.net/gitblog_00543/article/details/141733692

版权

DataV-React 数据可视化组件库教程

DataV-ReactReact数据可视化组件库（类似阿里DataV，大屏数据展示），提供SVG的边框及装饰、图表、水位图、飞线图等组件，简单易用，长期更新项目地址:https://gitcode.com/gh_mirrors/da/DataV-React

1、项目介绍

DataV-React 是一个基于 React 的数据可视化组件库，旨在帮助开发者快速构建大型（全屏）数据展示页面，即数据可视化大屏。该库提供了多种类型的组件，包括 SVG 边框和装饰、图表（如折线图）、水位图、飞线图等，以及其他实用组件。DataV-React 简单易用，长期维护更新，适用于需要复杂数据展示的场景。

2、项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 DataV-React：

npm install @jiaminghi/data-view-react

快速开始

以下是一个简单的示例，展示如何在项目中使用 DataV-React 的加载组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DataV-React 示例</title>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@jiaminghi/data-view-react/umd/datav.js"></script>
  <style>
    html, body, #app {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .border-box-content {
      color: rgb(66, 185, 131);
      font-size: 40px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script>
    const e = React.createElement;
    ReactDOM.render(e(datav.Loading), document.querySelector('#app'));
  </script>
</body>
</html>