Echarts折线图：跨多个系列添加平均/总线

Question

我有一个 Echarts 折线图，它在一个时间跨度上有多个系列/线，我想添加选项以包括平均线和/或总线。我没有看到任何内置的东西可以做到这一点，但我想在我重新发明轮子并自己进行计算并将它们添加为另一个系列之前我会问。

Echart 的线系列有一个 markLine 选项，可以显示该单数系列的平均值，但这会导致每条数据线出现多条平线。这不是我想要的，我想要所有系列的平均值。

Answer 1

一般来说这是不可能的，因为 markLine 仅存在于系列上下文中，但您可以使隐藏的加法系列由所有其他系列的平均值组成，结果将与您想要的相同。

例如：

var data = {
  series01: [7, 7, 4, 5, 8, 2, 3, 5, 5, 9, 4, 3, 5, 9],
  series02: [4, 9, 4, 5, 8, 4, 1, 2, 2, 6, 5, 4, 8, 3],
  series03: [9, 6, 2, 4, 8, 3, 5, 4, 3, 7, 1, 2, 3, 9],
}

var seriesData = function(data) {
  return Object.keys(data).map(key => {
    return {
      id: key,
      data: data[key],
      type: 'bar'
    }
  })
};

var option = {
  xAxis: {
    data: ["c01", "c02", "c03", "c04", "c05", "c06", "c07", "c08", "c09", "c10", "c11", "c12", "c13"],
    type: 'category',
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {},
  series: seriesData(data),
};

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

/* Calculate average series data */
var avrSeriesData = function(data) {
  values = Object.values(data);
  transposed = values[0].map((r, i) => values.map(c => c[i]));
  avrByRow = transposed.map(row => {
    var rowSum = row.reduce((a, b) => a + b);
    return Math.round(rowSum / row.length);
  });
  return avrByRow
};

var avrSeries = {
  id: 'avrSeries',
  type: 'bar',
  data: avrSeriesData(data),
  barWidth: 0.1,
  barGap: 0.1,
  barCategoryGap: 0.1,
  color: 'transparent',
  markLine: {
    show: true,
    data: [{
      name: 'average line',
      type: 'average'
    }],
    lineStyle: {
      color: 'red'
    },
  }
};

myChart.setOption({
  series: avrSeries
});

<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>