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

相关推荐
欧先生^_^18 小时前
ingress-nginx 开启 Prometheus 监控 + Grafana 查看指标
nginx·grafana·prometheus
Jeremy_Lee12318 小时前
grafana 批量视图备份及恢复(含数据源)
前端·网络·grafana
全栈工程师修炼指南18 小时前
Grafana 地图本土化方案:使用高德地图API平替GeoMap地图指南
grafana
临水逸20 小时前
可视化大屏工具对比:GoView、DataRoom、积木JimuBI、Metabase、DataEase、Apache Superset 与 Grafana
apache·grafana
SailingCoder2 天前
grafana-mcp-analyzer:基于 MCP 的轻量 AI 分析监控图表的运维神器!
运维·人工智能·typescript·node.js·grafana
xbd_zc4 天前
【使用 Loki + Promtail + Grafana 搭建轻量级容器日志分析平台】
grafana·loki·promtail
qq_312920115 天前
K8S上使用helm部署 Prometheus + Grafana
kubernetes·grafana·prometheus
MyikJ7 天前
Java 面试实录:从Spring到微服务的技术探讨
java·spring boot·微服务·kafka·spring security·grafana·prometheus
tatasix7 天前
从监控到告警:Prometheus+Grafana+Alertmanager+告警通知服务全链路落地实践
grafana·prometheus
小陈99cyh9 天前
docker-compose搭建prometheus以及grafana
docker·grafana·prometheus