qCharts 是一个功能齐全、高性能且支持深度交互的鸿蒙原生图表库。参考了经典的HelloCharts-Android 、XCL-Charts和MPAndroidChart，并针对 ArkUI/ArkTS 进行了全面重构和优化。
| 折线图 | 柱状图 | 饼图 |
|---|---|---|
 |
 |
 |
| 雷达图 | 漏斗图 | 仪表盘 |
 |
 |
 |
| 组合图 | 气泡图 | 范围柱图 |
 |
 |
 |
| 圆形进度 | 象限图 | 3D柱图 |
 |
 |
 |
- 多种图表类型：折线图、柱状图（3D/横向/背向）、饼图（3D/玫瑰图/圆环）、雷达图、漏斗图、仪表盘、气泡图、组合图、范围柱图、圆形进度图、象限图。
- 深度交互：
- 缩放与平移：支持流畅的双指捏合缩放（Pinch-to-zoom）和单指拖拽平移。
- 焦点缩放：缩放操作以手指中心点为基准，体验更自然。
- 点击选中：支持点击波点、柱体或气泡进行高亮，并弹出详细数据浮窗（Tooltip）。
- 动效展示：支持数据演变的平滑过渡动画。
- 视觉美化：
- 支持平滑曲线 (Cubic Line)。
- 支持 3D 效果气泡（径向渐变）。
- 支持饼图中心空心设计及分类间距设置。
- 高度可定制：通过
AxisValueFormatter自定义轴标签格式（如货币、单位、百分比等）。
最常用的趋势分析图表。
- 多线对比：支持在同一坐标系展示多条趋势线。
- 平滑曲线：可一键切换为 Cubic 曲线模式。
- 数据标记：支持设置关节点形状（圆、方、方块）及标签展示。
- 背景填充：支持线下方位的颜色填充。
适用于分类统计和对比。
- 标准模型：展示独立的分类柱体。
- 堆叠模式 (Stacked)：支持将多个子数据项堆叠在同一个柱体内，展示总量与构成的关系。
- 子项控制：每个柱体可包含多个子柱体（Sub-columns）。
用于展示比例构成。
- 空心设计：支持中心圆孔及多行中心文字设置。
- 切片间距：支持设置不同分类间的物理间距。
- 动态更新：支持扇区大小变化的动画。
展示三维数据关系（X, Y, Z/Radius）。
- 3D 视觉：气泡自带径向渐变效果，视觉极具深度。
- 智能缩放：根据气泡大小进行视口自动适配。
将折线图与柱状图完美结合。
- 多维度视图：底层展示柱状图背景，顶层叠加折线趋势，适合分析“指标与基准”的关系。
展示多变量数据的对比。
- 多轴设计：支持自定义维度的刻度和网格。
展示各阶段的转化率或占比。
- 阶梯展示：自动计算各级梯形的宽度比例。
展示数值在特定范围内的进度。
- 刻度与指针：支持分段颜色设置及动态指针显示。
展示区间波动数据（最高/最低）。
- 高低值对比：自动计算柱体起始和终止位置，适合展示气温变化、股价波动等。
通过多重同心圆展示多组百分比数据。
- 环形堆叠：支持设置多层环形的半径和宽度，视觉表现力强。
将数据分布在四个核心象限中。
- 多维度分布：通过 X/Y 轴中线将视口分为四个区域，适合 SWOT 分析或波士顿矩阵展示。
// 以折线图为例
let values: PointValue[] = [new PointValue(0, 10), new PointValue(1, 20)];
let line = new ChartLine(values).setColor('#007DFF').setWidth(2);
let data = new LineChartData([line]);
// 设置轴标签格式化
let axisY = new Axis().setHasLines(true);
axisY.setFormatter({
formatValue(value: number): string {
return "￥" + value.toFixed(0);
}
});
data.setAxisYLeft(axisY);let labels = ['力量', '敏捷', '体力', '智力', '技巧'];
let dataset = new RadarDataset([80, 70, 90, 65, 85], '#007DFF', '英雄A');
let radarData = new RadarChartData(labels, [dataset]);let lineData = new LineChartData([line]);
let columnData = new ColumnChartData(columns);
let comboData = new ComboChartData(lineData, columnData);LineChart({
chartData: this.lineChartData,
animateTrigger: $animateTrigger
})
.width('100%')
.height(300)用于定制 X 轴和 Y 轴的外观与行为。
setName(name: string): 设置轴名称。setTextColor(color: string | number): 设置刻度文字颜色。setTextSize(size: number): 设置刻度文字大小。setHasLines(hasLines: boolean): 是否显示网格线。setLinesColor(color: string | number): 设置网格线颜色。setFormatter(formatter: AxisValueFormatter): 设置自定义数值格式化器。
setColor(color: string): 线条颜色。setWidth(width: number): 线条宽度。setPointRadius(radius: number): 节点圆点半径。setCubic(isCubic: boolean): 是否开启平滑曲线模式。setHasLabels(hasLabels: boolean): 是否在节点上方显示数值标签。setShape(shape: ValueShape): 节点形状（CIRCLE, SQUARE, DIAMOND）。
setStacked(isStacked: boolean): 是否开启堆叠模式。getBaseValue(): 获取基准线数值（默认为 0）。
setHasCenterCircle(hasCenterCircle: boolean): 是否显示中心圆孔。setCenterText1(text: string): 设置中心主标题。setCenterText1FontSize(size: number): 设置主标题字号。setSlicesSpacing(spacing: number): 设置切片间的间距。
setBubbleScale(scale: number): 统一调整气泡的显示比例。
setWebColor(color: string): 设置网格线颜色。setAxisColor(color: string): 设置轴线颜色。setLabelsColor(color: string): 设置标签文字颜色。
setSegments(segments: GaugeSegment[]): 设置分段颜色范围。setValue(value: number): 设置当前指针数值。
所有图表均支持通过代码控制交互开关。
setZoomEnabled(enabled: boolean): 开启/关闭缩放功能。setScrollEnabled(enabled: boolean): 开启/关闭平移滚动功能。
| 操作 | 效果描述 |
|---|---|
| 单指滑动 | 平移视口，查看历史或未来数据。 |
| 双指捏合 | 缩放视口（支持以手指中心点为焦点）。 |
| 单指轻触 | 选中数据点，弹出 Tooltip 详情。 |
| 播放动画 | 平滑更新数据点位置，展示动效。 |
目前可以直接拷贝 qchartsLib 源码到你的鸿蒙项目中：
- 将
qchartsLib文件夹复制到工程根目录。 - 在
oh-package.json5中添加本地依赖："dependencies": { "qcharts": "file:./qchartsLib" }
本项目采用 MIT License 协议。