https://github.com/datav-team/datav-react

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

datav react svg

Last synced: about 3 hours ago
JSON representation

React数据可视化组件库（类似阿里DataV，大屏数据展示），提供SVG的边框及装饰、图表、水位图、飞线图等组件，简单易用，长期更新

• Host: GitHub
• URL: https://github.com/datav-team/datav-react
• Owner: DataV-Team
• License: mit
• Created: 2019-09-12T10:29:25.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-07-14T05:41:59.000Z (over 2 years ago)
• Last Synced: 2024-11-11T07:12:06.710Z (1 day ago)
• Topics: datav, react, svg
• Language: JavaScript
• Homepage: http://datav-react.jiaminghi.com
• Size: 1.48 MB
• Stars: 926
• Watchers: 17
• Forks: 218
• Open Issues: 33
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[ENGLISH](./README_EN.md)



  



DataV-React



    

      

    

    

      

    



## DataV-React 是干什么的?

- DataV-React 是一个基于**React**的数据可视化组件库(当然也有[Vue 版本](https://github.com/DataV-Team/DataV))

- 提供用于提升页面视觉效果的**SVG**边框和装饰

- 提供常用的**图表**如折线图等

- 飞线图/轮播表等其他组件

### 注意事项

**使用了 React Hooks, 简化了许多内部工作。您需要 React 版本 16.8.0 及以上**

### npm 安装

```shell

$ npm install @jiaminghi/data-view-react

```

### 使用

```js

import * as datav from "@jiaminghi/data-view-react";

datav.BorderBox1;

// 或者

import { BorderBox1 } from "@jiaminghi/data-view-react";

// 按需引入

import BorderBox1 from "@jiaminghi/data-view-react/es/borderBox1";

```

详细文档及示例请移步[HomePage](http://datav-react.jiaminghi.com).

### UMD 版

`UMD`版可直接使用`script`标签引入，引入后通过**datav**命名空间使用对应的组件，引入`data-view-react`前请确保已引入`react 和 react-dom`。

[UMD 版使用示例](./umdExample.html)

### TODO

* **地图组件**

* **TS**重构组件库底层依赖

### 致谢

组件库的开发基于个人学习和兴趣，由于技术水平及经验的限制，组件尚有许多不完善之处，如有 BUG 可及时提交[issue](https://github.com/DataV-Team/DataV-React/issues/new?template=bug_report.md)或添加反馈群进行反馈，也欢迎提供指正和建议，感谢各位的支持。

### 反馈

![Feedback](./QQGroup.png)

### Demo

Demo 页面使用了全屏组件，请 F11 全屏后查看。

- [施工养护综合数据](http://datav-react.jiaminghi.com/demo/construction-data/index.html)

![construction-data](./demoImg/construction-data.jpg)

- [机电运维管理台](http://datav-react.jiaminghi.com/demo/manage-desk/index.html)

![manage-desk](./demoImg/manage-desk.jpg)

- [机电设备电子档案](http://datav-react.jiaminghi.com/demo/electronic-file/index.html)

![electronic-file](./demoImg/electronic-file.jpg)