Highcharts多Y轴通用配置：如何避免重复编写相同代码

完全没必要重复复制相同的配置！你可以通过提取通用配置+对象合并的方式来简化代码，既清爽又好维护，具体做法如下：

第一步：提取通用配置 #

先把两个Y轴共有的所有属性抽出来，定义成一个单独的基础配置对象：

// 通用Y轴配置，两个轴共享的属性都放这里
const baseYAxisConfig = {
  crosshair: { color: '#FB7F1D' },
  lineColor: '#767676',
  gridLineColor: '#767676',
  minorGridLineColor: '#767676',
  minorTickColor: '#767676',
  tickColor: '#767676',
  labels: { style: { color: '#767676' } },
  title: { style: { color: '#767676' } }
};

第二步：合并配置生成Y轴数组 #

接下来只需要在每个Y轴的配置里，写独有的属性，然后用ES6扩展运算符（...）把基础配置合并进去。如果是嵌套对象（比如labels、title），注意要单独合并嵌套部分，避免覆盖整个对象：

yAxis: [
  // 第一个Y轴：基础配置 + 独有的属性
  {
    ...baseYAxisConfig,
    max: 4000,
    title: { 
      ...baseYAxisConfig.title, // 保留基础的style
      text: 'f-value' // 新增独有的文本
    }
  },
  // 第二个Y轴：基础配置 + 独有的属性
  {
    ...baseYAxisConfig,
    max: 60,
    gridLineWidth: 0,
    alignTicks: false,
    opposite: true,
    labels: {
      ...baseYAxisConfig.labels, // 保留基础的style
      format: '${value}' // 新增独有的格式化规则
    },
    title: {
      ...baseYAxisConfig.title, // 保留基础的style
      text: 'Price' // 新增独有的文本
    }
  }
]

兼容ES5的替代方案 #

如果你的项目环境不支持ES6语法，可以用Object.assign()来实现对象合并：

yAxis: [
  Object.assign({}, baseYAxisConfig, {
    max: 4000,
    title: Object.assign({}, baseYAxisConfig.title, { text: 'f-value' })
  }),
  Object.assign({}, baseYAxisConfig, {
    max: 60,
    gridLineWidth: 0,
    alignTicks: false,
    opposite: true,
    labels: Object.assign({}, baseYAxisConfig.labels, { format: '${value}' }),
    title: Object.assign({}, baseYAxisConfig.title, { text: 'Price' })
  })
]

为什么这么做？ #

这样做的好处非常明显：

• 减少冗余代码，让配置结构更清晰
• 后续如果要修改通用样式（比如把所有轴的文字颜色从#767676改成其他色），只需要修改baseYAxisConfig一次，所有Y轴都会同步更新，维护成本大大降低

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