我要投稿

[开源]一个基于 TypeScript 实现的类型丰富、高性能、模块化、可扩展、支持主题定制的跨平台图表库

百创网行业资讯

2025-11-03 0 588

一、开源项目简介

UCharts – 跨平台可视化图表库

UCharts 是一个基于 TypeScript 实现的类型丰富、高性能、模块化、可扩展、支持主题定制的跨平台图表库。底层渲染逻辑全部采用 TypeScript 实现，上层通过适配层（adapters）适配到不同平台，包括鸿蒙（HarmonyOS）、微信小程序、uniapp 等，真正实现”一套核心，多端复用”。

二、开源协议

使用Apache-2.0开源协议

三、界面展示

图表示例

以下为部分图表类型的鸿蒙平台实际渲染效果：

柱状图
区域图
山峰图
散点图
气泡图
饼图
玫瑰图
雷达图
词云图

[开源]一个基于 TypeScript 实现的类型丰富、高性能、模块化、可扩展、支持主题定制的跨平台图表库

进度条
仪表盘
漏斗图
K线图

（更多类型和样式可参考 docs 目录）

四、功能概述

特性

跨平台

支持鸿蒙、微信小程序、uniapp 等主流平台
模块化设计

底层渲染与平台适配解耦，易于扩展和维护
️ TypeScript 全面支持：类型安全，开发体验优秀
丰富图表类型

柱状图、条状图、折线图、区域图、山峰图等
⚡ 高性能渲染：底层优化，动画流畅
易于扩展

支持自定义图表类型和平台适配
自定义样式

支持主题定制

支持的图表类型

柱状图 (column)
条状图 (bar)
折线图 (line)
区域图 (area)
山峰图 (mount)
散点图 (scatter)
气泡图 (bubble)
混合图 (mix)
饼状图 (pie)
环形图 (ring)
玫瑰图 (rose)
雷达图 (radar)
词云图 (word)
进度条 (arcbar)
仪表盘 (gauge)
漏斗图 (funnel)
K线图 (candle)
地图 (map)
更多类型持续开发中…

五、技术选型

下载安装

鸿蒙平台请查看适配目录的README.md文件，其他平台可通过Github下载

快速开始

<!-- 原生H5 --><html lang="zh-CN"><head>  ....</head><body>  <canvas id="chart" width="600px" height="400px"></canvas>  ...  <!-- 引入构建后的uCharts库 -->  <script src="../adapters/dist/h5/ucharts-v3.min.js"></script>  <script language="JavaScript">    function createLineChart() {      const canvas = document.getElementById('chart');      const ctx = new UCharts.H5CanvasContext(canvas.getContext("2d"));      const chart = new UCharts({          type: "line",          context: ctx,          categories: ["2018","2019","2020","2021","2022","2023"],          series: [              {                  name: "成交量A",                  data: [35,8,25,37,4,20]              },              {                  name: "成交量B",                  data: [70,40,65,100,44,68]              },              {                  name: "成交量C",                  data: [100,80,95,150,112,132]              }          ],          padding: [15,10,0,15],          xAxis: { disableGrid: true },          yAxis: { gridType: "dash", dashLength: 2 },          extra: {            line: {              type: "straight",              width: 2,              activeType: "hollow"            }          }      });    }    // 页面加载完成后默认显示折线图    window.onload = function() {      createLineChart();    };  </script></body></html>

具体平台的 context 获取方式请参考各自适配层文档。

目录结构

├── core/                # 图表核心能力（平台无关）│   ├── types/           # 类型定义│   ├── utils/           # 工具函数│   ├── chart/           # 各类图表渲染器│   ├── event/           # 事件系统│   ├── animation/       # 动画系统│   └── factory.ts       # 图表工厂├── adapters/            # 平台适配层│   ├── harmony/         # 鸿蒙适配│   ├── h5/              # 原生H5适配│   ├── wechat/          # 微信小程序适配│   └── uniapp/          # uniapp适配├── interface/           # 对外统一接口│   ├── CanvasContext.ts   # 跨平台统一 canvas context 接口定义├── examples/            # 示例代码├── docs/                # 文档└── README.md

