Is there a way to create an Half Doughnut Chart with circle in ECharts?

Question

I would like to create a chart like this in ECharts:

Is there a way? Anyone have any other ideas?

I tried using option itemStyle.borderRadius an example from the ECharts page, but it was not the result I expected.

Thanks

Answer 1

Here are two offical examples which come close to what you want:

1. Example: using a pie series, but i dont think its possible to make the border round and overlapping if that is a requirement

2. Example: using a gauge series, should fit your needs if adjusted a little (set startAngle / endAngle and remove labels)

Here is the gauge example adjusted to reflect more closely what is shown in your image:

const gaugeData = [
  {
    value: 80,
    name: 'Good',
    itemStyle: {color: 'lightblue'},
    title: {
      offsetCenter: ['-40%', '0%']
    },
    detail: {
      offsetCenter: ['-40%', '15%']
    }
  },
  {
    value: 99,
    name: 'Better',
    itemStyle: {color: 'green'},
    title: {
      offsetCenter: ['0%', '0%']
    },
    detail: {
      offsetCenter: ['0%', '15%']
    }
  },
  {
    value: 50,
    name: 'Perfect',
    itemStyle: {color: 'purple'},
    title: {
      offsetCenter: ['40%', '0%']
    },
    detail: {
      offsetCenter: ['40%', '15%']
    }
  }
];
option = {
  series: [
    {
      type: 'gauge',
      startAngle: 180,
      endAngle: 360,
      progress: {
        show: true,
        overlap: true,
        roundCap: true,
        width: 80,
      },
      pointer: {
        show: false
      },
      data: gaugeData,
      axisLine: {show: false},
      axisLabel: {show: false},
      axisTick: {show: false},
      splitLine: {show: false},
    }
  ]
};