echarts 双custom数据上下堆叠

您好！关于您的问题，我可以为您提供一些思路和参考。

首先，您可以使用 ECharts 的自定义系列（custom series）功能来实现数据的上下堆叠效果。具体来说，您可以创建两个自定义系列，分别用于绘制上层数据和下层数据，然后通过设置系列的 z 属性来控制它们的叠放顺序。

其次，您需要对数据进行处理，以便在绘制时能够正确地展示上下堆叠效果。一种常见的做法是将数据按照 x 轴的分类进行分组，然后对每组数据进行累加，从而得到上下堆叠的数据。

最后，您可以使用 ECharts 的图表配置项来设置图表的样式和交互效果，例如设置坐标轴、图例、提示框等。

以下是一个简单的示例代码，供您参考：

// 数据处理
var data = [
  { name: 'A', type: '上层', value: 100 },
  { name: 'A', type: '下层', value: 50 },
  { name: 'B', type: '上层', value: 80 },
  { name: 'B', type: '下层', value: 70 },
  { name: 'C', type: '上层', value: 120 },
  { name: 'C', type: '下层', value: 90 },
];

var groups = {};
data.forEach(function(item) {
  if (!groups[item.name]) {
    groups[item.name] = { x: item.name, up: 0, down: 0 };
  }
  if (item.type === '上层') {
    groups[item.name].up += item.value;
  } else {
    groups[item.name].down += item.value;
  }
});

var seriesData = [];
for (var name in groups) {
  var group = groups[name];
  seriesData.push([
    { name: group.x, value: group.up },
    { name: group.x, value: group.down },
  ]);
}

// 图表配置
var option = {
  xAxis: { type: 'category', data: Object.keys(groups) },
  yAxis: { type: 'value' },
  series: [
    {
      type: 'custom',
      renderItem: function(params, api) {
        var x = api.value(0);
        var y = api.value(1);
        var height = api.coord([0, y])[1] - api.coord([0, 0])[1];
        return { type: 'rect', shape: { x: x - 20, y: api.coord([0, 0])[1], width: 40, height: height } };
      },
      data: seriesData.map(function(item) { return item[0]; }),
      z: 2,
    },
    {
      type: 'custom',
      renderItem: function(params, api) {
        var x = api.value(0);
        var y = api.value(1);
        var height = api.coord([0, y])[1] - api.coord([0, 0])[1];
        return { type: 'rect', shape: { x: x - 20, y: api.coord([0, 0])[1] + height, width: 40, height: -height } };
      },
      data: seriesData.map(function(item) { return item[1]; }),
      z: 1,
    },
  ],
};

希望这个回答能够对您有所帮助！