Placing a bubble chart on top of a stacked area chart causing missing tooltip/label and unwanted color inheritance

Question

The intention is to create something called a 'fever chart'. I have successfully displayed both charts, however, the bubble chart points are inheriting the color of each areaStyle attribute of the line series that it appears in and also preventing the tooltip and label for the bubble chart points from appearing.

To see what I mean please visit https://echarts.apache.org/examples/en/editor.html?c=area-stack and replace the option object with the following:

  grid: {
    left: '10%'
  },
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      if (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])}`;
      } else return;
    }
  },

  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      show: false
    },
    {
      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'
      },
      data: [0, 80]
    },
    {
      name: 'yellow',
      type: 'line',
      color: 'yellow',
      stack: 'Total',
      areaStyle: { color: 'yellow', opacity: 0.8 },
      emphasis: {
        focus: 'none'
      },
      data: [20, 20]
    },
    {
      type: 'line',
      name: 'red',
      color: 'red',
      stack: 'Total',
      areaStyle: { color: 'red', opacity: 0.8 },
      emphasis: {
        focus: 'none'
      },
      data: [80, 0]
    },
    {
      type: 'line',
      name: 'black',
      color: 'black',
      stack: 'Total',
      areaStyle: { color: 'black', opacity: 0.8 },
      emphasis: {
        focus: 'none'
      },
      data: [120, 120]
    },
    {
      name: 'Bubble',
      type: 'scatter',
      data: [
        [
          49.82868330885952, //x
          27.606461086637275, //y
          1000000000, //size
          'project 1' //name
        ],
        [
          49.82868330885952, //x
          64.606461086637275, //y
          100000000, //size
          'project 2' //name
        ]
      ],
      symbolSize: function (data) {
        return Math.sqrt(data[2]) / 5e2;
      },
      xAxisIndex: 1,
      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'
      }
    }
  ]
};```

Answer 1

I solved this by setting the scatter series' zLevel attribute to 1.

      name: 'Bubble',
      type: 'scatter',
      zLevel: 1,
      data: [
        [
          49.82868330885952, //x
          27.606461086637275, //y
          1000000000, //size
          'project 1' //name
        ],
        [
          49.82868330885952, //x
          64.606461086637275, //y
          100000000, //size
          'project 2' //name
        ]
      ],
      symbolSize: function (data) {
        return Math.sqrt(data[2]) / 5e2;
      }```