How to set the radius of the four corners of the echarts background?

I have been learning how to use ECharts recently.
I want to change the radius of the four corners of the echarts background, like this:

Operating environment:
echarts: 5.4.2
vue3

I tried using three methods.
1. Added option attribute: borderRadius: [20, 20, 20, 20], (this is the answer from chatgpt)

option = {
  backgroundColor :'#999',
  **borderRadius: [20, 20, 20, 20],**
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

2. Set the radian of the echarts container itself.

<div ref="EnergyCalendar" style="border-radius: 20px;height: 320px; width: 100%;">
</div>

3. Wrap the div outside the echarts container and set the radius of the div.

<div style="border-radius: 20px;">
  <div ref="EnergyCalendar" style="height: 320px; width: 100%;">
  </div>
</div>

But none of these three methods are effective.

Can someone familiar with ECharts help explain how to implement this feature?
Thank you in advance for your answer!

If you use the canvas renderer, you may style the canvas element inside the container:

#chart-container canvas{
  border-radius: 20px
}

If you're using the svg renderer you may style the svg element inside the container:

#chart-container svg{
  border-radius: 20px
}

Of course, you may combine these, to cover both cases.

• an example with canvas
• an example with svg