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

相关推荐
行者-全栈开发5 小时前
【码动四季】Spring Boot 可观测性体系:Micrometer + OpenTelemetry + Grafana 全链路搭建
grafana·opentelemetry·micrometer·全链路追踪·分布式追踪·atomcode·spring boot可观测性
todoitbo1 天前
让数据看板随时可见:Grafana + cpolar 远程访问实战
ui·网络安全·grafana·数据看板·远程访问
维C°3 天前
Grafana实例-Gauge仪表盘面板
grafana
微三云 - 廖会灵 (私域系统开发)3 天前
电商系统监控告警体系从0到1:Prometheus+Grafana+AlertManager的全链路可观测性实践
oracle·grafana·prometheus
维C°3 天前
Grafana-Text面板
grafana
少陽君5 天前
Docker 部署 Loki + Promtail + Grafana 日志监控栈
docker·容器·grafana
摇滚侠8 天前
Prometheus+Grafana+睿象云的监控告警系统 01-07
grafana·prometheus
time展天19 天前
abbix、Prometheus、Grafana、Nightingale,四个监控如何选型?
grafana·prometheus
Elastic 中国社区官方博客11 天前
使用 Elasticsearch 作为 Grafana 的直接替代 Prometheus 后端
大数据·数据库·sql·elasticsearch·搜索引擎·grafana·prometheus
查拉图斯特拉面条12 天前
使用 k6 编写登录与业务场景脚本并进行性能测试及 Grafana 可视化实战
grafana