How to avoid legend overlapping with labels?

I'm using echarts for some small, dashboard-style, charts. What are my options for avoiding situations like this?

Notice how the slice label for CityC and the legend for CityB overlap.

option = {
  title: {
    text: 'Weather Statistics',
    subtext: 'Fake Data',
    left: 'center'
  }
}

Codepen

Ideally, I want the chart to shrink to fit the available space w/o overflowing into the legend. Seems like "grid" can be used for this, but isn't supported for pie.

Next best would be to disable the slice labels when they overlap or responsively at a certain breakpoint. Possible?

My only remaining idea is to set the radius as a %, but I'd ideally have different values for different sizes and I can't always predict the container size my chart will end up in.

Other ideas?

I would suggest to set the top and bottom attribute of the pie chart component.

I try to add these 2 attribute on the code you provided and it works.

option = {
  // ...
  series: [
    {
      type: 'pie',
      top: 40,
      bottom: 30,
      // ...
    }
  ]
};

Codepen

Hope it will be helpful to you.