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

相关推荐
天天喝旺仔1 天前
Prometheus + Grafana 监控告警体系搭建实战:从 Exporter 指标采集、PromQL 查询到 Alertmanager 告警落地
容器·kubernetes·grafana·prometheus·时序数据库
qq_452396238 天前
第十二篇:《数据采集:Grafana Alloy、Fluent Bit、Vector 的选型与配置》
java·贪心算法·grafana
2601_962097368 天前
可观测性实战:Prometheus+Grafana+OTel构建监控
grafana·prometheus·微服务架构·可观测性·opentelemetry
Joker-Full-stack8 天前
higress Grafana生产事故复盘:Loki 2.9 WAL 竞态 Bug 导致 5 天审计日志消失
bug·grafana·higress
IT界的老黄牛9 天前
Jenkins 监控一条龙:接入、看板 9964、11 条告警规则直接抄走
jenkins·grafana·prometheus·监控·ci-cd·告警规则
heimeiyingwang9 天前
【Prometheus·可视化篇】Grafana 集成:数据源配置与 Dashboard 设计原则
grafana·prometheus
2601_9620973611 天前
GraphQL,Grafana和Dash
python·grafana·数据可视化·graphql·dash
happymade12 天前
7000 台网络设备批量纳管 & 自动拓扑生成实战——MSRM3 完整操作流程与关键要点复盘
运维·服务器·网络·zabbix·grafana·msrm3
AAA@峥12 天前
从零搭建 Prometheus 完整监控告警体系|Linux 部署 + node_exporter+Grafana 可视化
云原生·grafana·prometheus
liuyicenysabel14 天前
Grafana + Prometheus 分级告警配置设计(P0/P1/P2)
javascript·grafana·prometheus