[Bug] dots of lower radar appear on the top of higher radars

Version

5.2.1

Link to Minimal Reproduction

No response

Steps to Reproduce

use the following options

option = {
  tooltip: {},
  legend: {
    right: 70,
    type: 'scroll',
    data: [
      'A',
      'B',
      'C',
    ]
  },
  radar: {
    indicator: [
      { name: '1' },
      { name: '2' },
      { name: '3' },
      { name: '4' },
      { name: '5' },
      { name: '6' },
      { name: '7' },
      { name: '8' }
    ],
    nameGap: 8,
    startAngle: 90,
    splitNumber: 5
  },
  series: [
    {
      type: 'radar',
      name: 'A',
      colorBy: 'series',
      data: [
        {
          name: 'A',
          value: ['8', '19', '0', '0', '0', '6', '0', '7'],
          areaStyle: {},
          tooltip: {},
        }
      ]
    },
    {
      type: 'radar',
      name: 'B',
      colorBy: 'series',
      data: [
        {
          name: 'B',
          value: ['6', '19', '8', '10', '6', '10', '5', '6'],
          areaStyle: {},
          tooltip: {},
        }
      ]
    },
  ]
};

Current Behavior

Dots from lower radar appear on the top of higher radars. Though I didn't find a way to inspect their z-index values, it seems that dots have larger values of z-index than radar area's.

The radar in blue lies under the green one. Hovering on the blue dots still triggers tooltips.

Expected Behavior

The dots in blue should reside under the green radar

Environment

- OS: windows 10
- Browser: chrome
- Framework: vue

Any additional comments?