Echarts 折线图：在多个系列中添加 Average/Total 线

Question

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

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>

Echarts 折线图：在多个系列中添加 Average/Total 线

Echarts Line Chart: Adding Average/Total Line Across Multiple Series

echarts