登录注册

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

开源系统
2026-06-10 12:19 3 次浏览 • 0 次下载 0KB
[开源]类型丰富 高性能 模块化 可扩展、支持主题定制的跨平台图表库

一、开源项目简介

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

性能优化

  • 底层渲染优化
    TypeScript 实现，便于多端编译优化
  • 动画与事件分离
    动画、事件系统独立，提升流畅度
  • 按需加载
    仅加载所需图表类型和适配层

兼容性

  • 鸿蒙系统
    支持 HarmonyOS 5.0 及以上
  • 浏览器
    支持浏览器等H5运行环境
  • 微信小程序
    支持主流小程序平台（适配中...）
  • uniapp
    支持主流 uniapp 运行环境（适配中...）
评论