Animaciones dinámicas para grafana vía apache echarts

programación


Entonces, estoy usando un complemento personalizado Apache Echarts para grafana. Estoy intentando implementar la función de transición universal de ECharts en mi código JavaScript para cambiar dinámicamente entre un gráfico de barras y un gráfico circular según un intervalo definido. ¿Es esto posible o simplemente estoy perdiendo el tiempo?

Lo que he probado:

Utilicé el siguiente JS para obtener la animación deseada, pero no se refleja nada en Grafana.

javascript
let intervalData = [];
let systemCount = [];
let isPieChart = false; 

data.series.map((s) => {
  if (s.refId === "A") {
    intervalData = s.fields.find((f) => f.name === "Interval").values;
    systemCount = s.fields.find((f) => f.name === "System Count").values;
  }
});

const colors = [
  '#2b821d',
  '#c12e34',
  '#0098d9',
  '#005eaa',
  '#339ca8',
  '#cda819',
  '#32a487',
  '#e6b600'
];

const barOption = {
  color: colors,
  tooltip: {
    show: true,
  },
  legend: { show: true },
  xAxis: {
    type: 'category',
    data: intervalData,
    name: 'Interval',
    nameLocation: 'middle',
    nameGap: 35,
    axisLabel: {
      fontWeight: 'bold',
    },
  },
  yAxis: {
    type: 'value',
    name: 'System Count',
    nameLocation: 'middle',
    nameGap: 40,
    axisLabel: {
      fontWeight: 'bold',
    },
  },
  series: [
    {
      data: systemCount,
      name: 'System Count',
      type: 'bar',
      smooth: true,
      barWidth: 15,
    },
  ],
};

const pieOption = {
  color: colors,
  tooltip: {
    show: true,
  },
  legend: { show: true },
  dataset: {
    dimensions: ['name', 'count'],
    source: intervalData.map((interval, index) => [interval, systemCount[index]]),
  },
  series: [
    {
      type: 'pie',
      radius: [0, '50%'],
    },
  ],
};

function toggleChartOption() {
  isPieChart = !isPieChart;
  return isPieChart ? pieOption : barOption;
}

setInterval(() => {
  myChart.setOption(toggleChartOption(), true);
}, 2000);

Solución 1

Estás preguntando sobre una biblioteca específica que, probablemente, nadie aquí, ni en ningún otro foro, tendrá conocimiento o experiencia.

En cuanto al sitio de eCharts, tienen su propia red de soporte, por correo electrónico. Todo lo que tienes que hacer es suscribirte como se explica en esta página: Lista de correo – Apache ECharts[^].

コメント

タイトルとURLをコピーしました