Apache echarts gague pannel is getting overlap

Grafana
, ,
1 
let lines, availability, performance, quality, oee;
const panelWidth = 80; // Set a fixed width for the panel
const panelHeight = 60; // Set a fixed height for the panel
const numLines = Math.ceil(panelWidth / 100);

context.panel.data.series.map((s) => {
  if (s.refId === "A") {
    lines = s.fields.find((f) => f.name === "linename").values;
    availability = s.fields.find((f) => f.name === "availability").values;
    performance = s.fields.find((f) => f.name === "performance").values;
    quality = s.fields.find((f) => f.name === "quality").values;
    oee = s.fields.find((f) => f.name === "oee").values;
    return lines.map((d, i) => [d, availability[i], performance[i], quality[i], oee[i]]);
  }
});

const gaugeData = lines.map((line, i) => [
  {
    value: availability[i],
    name: 'availability',
    title: {
      offsetCenter: ['0%', '-40%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '-30%']
    }
  },
  {
    value: performance[i],
    name: 'performance',
    title: {
      offsetCenter: ['0%', '-20%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '0%']
    }
  },
  {
    value: quality[i],
    name: 'quality',
    title: {
      offsetCenter: ['0%', '10%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '20%']
    }
  },
  {
    value: oee[i],
    name: 'OEE',
    title: {
      offsetCenter: ['0%', '30%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '40%']
    }
  }
]);

const gaugeWidth = 120;
const gaugeHeight = 120;
const margin = 20;
const numColumns = Math.floor(panelWidth / (gaugeWidth + 2 * margin));
const numRows = Math.ceil(gaugeData.length / numColumns);

option = {
  grid: {
    top: margin,
    left: margin,
    right: margin,
    bottom: margin,
    containLabel: true
  },
  series: gaugeData.map((data, i) => ({
    type: 'gauge',
    startAngle: 90,
    endAngle: -270,
    pointer: {
      show: false
    },
    progress: {
      show: true,
      overlap: false,
      roundCap: true,
      clip: false,
      itemStyle: {
        borderWidth: 1,
        borderColor: '#464646'
      }
    },
    axisLine: {
      lineStyle: {
        width: 40
      }
    },
    splitLine: {
      show: false,
      distance: 0,
      length: 10
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: false,
      distance: 50
    },
    data: data,
    title: {
      fontSize: 16,
      text: lines[i]
    },
    detail: {
      width: 50,
      height: 14,
      fontSize: 14,
      color: 'auto',
      borderColor: 'auto',
      borderRadius: 20,
      borderWidth: 1,
      formatter: '{value}%'
    },
    x: (i % numColumns) * (gaugeWidth + 2 * margin),
    y: Math.floor(i / numColumns) * (gaugeHeight + 2 * margin),
    radius: '50%'
  }))
};

setInterval(function () {
  lines.forEach((line, i) => {
    gaugeData[i][0].value = availability[i];
    gaugeData[i][1].value = performance[i];
    gaugeData[i][2].value = quality[i];
    gaugeData[i][3].value = oee[i];
  });
  context.panel.chart.setOption({
    series: option.series
  });
}, 5000);

return option;
2

you gonna have to give a bit more context. like sample data or a screen grab of the issue

3

ga1
ga11894×768 88.4 KB

ga2
ga21750×553 24.4 KB

here iam trying to visulize a each line data in separate gague visual but it get overlaped one over one