Início / coding / Perguntas / 78832792
Accepted
Hp Lam
Asked: 2024-08-05 12:54:45 +0800 CST

Existe uma maneira de criar um gráfico de pizza cheio de pontos em ECharts?

  • 772

Eu gostaria de criar um gráfico como este no ECharts:

insira a descrição da imagem aqui

Então, alguém tem alguma idéia? Tentei usar um exemplo da página ECharts, mas não parece ser minha IU. Fiz uma fileira de pontos, mas não consigo esticar o círculo em um retângulo com raio, lembre-se dos 2 meios círculos azuis acima e abaixo

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

echarts

1 respostas

  1. Best Answer

    Modifiquei o exemplo que você vinculou para ter uma ideia de como conseguir o que você está pedindo. Não é bonito, mas espero que ajude.

    Exemplo :

    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);
    • 1

relate perguntas