# datavis-components-vue3

**Repository Path**: qiantech-design/datavis-components-vue3

## Basic Information

- **Project Name**: datavis-components-vue3
- **Description**: 千行千屏-可视化平台-组件库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-04-21
- **Last Updated**: 2025-09-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 千行千屏-可视化平台-组件库

![](https://img.shields.io/badge/License-MIT-blue.svg)<font style="color:rgb(64, 64, 64);">  
</font>![](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)

**50+精心打造的大屏组件 | 开箱即用 | 企业级性能 | 无限扩展可能**

千行千屏”是一款在线数据可视化大屏开发软件，作为业界领先的数据可视化大屏产品，“千行千屏”以其独特的拖拉拽操作模式，彻底颠覆了传统数据展示方式。它不仅更直观、更易用、模版丰富，而且高效灵活，即使是非技术人员也能轻松上手，快速创建、编辑出极具视觉冲击力的可视化内容。

千行千屏官方网站: [https://www.qiantech.com.cn/](https://www.qiantech.com.cn/);

大屏可视化平台体验网址: [https://www.qiantech.com.cn/](https://www.qiantech.com.cn/);

测试账号用户名:`test`, 密码:`Qian@1234`;

欢迎大家体验、使用。

![大屏列表](./readme/image.png)

## 🌟 项目愿景

我们致力于打造大屏开发领域的开源基础设施，通过社区协作构建最丰富、最灵活、最具扩展性的可视化组件生态。无论您需要快速搭建数据大屏，还是开发定制化企业级解决方案，这里都将是您的最佳起点。

## 🚀 核心优势

### 📦 丰富组件矩阵

- 六大组件分类覆盖全场景

  - **数据图表**（折线/柱状/饼图/热力图等）

折线图示例：

![折线图](./readme/image_01.png)

柱状图示例：

![柱状图](./readme/image_02.png)

饼图示例：

![饼图](./readme/image_03.png)


  - **信息展示**（内容模块/数字翻牌器）

内容模块示例：

![数据内容模块](./readme/image_04.png)

数字翻牌器示例：

![数字翻牌器](./readme/image_05.png)

  - **空间可视化**（3D 地球/区域热图）

空间可视化大屏示例1：

![输入图片说明](./readme/image_06.png)

空间可视化大屏示例2：

![输入图片说明](./readme/image_07.png)

  - **交互组件**（可配置弹窗/控制面板）

可配置弹窗示例：

![可配置弹窗示例](./readme/image_08.png)

控制面板示例：

![信息控制面板](./readme/image_09.png)

  - **基础元素**（智能表格/动态文本框）

智能表格示例：

![表格示例](./readme/image_10.png)

动态文本框示例：

![文本框](./readme/image_11.png)


  - **装饰元素**（动态边框/粒子特效）

动态边框示例：

![边框](./readme/image_13.png)

装饰元素示例：

![示例](./readme/image_12.png)


## ⚡ 卓越技术特性

svg 为基座，foreignObject 作为组件容器，兼顾 svg 可绘制图形。基于 foreignObject，用户可以任意开发组件，同时组件以 datavis-core（千行千屏可视化核心引擎）为基础，向组件注入关键的位置渲染、事件发布订阅、图纸结构等能力。

```vue
// 配置示例
    <div class="preview-component" id="componentWrap">
      <div id="componentCanvas" class="preview-component-canvas">
        <svg style="width: 100%; height: 100%; overflow: visible; background: #051a3e" v-if="datavisEditor && datavisEditor.objects">
          <g v-for="item in datavisEditor.objects" :key="item.id">
            <component :is="item.component.name" :node="item" />
          </g>
        </svg>
      </div>
    </div>
  <script setup>
    import { onBeforeUnmount, onMounted, ref } from 'vue'
    import datavisCore from '@/assets/js/datavis/core/index.es.js'
    const datavisEditor: any = ref()
    onMounted(() => {
      datavisEditor.value = new datavisCore('#componentWrap', {
        canvas: '#componentCanvas',
        type: 'render'
        width: 1920,
        height: 1080
      }

  datavisEditor.value.initializeHandler.call(datavisEditor.value)                                 })
  </script>
```

- **扩展接口：** 提供 DatavisCore 核心能力，支持自定义组件开发

- **智能数据映射：** 支持 JSON 数据自动适配

- **动画引擎：** 内置多种交互动画，支持旋转、管道流动、文字轮播、表格滚动等动画

## 🌍 开源价值

我们坚信：

- **开放协作**是技术进步的加速器
- **知识共享**能创造更大社会价值
- **社区共建**是保持项目活力的源泉

  通过 MIT 协议，您拥有：

  ✅ 商业项目自由使用

  ✅ 源码级定制权利

  ✅ 二次分发自由

  ✅ 专利授权保障

## 👥 社区共建计划

### 贡献者画像

- **前端开发者：** 开发新组件/优化核心架构

- **设计师：** 贡献设计稿/完善交互规范

- **技术写作者：** 改进文档/编写使用案例

- **普通用户：** 提交 issue/分享使用经验

### 参与方式

1. 代码贡献：从 [https://gitee.com/qiantech-design/datavis-components-vue3](https://gitee.com/qiantech-design/datavis-components-vue3) pull/push代码

2. 文档完善：补充组件示例/最佳实践

3. 生态建设：开发适配器（Vue/React 版本等）

4. 社区支持：回答问题/编写教程

## 📦 快速开始

```bash
git clone https://gitee.com/qiantech-design/datavis-components-vue3.git
cd datavis-components-vue3
npm install
```

## 📚 学习资源

- [组件开发规范](https://www.yuque.com/qiantech/datavis/ysgl38ny2q7mgbrd)

- [组件开发示例](https://www.yuque.com/qiantech/datavis/wxgd1btfid4hnm0f)

## 🤝 加入我们

扫描二维码加入开发者社群：
[社群二维码占位]

关注我们的微信服务号：

![](https://www.qiantech.com.cn/static/website/img/web/qrcode_fw.jpg)

**让每一次数据呈现都成为艺术**

**让每一行代码都创造价值**

## 联系我们

微信：QianHangService

<img src="https://www.qiantech.com.cn/static/website/img/web/qrcode_vx2.jpg" width="200" />

QQ：3908700638

<img src="https://www.qiantech.com.cn/static/website/img/web/qrcode_qq.png" width="200" />