{"id":17767606,"url":"https://github.com/pengxiaotian/datav-vue","last_synced_at":"2025-05-16T12:03:12.114Z","repository":{"id":37520692,"uuid":"345035349","full_name":"pengxiaotian/datav-vue","owner":"pengxiaotian","description":"A Powerful Data Visualization Tool. Uses TypeScript And Vue3. Scenario-specific templates. User-friendly interfaces. 一款数据可视化应用搭建工具","archived":false,"fork":false,"pushed_at":"2023-11-08T13:56:57.000Z","size":105487,"stargazers_count":749,"open_issues_count":16,"forks_count":211,"subscribers_count":24,"default_branch":"main","last_synced_at":"2025-05-14T19:52:45.839Z","etag":null,"topics":["big-data","data-visualization","datav","echarts","echarts5","pinia","typescript","visualization","vue","vue3"],"latest_commit_sha":null,"homepage":"https://datav.pengxiaotian.com","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pengxiaotian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-06T07:41:03.000Z","updated_at":"2025-05-14T08:15:09.000Z","dependencies_parsed_at":"2024-10-26T21:15:42.305Z","dependency_job_id":"7de19be6-a194-4c5d-b90b-5f2403656d2c","html_url":"https://github.com/pengxiaotian/datav-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pengxiaotian%2Fdatav-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pengxiaotian%2Fdatav-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pengxiaotian%2Fdatav-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pengxiaotian%2Fdatav-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pengxiaotian","download_url":"https://codeload.github.com/pengxiaotian/datav-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254527084,"owners_count":22085918,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["big-data","data-visualization","datav","echarts","echarts5","pinia","typescript","visualization","vue","vue3"],"created_at":"2024-10-26T20:49:23.287Z","updated_at":"2025-05-16T12:03:12.061Z","avatar_url":"https://github.com/pengxiaotian.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./public/logo.png\"\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eDataV Vue\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/pengxiaotian/datav-vue/actions/workflows/main-deploy.yml\"\u003e\n    \u003cimg src=\"https://github.com/pengxiaotian/datav-vue/actions/workflows/main-deploy.yml/badge.svg?branch=main\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e一款数据可视化应用搭建工具\u003c/p\u003e\n\n* 💪 Vue 3.0+\n* ⚡ Vite 3.0+\n* 🍍 Pinia 2.0+\n* 🔥 TypeScript 4.0+\n* 🔥 ECharts 5.0+\n\n## 关于贡献\n\n在完成第一个可用版本之前只接受 `fixbug PR`，不接受 `feature PR`。\n\n## 简介\n\n- [国外 GitHub](https://github.com/pengxiaotian/datav-vue)\n- [国内 Gitee](https://gitee.com/pengxiaotian/datav-vue)\n\n### 预览\n- [DataV 在线预览](https://datav.pengxiaotian.com)\n\n\u003e 因 [RAP2](https://github.com/thx/rap2-delos) 只支持 `HTTP`, 所以只在开发环境中使用\n\n\u003e 生产环境使用 [Mockjs](https://github.com/nuysoft/Mock) 代替\n\n#### 示例\n|        |        |\n| ------ | ------ |\n| ![登录页](./demo/login.png)  |  ![可视化列表](./demo/home.png) |\n| ![模板列表](./demo/template.png)  |  ![编辑器](./demo/editor.png) |\n\n## CheckList\n\n```\n- 页面功能\n- [x] 登录页\n  * [x] 看板娘\n- [x] 首页\n  * [x] 可视化管理\n    - [x] 模板\n  * [ ] 数据管理\n  * [ ] 组件管理\n  * [ ] 示例\u0026教程\n- [x] 编辑器\n  * [x] 图层面板\n  * [x] 组件面板\n  * [x] 配置面板\n    - [x] 画布属性面板\n    - [x] 组件属性面板\n    - [x] 组件数据面板\n    - [x] 组件交互面板\n  * [x] 画布/右键菜单/快捷键\n    - [x] 截屏/标尺/参考线/组件拖拽/缩放布局\n    - [x] 置顶/置底/上移一层/下移一层/解锁/锁定/显示/隐藏/重命名/复制/删除\n    - [x] 撤销/恢复\n    - [x] 框选组件/组合/拆分\n  * [x] 其他\n    - [x] 滤镜配置\n    - [x] 保存/预览/发布\n\n- 基础组件库\n- [ ] 柱图\n  * [x] 基本柱状图\n  * [ ] 弧形柱图\n  * [ ] 折线柱图\n  * [ ] 水平基本柱状图\n- [ ] 折线\n  * [x] 基本折线图\n  * [ ] 区域图\n- [ ] 饼图\n  * [ ] 基本饼图\n  * [ ] 指标占比图\n- [ ] 关系\n  * [ ] 树图\n- [ ] 地图\n  * [x] 基础平面中国地图\n    - [x] 区域热力层\n    - [x] 动态气泡层\n    - [x] 飞线层\n  * [ ] 基础平面地图\n  * [ ] 3D平面地图\n  * [ ] 3D地球\n- [x] 文本标题\n  * [x] 通用标题\n  * [x] 数字翻牌器\n  * [x] 跑马灯\n  * [x] 多行文本\n  * [x] 时间器\n  * [x] 词云\n- [x] 列表\n  * [x] 轮播列表\n  * [x] 轮播列表柱状图\n- [x] 媒体\n  * [x] 单张图片\n  * [x] 装饰\n  * [x] 边框\n  * [x] 自定义背景\n- [ ] 控件\n  * [x] 全屏切换\n  * [ ] Tab列表\n  * [ ] 进度条\n- [x] 其他\n  * [x] 日期选择器\n```\n\n## 安装与使用\n\n```bash\n# 初始化项目\npnpm run bootstrap\n\n# 跑起来！\npnpm run dev\n\n# 构建发布\npnpm run build\n\n# 本地预览，需要先执行 build\npnpm run serve\n```\n\n### 新建可视化组件\n\n```bash\npnpm run new datav\n```\n\n### 配置可视化组件\n\n#### 目录结构 (如: main-title):\n\n```bash\nmain-title\n├── index.ts             # 组件入口\n└── src\n    ├── index.vue        # 组件入口\n    ├── main-title.ts    # 组件声明类\n    ├── config.vue       # 组件属性配置\n    └── config.json      # 用于生成 config.vue 的配置文件\n```\n\n#### 使用组件\n\n打开文件 `src/data/system-components.ts`, 找到或新增对应组件节点：\n\n```js\n{\n  name: '',\n  alias: '',\n  used: true, // 启用需改为 true\n  // ...\n}\n```\n\n#### 使用 DataV-CLI-UI 工具\n\n\u003e 其中 `config.vue` 和 `config.json` 文件，可以通过 [datav-cli-ui](./datav-cli-ui/) 工具进行配置，[更多详情 »](./datav-cli-ui/README.md)。\n\n- 工具预览\n![prop-config](./demo/prop-config.png)\n\n### 更多新建选项\n\n- 通过选项模式\n\n```bash\n# 创建组件\npnpm run new component\n\n# 创建 Store\npnpm run new store\n\n# 创建 Icon\npnpm run new icons\n```\n\n## 国际化\n目前只有 `登录页` 进行了国际化设置，有需要可自行添加。\n\n### 添加多语言\n\n多语言文件位置：`@/locales/lang/*.js`\n\n### 使用\n\n- Options API：\n```html\n\u003ctemplate\u003e\n  ...\n    {{ $t('xxx') }}\n  ...\n\u003c/template\u003e\n```\n\n- Componsition API：\n```js\nimport { useI18n } from 'vue-i18n'\n\n...\nsetup() {\n  const { t } = useI18n({ useScope: 'global' })\n\n  t('xxx')\n\n  return { t }\n}\n...\n```\n\n## Donate\n\n如果你觉得这个项目帮助到了你，你可以帮作者买一杯奶茶或点心表示鼓励 :gift_heart:\n|Alipay|Wechat|\n| :------: | :------: |\n| ![donate-Alipay](./demo/donate/alipay.jpg)  |  ![donate-Wechat](./demo/donate/wechat.jpg) |\n\n## 许可\n\nDataV Vue 使用 [MIT license](https://opensource.org/licenses/MIT) 许可证书。\n\n## 注意\n\n本项目主要用来研究与学习，如果商用请注意：项目里含有一些第三方付费素材。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpengxiaotian%2Fdatav-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpengxiaotian%2Fdatav-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpengxiaotian%2Fdatav-vue/lists"}