腾讯云智能体开发平台 Chart 图表

一、组件功能

数据可视化组件，用于以图形方式展示结构化数据，支持柱状图、折线图和面积图等常见图表类型，适用于趋势分析、对比展示和统计汇总等场景。

二、基础用法

通过 type 指定图表类型，data 提供数据源，series 定义数据系列的展示方式，xAxis 用于配置横轴字段或显示规则。

Template 示例：

<Card> <Chart xAxis="month" data={[ { month: '1月', sales: 120 }, { month: '2月', sales: 200 }, { month: '3月', sales: 150 }, ]} series={[ { type: 'bar', dataKey: 'sales', label: '销售额', color: '#0052D9' }, ]} /></Card>

效果展示如下：

三、属性说明

注意：★ 标记为必填属性。

四、尺寸说明

·在容器内（有 data-w-container 属性的父元素）：图表宽度默认为 100%，自适应容器。

·不在容器内且未设置 width/size：图表宽度默认为 260px。

·高度控制：默认由 aspectRatio 决定（4:3）。

五、ChartDataRow 类型

数据对象支持任意字段：

{ [key: string]: any; // 如 date, Desktop, Mobile 等}

六、SeriesConfig 类型

每个系列配置通过 type 属性指定图表类型。如果所有系列类型相同，使用对应的图表容器；如果类型不同，则使用混合图表模式。

柱状图系列：

{ type: "bar"; dataKey: string; // 数据字段名 label?: string; // 系列标签 color?: string; // 柱子颜色 stack?: string; // 堆叠分组ID}

折线图系列：

{ type: "line"; dataKey: string; label?: string; color?: string; curveType?: CurveType; // 曲线类型}

面积图系列：

{ type: "area"; dataKey: string; label?: string; color?: string; curveType?: CurveType; stack?: string;}

七、XAxisConfig 对象

用于对 X 轴进行精细化控制。

八、CurveType 类型

折线图和面积图支持以下曲线类型：

·"basis" – 基础曲线

·"linear" – 直线

·"natural" – 自然曲线

·"monotoneX" – X 轴单调曲线

·"monotoneY" – Y 轴单调曲线

·"step" – 阶梯曲线

·"stepBefore" – 前阶梯

·"stepAfter" – 后阶梯

九、柱状图

Template 示例：

<Chart xAxis="month" data={[ { month: "1月", sales: 120, profit: 80 }, { month: "2月", sales: 200, profit: 150 } ]} series={[ { type: "bar", dataKey: "sales", label: "销售额", color: "#0052D9" }, { type: "bar", dataKey: "profit", label: "利润", color: "#00A870" } ]}/>

效果展示如下：

十、折线图

Template 示例：

<Chart xAxis="date" data={[ { date: '2024-01', value: 100 }, { date: '2024-02', value: 150 }, ]} series={[ { type: 'line', dataKey: 'value', label: '趋势', color: '#0052D9', }, ]}/>

效果展示如下：

十一、面积图

Template 示例：

<Chart xAxis="time" data={[ { time: "00:00", visitors: 100 }, { time: "12:00", visitors: 300 } ]} series={[ { type: "area", dataKey: "visitors", label: "访问量", color: "#0052D9" } ]}/>

效果展示如下：

十二、混合图表

可以在同一个图表中混合使用不同类型的图表进行展示。

Template 示例：

<Chart xAxis="month" data={[ { month: "1月", sales: 120, target: 100 }, { month: "2月", sales: 200, target: 150 } ]} series={[ { type: "bar", dataKey: "sales", label: "实际销售", color: "#0052D9" }, { type: "line", dataKey: "target", label: "目标", color: "#00A870" } ]}/>

效果展示如下：