性能优化

底层渲染优化

TypeScript 实现，便于多端编译优化
动画与事件分离

动画、事件系统独立，提升流畅度
按需加载

仅加载所需图表类型和适配层

兼容性

鸿蒙系统

支持 HarmonyOS 5.0 及以上
浏览器

支持浏览器等H5运行环境
微信小程序

支持主流小程序平台（适配中…）
uniapp

支持主流 uniapp 运行环境（适配中…）

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

免责声明 1、百创网作为第三方中介平台，依据交易合同（商品描述、交易前商定的内容）来保障交易的安全及买卖双方的权益； 2、非平台线上交易的项目，出现任何后果均与百创网无关；无论卖家以何理由要求线下交易的，请联系管理举报。 3. 百创网网站的资源均由店家上传出售，本站无法判断和识别资源的版权等合法性属性。如果您对本网站上传的信息资源的版权存有异议，请您及时联系我们。如果需要删除链接，请下载下面的附件，正确填写信息后并发给我们，本站核实信息真实性后，在24小时内对商品进行删除处理。联系邮箱：baicxx@baicxx.com （相关事务请发函至该邮箱）

百创网-源码交易平台_网站源码_商城源码_小程序源码行业资讯 [开源]一个基于 TypeScript 实现的类型丰富、高性能、模块化、可扩展、支持主题定制的跨平台图表库 https://www.baicxx.com/35059.html

百创网

上一篇：一款基于 SpringBoot + Vue3 开源的前后端分离微服务低代码工作流平台

已经没有下一篇了!

常见问题

发货方式是什么？

1、自动：拍下后，点击（下载）链接即可下载；2、手动：拍下后，联系卖家发放即可或者联系官方找开发者发货。

查看详情

交易周期是多久呢？

1、源码默认交易周期：手动发货商品为1-3天，并且用户付款金额将会进入平台担保直到交易完成或者3-7天即可发放，如遇纠纷无限期延长收款金额直至纠纷解决或者退款！；

查看详情

注意事项

1、百创会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全！ 2、百创无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别； 3、在源码同时有网站演示与图片演示，且站演与图演不一致时，默认按图演作为纠纷评判依据（特别声明或有商定除外）； 4、在没有”无任何正当退款依据”的前提下，商品写有”一旦售出，概不支持退款”等类似的声明，视为无效声明； 5、在未拍下前，双方在QQ上所商定的交易内容，亦可成为纠纷评判依据（商定与描述冲突时，商定为准）； 6、因聊天记录可作为纠纷评判依据，故双方联系时，只与对方在百创上所留的QQ、手机号沟通，以防对方不承认自我承诺。 7、虽然交易产生纠纷的几率很小，但一定要保留如聊天记录、手机短信等这样的重要信息，以防产生纠纷时便于百创介入快速处理。

查看详情

百创声明

1、百创作为第三方中介平台，依据交易合同（商品描述、交易前商定的内容）来保障交易的安全及买卖双方的权益； 2、非平台线上交易的项目，出现任何后果均与百创无关；无论卖家以何理由要求线下交易的，请联系管理举报。

查看详情

免责申明

免责声明 1、百创网作为第三方中介平台，依据交易合同（商品描述、交易前商定的内容）来保障交易的安全及买卖双方的权益； 2、非平台线上交易的项目，出现任何后果均与百创网无关；无论卖家以何理由要求线下交易的，请联系管理举报。 3. 百创网网站的资源均由店家上传出售，本站无法判断和识别资源的版权等合法性属性。如果您对本网站上传的信息资源的版权存有异议，请您及时联系我们。如果需要删除链接，请下载下面的附件，正确填写信息后并发给我们，本站核实信息真实性后，在24小时内对商品进行删除处理。联系邮箱：baicxx@baicxx.com （相关事务请发函至该邮箱）

查看详情