通过 apache echarts 实现 grafana 的动态动画

编程

[ad_1]

因此,我正在为 grafana 使用自定义插件 Apache Echarts。 我正在尝试在 JavaScript 代码中实现 ECharts 的通用转换功能,以根据定义的间隔在条形图和饼图之间动态切换。 这是可能的还是我只是在浪费时间?

我尝试过的:

我使用下面的 JS 来获得所需的动画,但 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);

解决方案1

您询问的是一个特定的图书馆,很可能这里或任何其他论坛上没有人了解或有经验。

查看 eCharts 网站,他们有自己的支持网络(通过电子邮件)。 您所要做的就是按照本页的说明订阅它: 邮件列表 – Apache ECharts[^]。

[ad_2]

コメント

标题和URL已复制