ECharts堆叠面积图叠加气泡图出现提示框、标签丢失及颜色异常继承问题

问题修复方案 #

1. 气泡颜色异常修复

给散点（气泡）系列添加z: 10配置，提升气泡的渲染层级，确保它在所有堆叠面积图的上方渲染，你自定义的黑色itemStyle.color就会正常生效，不会被下层区域色混合覆盖。

2. tooltip与label无法触发修复

• 给4个堆叠折线系列全部添加silent: true配置，让堆叠面积图不响应任何鼠标交互，不会拦截气泡的事件触发
• 优化tooltip formatter的判断逻辑，避免边界场景返回空值

修改后完整代码 #

option = {
  grid: {
    left: '10%'
  },
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      if (params.seriesName === 'Bubble' && params.data?.length === 4) {
        return `Project: ${params.data[3]}<br />
                    % Chain Completed: ${Math.round(
                      params.data[0]
                    )}<br />
                    % Buffer Consumed: ${Math.round(params.data[1])}`;
      }
      return '';
    }
  },

  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      show: false,
      data: [0, 1]
    },
    {
      type: 'value',
      min: 0,
      max: 100,
      show: true,
      position: 'bottom'
    }
  ],
  yAxis: [
    {
      type: 'value',
      min: 0,
      max: 120
    }
  ],
  series: [
    {
      name: 'green',
      type: 'line',
      color: 'green',
      stack: 'Total',
      areaStyle: { color: 'green', opacity: 0.8 },
      emphasis: {
        focus: 'none'
      },
      silent: true,
      data: [0, 80]
    },
    {
      name: 'yellow',
      type: 'line',
      color: 'yellow',
      stack: 'Total',
      areaStyle: { color: 'yellow', opacity: 0.8 },
      emphasis: {
        focus: 'none'
      },
      silent: true,
      data: [20, 20]
    },
    {
      type: 'line',
      name: 'red',
      color: 'red',
      stack: 'Total',
      areaStyle: { color: 'red', opacity: 0.8 },
      emphasis: {
        focus: 'none'
      },
      silent: true,
      data: [80, 0]
    },
    {
      name: 'black',
      type: 'line',
      color: 'black',
      stack: 'Total',
      areaStyle: { color: 'black', opacity: 0.8 },
      emphasis: {
        focus: 'none'
      },
      silent: true,
      data: [120, 120]
    },
    {
      name: 'Bubble',
      type: 'scatter',
      data: [
        [
          49.82868330885952,
          27.606461086637275,
          1000000000,
          'project 1'
        ],
        [
          49.82868330885952,
          64.606461086637275,
          100000000,
          'project 2'
        ]
      ],
      symbolSize: function (data) {
        return Math.sqrt(data[2]) / 5e2;
      },
      xAxisIndex: 1,
      z: 10,
      emphasis: {
        focus: 'item',
        scale: true,
        label: {
          show: true,
          formatter: function (param) {
            return param.data[3];
          },
          position: 'top'
        }
      },
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetY: 5,
        opacity: 1,
        color: '#000000'
      }
    }
  ]
};

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