VChart双Y轴组合图实现与优化指南

1. 组合图核心需求解析

在商业智能(BI)和数据分析场景中，组合图是最常用的数据可视化形式之一。它能够将不同类型的数据系列以不同图表形式呈现在同一坐标系中，实现多维度的数据对比分析。本次我们要实现的是一个典型的双Y轴组合图案例：

• 左侧Y轴：用柱状图展示绝对值数据（早餐和午餐的消费金额），刻度为整数
• 右侧Y轴：用折线图展示相对值数据（饮料消费占比），刻度为百分比
• X轴：共享同一时间维度（星期一到星期日）

这种设计在经营分析报表中非常实用，比如可以同时观察销售额绝对值与增长率、客流量与转化率等关联指标。VChart作为专业的可视化库，通过灵活的配置项可以完美支持这类需求。

2. 数据结构与图表配置详解

2.1 数据源格式设计

观察示例代码中的数据部分，采用了VChart标准的values数组格式：

javascript复制data: [
  {
    id: 'id0',  // 柱状图数据集
    values: [
      { x: 'Monday', type: 'breakfast', y: 15 },
      // ...其他数据
    ]
  },
  {
    id: 'id1',  // 折线图数据集 
    values: [
      { x: 'Monday', type: 'drinks', y: 0.22 },
      // ...其他数据
    ]
  }
]

关键设计要点：

1. 分数据集存储：柱状图和折线图数据分别存放在不同数据集，通过id标识
2. 统一字段命名：虽然数据类型不同，但都包含x(分类轴)、type(系列分类)、y(数值)字段
3. 数值差异：柱状图使用整数(15)，折线图使用小数(0.22)表示百分比

提示：实际项目中建议后端API返回的数据也保持这种结构，避免前端需要做复杂的数据转换

2.2 系列(series)配置技巧

系列配置是组合图的核心，本例中定义了两种系列类型：

javascript复制series: [
  {
    type: 'bar',  // 柱状图系列
    id: 'bar',
    dataIndex: 0,  // 使用第一个数据集
    seriesFi