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

艺齐飞

发布于 2025-11-30 11:06:15

1540

一飞开源，介绍创意、新奇、有趣、实用的开源应用、系统、软件、硬件及技术，一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活力开源社区，共建开源新生态！

一、开源项目简介

UCharts - 跨平台可视化图表库

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

二、开源协议

使用Apache-2.0开源协议

三、界面展示

图表示例

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

柱状图

区域图

山峰图

散点图

气泡图

饼图

玫瑰图

雷达图

词云图

进度条

仪表盘

漏斗图

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