es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo eliminar el relleno de los gráficos de pastel en Echarts.

21 Jul, 2023 Programación

He buscado en todas las preguntas similares pero no pude encontrar una solución.

El gráfico circular que he desarrollado se ve como en la siguiente imagen y quiero eliminar ese espacio vacío y forzar que el gráfico se estire dentro de su contenedor.

La configuración:

{
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0
  },
  radius: '100%',
}

CSS aplicado:

width: 100%; // No importa si aplico un ancho en píxeles o en porcentaje, el espacio vacío permanece
height: 420px;
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para eliminar el espacio vacío alrededor del gráfico de torta y hacer que se ajuste dentro de su contenedor, puedes ajustar las configuraciones grid y radius en las opciones de ECharts:

    {
  grid: {
    left: '5%',
    top: '5%',
    right: '5%',
    bottom: '5%',
    containLabel: true
  },
  series: [{
    type: 'pie',
    radius: ['0%', '70%'],
    // otras configuraciones...
  }]
}

    Al establecer los valores left, top, right y bottom del grid en un pequeño porcentaje del tamaño del contenedor y establecer containLabel en true, puedes asegurarte de que el gráfico ocupe tanto espacio como sea posible sin desbordamiento.
    Al establecer el radius del gráfico de torta en ['0%', '70%'], te aseguras de que ocupe tanto espacio como sea posible dentro de los límites del grid.
    Experimenta con los valores hasta encontrar el ajuste adecuado para tu caso de uso específico.

    Además, asegúrate de que las configuraciones CSS para el ancho y la altura del contenedor estén establecidas correctamente. Por ejemplo:

    .chart-container {
  width: 100%;
  height: 500px;
}

    Ajusta el valor de altura hasta que se ajuste a tu gráfico y su contenido.

Comments are closed.