Apache Echarts：添加中位数虚线、自动计算中位数及标签配置方法

1. 虚线在Echarts中的名称 #

这种标记特定数值的垂直虚线叫做markLine（标线），属于Echarts的标记组件，可直接在series中配置，用于标注图表中的关键数值线。

2. 基于数据集自动提取中位数 #

可以实现，步骤如下：

• 从dataset的source中提取所有数据的数值字段；
• 编写中位数计算函数，对数值数组排序后计算中位数；
• 将计算得到的中位数传入markLine的配置中。

示例计算逻辑：

// 提取数值数组（需根据你的实际数据结构调整索引）
const values = (parseScenarios(data) || []).map(item => item[1]);
// 计算中位数函数
const getMedian = (arr: number[]) => {
  const sorted = [...arr].sort((a, b) => a - b);
  const mid = Math.floor(sorted.length / 2);
  return sorted.length % 2 !== 0 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
};
const medianValue = getMedian(values);

3. 添加"Moyenne"标签 #

在markLine的label配置中设置formatter为"Moyenne"，并调整标签位置、样式即可。

修改后的完整配置代码 #

const barColors: string[] = ["#5BA0B4", "#E6BE72", "#4C2E25", "#809D92", "#CCA0B9", "#75273B", "#E7728E", "#C6DDE4", "#9A7F4D", "#53645D", "#D1836E", "#79566A", "#D1DCD8", "#295765", "#E04F71", "#F3D5A1", "#A0604E"];

// 提取数值并计算中位数
const scenariosData = parseScenarios(data) || [];
const values = scenariosData.map(item => item[1]); // 假设数值在数据项的第二个位置，需根据实际结构调整
const getMedian = (arr: number[]) => {
  const sorted = [...arr].sort((a, b) => a - b); // 复制数组避免修改原数据
  const mid = Math.floor(sorted.length / 2);
  return sorted.length % 2 !== 0 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
};
const medianValue = getMedian(values);

const optionsBarCharthorizontal: EChartsOption = {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      ...scenariosData,
    ]
  },
  xAxis: { type: 'value' },
  yAxis: {
    type: 'category',
    inverse: true,
  },
  series: [
    {
      type: 'bar',
      realtimeSort: true,
      itemStyle: {
        color: function (params) {
          return barColors[params.dataIndex];
        }
      },
      // 添加中位数标线配置
      markLine: {
        lineStyle: {
          type: 'dashed', // 设置为虚线
          color: '#333' // 自定义虚线颜色
        },
        label: {
          show: true,
          formatter: 'Moyenne', // 标签文本
          position: 'end', // 标签位置，可选'start'/'middle'/'end'
          fontSize: 12
        },
        data: [
          {
            xAxis: medianValue // 指向x轴的中位数数值
          }
        ]
      }
    }
  ]
}

注意：如果你的dataset数据结构和示例不同（比如数值在其他索引位置），需要调整values提取的逻辑；也可根据需求修改markLine的颜色、虚线样式、标签位置等参数。

内容的提问来源于stack exchange，提问作者Aspiring Dev 23000