Grafana 如何实现雷达图


程序员的公众号:源1024,获取更多资料, 无加密无套路!

最近整理了一波电子书籍资料,包含《Effective Java中文版 第2版》《深入JAVA虚拟机》,《重构改善既有代码设计》,《MySQL高性能-第3版》,《Java并发编程实战》等等
获取方式: 关注公众号并回复 电子书 领取,更多内容持续奉上


选择Apache ECharts

定义Function:

javascript 复制代码
let name_list = [
  { name: 'Support', max: 6500 },
  { name: 'Administration', max: 16000 },
  { name: 'Information Technology', max: 30000 },
  { name: 'Customer', max: 38000 },
  { name: 'Development', max: 52000 },
  { name: 'Marketing', max: 25000 }
];
let value_list = [
  {
    value: [4200, 3000, 20000, 35000, 40000, 18000],
    name: 'Allocated Budget'
  }
];
return {
  legend: {
    data: ['Allocated Budget', 'Actual Spending'],
    left: 'left',
  },
  radar: {
    // shape: 'circle',
    indicator: name_list
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: value_list
    }
  ]
};

效果:

自定义name_list、value_list数据即可;
如果数据源是JSONAPI,接口数据返回对应格式即可。
调试可以用console.log() 打印返回的数据格式自行调试。

相关推荐
数据知道15 小时前
MongoDB性能监控仪表板:Grafana+Prometheus集成实战
mongodb·grafana·prometheus
&不羁之风&18 小时前
Grafana 配置实战
grafana
七七powerful3 天前
养龙虾--安装grafana mcp server并使用codebuddy自动巡检
grafana·codebuddy·grafana mcp
ldj20205 天前
安装prometheus + grafana
grafana·prometheus
weixin_399380695 天前
Prometheus(普罗米修斯)+grafana 监控Tongweb80909(by lqw)
java·grafana·prometheus
JackyRoad9 天前
Prometheus-Grafana-vLLM监控实战指南
性能优化·grafana·监控
龙码精神19 天前
前端嵌入Grafana 报表的自定义方案:隐藏导航栏保留筛选工具
grafana
Cherry的跨界思维20 天前
【AI测试全栈:质量】47、Vue+Prometheus+Grafana实战:打造全方位AI监控面板开发指南
vue.js·人工智能·ci/cd·grafana·prometheus·ai测试·ai全栈
予枫的编程笔记20 天前
【Kafka高级篇】Kafka监控不踩坑:JMX指标暴露+Prometheus+Grafana可视化全流程
kafka·grafana·prometheus·可观测性·jmx·kafka集群调优·中间件监控
belldeep1 个月前
Grafana 和 influxDB 是什么?两者如何结合使用?
grafana·influxdb·开源监控平台