组件功能

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

基础用法

通过 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" }
  ]}
/>

效果展示如下：