Is there a way to create an pie chart filled with dots in ECharts?

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

So anyone have any ideas? I tried using an example from the ECharts page, but it doesn't seem like my UI. I made a row of dots but cant stretch the circle into a rectangle with radius, ever mind the 2 blue half circles above and below

https://echarts.apache.org/examples/en/editor.html?c=pie-parliament-transition

I modified the example you linked to give you an idea how to achieve what you are asking for. It is not pretty but I hope it helps.

Example:

const data = [
  { value: 800, name: 'A' },
  { value: 635, name: 'B' },
  { value: 580, name: 'C' },
  { value: 484, name: 'D' },
  { value: 300, name: 'E' },
  { value: 200, name: 'F' }
];
const defaultPalette = [
  // '#51689b', '#ce5c5c', '#fbc357', '#8fbf8f', '#659d84', '#fb8e6a', '#c77288', '#786090', '#91c4c5', '#6890ba'
  '#5470c6',
  '#91cc75',
  '#fac858',
  '#ee6666',
  '#73c0de',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc'
];
const radius = ['30%', '80%'];
const parliamentOption = (function () {
  let sum = data.reduce(function (sum, cur) {
    return sum + cur.value;
  }, 0);
  let angles = [];
  let startAngle = -Math.PI / 2;
  let curAngle = startAngle;
  data.forEach(function (item) {
    angles.push(curAngle);
    curAngle += (item.value / sum) * Math.PI * 2;
  });
  angles.push(startAngle + Math.PI * 2);

  function circleLayout(startAngle, endAngle, totalAngle, r, size) {
    let points = [];
    for (
      let k = Math.floor((startAngle * r) / size) * size;
      k < Math.floor((endAngle * r) / size) * size - 1e-6;
      k += size
    ) {
      let angle = k / r;
      points.push(angle);
    }
    return points;
  }

  return {
    series: [
      {
        type: 'custom',
        id: 'distribution',
        data: data,
        coordinateSystem: undefined,
        universalTransition: true,
        animationDurationUpdate: 1000,
        renderItem: function (params, api) {
          var idx = params.dataIndex;
          var viewSize = Math.min(api.getWidth(), api.getHeight());
          var r1 = ((parseFloat(radius[1]) / 100) * viewSize) / 2;
          var cx = api.getWidth() * 0.5;
          var cy = api.getHeight() * 0.5;
          var size = viewSize / 50;
          var points = circleLayout(
            angles[idx],
            angles[idx + 1],
            Math.PI * 2,
            r1,
            size + 10
          );
          return {
            type: 'group',
            children: points.map(function (angl) {
              return {
                type: 'group',
                children: Array.from({ length: 30 }, (v, i) => i).map(function(pixel) {
                  return {
                    type: 'circle',
                    autoBatch: true,
                    shape: {
                      cx: cx + Math.cos(angl) * (r1 + pixel),
                      cy: cy + Math.sin(angl) * (r1 + pixel),
                      r: size / 2
                    },
                    style: {
                      fill: defaultPalette[idx % defaultPalette.length]
                    }
                  }
                })
              };
            })
          };
        }
      },
      
      {
        type: 'custom',
        id:'half circle',
        data: [92],    // radius in percent
        coordinateSystem: undefined,
        renderItem: function (params, api) {
          let radiusPercent = api.value();
          let radius = (Math.min(api.getWidth(), api.getHeight()) / 2) * (radiusPercent / 100);
          
          let cx = api.getWidth() * 0.5;
          let cy = api.getHeight() * 0.5;
          let angls = [];
          let piece = (Math.PI * 2) / 16;
          let step = 0.01;
          for (let i = piece; i < piece * 7; i=i + step) {
            angls.push(i);
          }
          for (let i = piece * 9; i < piece * 15; i=i + step) {
            angls.push(i);
          }
          return {
            type: 'group',
            children: angls.map(function(angl) {
              return {
                    type: 'circle',
                    autoBatch: true,
                    shape: {
                      cx: cx + Math.cos(angl) * radius,
                      cy: cy + Math.sin(angl) * radius,
                      r: 10
                    },
                    style: {
                      fill: 'lightblue'
                    }
                  }
            })
          }
        }
      }
    ]
  };
})();
let currentOption = (option = parliamentOption);