VChart双轴图实现与优化实战

1. 组合图需求背景与核心挑战

在商业智能(BI)数据分析场景中，组合图(双轴图)是最常用的数据可视化形式之一。当我们需要同时观察两个量纲不同的指标时（比如销售额绝对值和转化率百分比），就需要使用左右双Y轴的设计方案。这种图表类型在电商运营分析、金融数据监控、生产效能看板等场景中尤为常见。

以某电商大促活动监控看板为例：

• 左轴需要展示实时成交金额（单位：万元整数）
• 右轴需要显示转化率（百分比格式）
• 两个指标需要保持时间维度对齐
• 需要清晰区分不同指标系列的视觉编码

2. VChart 双轴图实现方案

2.1 基础配置结构

使用VChart实现双轴图的核心配置包括：

javascript复制const spec = {
  type: 'common',
  series: [
    {
      type: 'line',
      // 左轴系列配置
      yField: 'sales',
      seriesField: 'category',
      axes: [{ orient: 'left' }]
    },
    {
      type: 'bar',
      // 右轴系列配置
      yField: 'conversion',
      seriesField: 'category', 
      axes: [{ orient: 'right' }]
    }
  ],
  axes: [
    {
      orient: 'left',
      type: 'linear',
      // 左轴整数格式化
      label: {
        formatMethod: val => Math.round(val)
      }
    },
    {
      orient: 'right',
      type: 'linear',
      // 右轴百分比格式化
      label: {
        formatMethod: val => `${(val * 100).toFixed(1)}%`
      },
      // 确保百分比轴显示0-100%范围
      nice: false,