अपाचे ईचार्ट्स के माध्यम से ग्राफ्टाना के लिए गतिशील एनिमेशन

इसलिए, मैं ग्राफाना के लिए एक कस्टम प्लगइन Apache Echarts का उपयोग कर रहा हूं। मैं एक परिभाषित अंतराल के आधार पर बार चार्ट और पाई चार्ट के बीच गतिशील रूप से स्विच करने के लिए अपने जावास्क्रिप्ट कोड में ईचार्ट्स की सार्वभौमिक संक्रमण सुविधा को लागू करने का प्रयास कर रहा हूं। क्या यह संभव है या मैं बस अपना समय बर्बाद कर रहा हूँ?

मैंने क्या प्रयास किया है:

वांछित एनीमेशन प्राप्त करने के लिए मैंने नीचे दिए गए जेएस का उपयोग किया लेकिन ग्राफाना में कुछ भी प्रतिबिंबित नहीं हुआ।

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