如何将图表series的name属性值设置为y轴的标签内容

首先先提取你现有series配置中的所有name值，提取代码如下：

// 你原有的series配置
const series = [/* 你给出的series数组 */]
// 提取所有name组成数组
const yAxisLabelList = series.map(item => item.name)

下面分两种主流前端图表库给出具体配置： #

ECharts实现 #

场景1：单Y轴分类展示（条形图场景，最常用） #

如果你的需求是Y轴每个标签对应一个series，X轴展示数值，直接用如下配置：

const option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    // 直接绑定提取的name数组作为Y轴标签
    data: yAxisLabelList,
    axisLabel: {
      // 可自定义标签样式
      fontSize: 13,
      color: '#333'
    }
  },
  series: series
}

场景2：多独立Y轴场景 #

如果需要每个series对应一个独立的Y轴，可通过遍历动态生成Y轴配置：

const option = {
  xAxis: {
    type: 'category',
    data: ['维度1', '维度2'] // 对应你数据中的x=0和x=1
  },
  // 动态生成Y轴配置
  yAxis: series.map((item, index) => ({
    type: 'value',
    name: item.name,
    // 左右错开Y轴避免重叠
    position: index % 2 === 0 ? 'left' : 'right',
    // 同侧Y轴设置偏移避免覆盖
    offset: Math.floor(index / 2) * 60
  })),
  // 给每个series绑定对应的Y轴索引
  series: series.map((item, index) => ({
    ...item,
    yAxisIndex: index
  }))
}

Highcharts实现 #

场景1：单Y轴分类展示（条形图） #

const chartOptions = {
  chart: {
    type: 'bar'
  },
  xAxis: {
    categories: ['维度1', '维度2']
  },
  yAxis: {
    categories: yAxisLabelList,
    title: {
      text: '分类'
    }
  },
  series: series
}

场景2：多独立Y轴场景 #

const chartOptions = {
  yAxis: series.map((item, index) => ({
    title: {
      text: item.name
    },
    opposite: index % 2 === 1,
    offset: Math.floor(index / 2) * 50
  })),
  series: series.map((item, index) => ({
    ...item,
    yAxis: index
  }))
}

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