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() 打印返回的数据格式自行调试。

相关推荐
企鹅郁金香7 小时前
部署搭建 Prometheus 和 Grafana教程
eureka·grafana·prometheus
A 糖醋排骨2 天前
grafana loki alloy轻量级日志采集
运维·grafana·loki
雨辰AI2 天前
K8s 国产数据库慢 SQL 自动监控|Prometheus+Grafana 可视化全落地
数据库·sql·安全·容器·kubernetes·grafana·prometheus
七月稻草人3 天前
Grafana只能在内网看?配置HTTPS公网地址远程打开监控面板
网络协议·https·grafana
爱丶狸4 天前
Grafana_Zabbix_ImageRenderer_部署与前端操作手册
linux·前端·zabbix·grafana·kylin
奔跑中的小象8 天前
UOS V2500 沐曦mx-exporter监控加速卡(非K8S)
grafana·prometheus·uos·vllm·沐曦
Wang's Blog9 天前
Go-Zero 项目开发45: Prometheus + Grafana 安装部署与服务监控实战
golang·grafana·prometheus
行者-全栈开发14 天前
TIG 监控体系搭建:Telegraf + InfluxDB + Grafana 全链路实战
grafana·influxdb·服务器监控·tig·docker部署·监控系统·telegraf
Elastic 中国社区官方博客15 天前
将你的 Grafana Kubernetes 仪表板迁移到 Elastic Observability:相同的 PromQL,30 倍更快的查询
大数据·人工智能·elasticsearch·搜索引擎·容器·kubernetes·grafana
做个文艺程序员17 天前
Linux第24篇:Java应用监控体系搭建:Prometheus+Grafana可视化运维
java·grafana·prometheus