多Y轴图表：如何直观区分系列所属的Y轴

针对不同的图表库，都有无需手动修改图例的原生实现方式，以下是主流库的解决方案：

ECharts #

可以通过轴样式与系列样式绑定，或者开启轴指示器联动来实现直观关联：

• 给每个Y轴设置与对应系列一致的axisLabel.color和axisLine.lineStyle.color，让轴的颜色和系列线条/标记颜色完全匹配，一眼就能对应；
• 配置axisPointer.type = 'cross'并开启link: {yAxisIndex: 'all'}，鼠标悬停在某个系列上时，对应的Y轴会同步高亮提示。

示例配置片段：

yAxis: [
  {
    type: 'value',
    axisLabel: { color: '#5470c6' }, // 和第一个系列颜色一致
    axisLine: { lineStyle: { color: '#5470c6' } }
  },
  {
    type: 'value',
    axisLabel: { color: '#91cc75' }, // 和第二个系列颜色一致
    axisLine: { lineStyle: { color: '#91cc75' } }
  }
],
series: [
  { type: 'line', yAxisIndex: 0, itemStyle: { color: '#5470c6' } },
  { type: 'line', yAxisIndex: 1, itemStyle: { color: '#91cc75' } }
],
axisPointer: {
  type: 'cross',
  link: { yAxisIndex: 'all' }
}

Highcharts #

可以通过轴位置区分+样式匹配+拆分提示框实现：

• 将其中一个Y轴设置为opposite: true（显示在右侧），另一个保留在左侧，配合系列颜色与轴颜色、标题一致；
• 开启tooltip.split: true，每个系列的提示框会显示在对应Y轴的一侧，明确关联关系。

示例配置片段：

yAxis: [
  {
    title: { text: '流量(MB)' },
    lineColor: '#2f7ed8',
    labels: { style: { color: '#2f7ed8' } }
  },
  {
    title: { text: '响应时间(ms)' },
    opposite: true,
    lineColor: '#0d233a',
    labels: { style: { color: '#0d233a' } }
  }
],
series: [
  { yAxis: 0, color: '#2f7ed8', name: '实时流量' },
  { yAxis: 1, color: '#0d233a', name: '平均响应' }
],
tooltip: { split: true }

Chart.js #

可以通过轴样式匹配+自定义提示框实现：

• 给每个Y轴设置ticks.color和grid.color与对应系列颜色一致；
• 自定义tooltip内容，在提示中明确标注对应的Y轴名称，强化关联。

示例配置片段：

options: {
  scales: {
    y: {
      beginAtZero: true,
      ticks: { color: '#ff6384' },
      grid: { color: 'rgba(255,99,132,0.2)' }
    },
    y1: {
      beginAtZero: true,
      position: 'right',
      ticks: { color: '#36a2eb' },
      grid: { drawOnChartArea: false }
    }
  },
  plugins: {
    tooltip: {
      callbacks: {
        label: function(context) {
          const axisName = context.dataset.yAxisID === 'y' ? '用户数' : '转化率';
          return `${context.dataset.label}: ${context.parsed.y} (${axisName})`;
        }
      }
    }
  }
}

核心思路是让系列样式与对应Y轴的视觉元素（颜色、位置、标题）强绑定，不需要手动修改图例，用户就能直观识别系列对应的Y轴。

内容的提问来源于stack exchange，提问作者Chetan Oswal