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

源码资源网 · 发表于昨天 21:45

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

跨平台：支持鸿蒙、微信小程序、uniapp 等主流平台
模块化设计：底层渲染与平台适配解耦，易于扩展和维护
TypeScript 全面支持：类型安全，开发体验优秀
丰富图表类型：柱状图、条状图、折线图、区域图、山峰图等
高性能渲染：底层优化，动画流畅
易于扩展：支持自定义图表类型和平台适配
自定义样式：支持主题定制

支持的图表类型

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

快速开始

<html lang="zh-CN">
<head>
....
</head>
<body>
<canvas id="chart" width="600px" height="400px"></canvas>
...
<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>

复制代码

跨平台适配层说明

每个平台在 adapters/ 下有独立目录，负责将平台 API 适配为统一的底层渲染接口。
适配层需实现统一的适配接口，并暴露标准的 context、事件等能力，可参考h5实现。
新增平台时，仅需在 adapters/ 下新增目录并实现适配接口，无需修改 core 层代码。
CanvasContext 统一接口：
- ChartOptions.context 字段要求传入的 canvas context 必须兼容 interface/CanvasContext 类型。
- 各平台适配层需将平台原生 canvas context 封装/适配为该接口，保证 core 层渲染逻辑的统一调用。
- 具体接口定义见 interface/CanvasContext.ts，如需适配新平台，请实现该接口。

开发指南新增图表类型