javascript - 将气泡图放在堆积面积图的顶部会导致缺少工具提示/标签和不需要的颜色继承

Question

目的是创建一种称为“发烧图表”的东西。我已经成功显示了这两个图表，但是，气泡图点继承了它出现的线系列的每个 areaStyle 属性的颜色，并且还阻止了气泡图点的工具提示和标签出现。

要了解我的意思，请访问https://echarts.apache.org/examples/en/editor.html?c=area-stack并将选项对象替换为以下内容：

  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'
      }
    }
  ]
};```

标签： javascriptechartsngx-echarts

Answer 1

我通过将 scatter 系列的 zLevel 属性设置为 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;
      }```