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

相关推荐
散一世繁华,颠半世琉璃9 天前
Prometheus+Grafana轻松实现SpringBoot应用监控
spring boot·grafana·prometheus
LoneEon12 天前
Ubuntu 系统安装 Prometheus+Grafana(附shell脚本一键部署↓)
ubuntu·grafana·prometheus
Coco_淳13 天前
K8s平台部署Grafana + Loki + Promtail日志收集系统
kubernetes·grafana·日志·loki
文人sec14 天前
性能测试-jmeter15-性能项目计划流
分布式·jmeter·性能优化·grafana·prometheus·模块测试
Knight_AL14 天前
Spring Cloud Gateway 实战:全局过滤器日志统计与 Prometheus + Grafana 接口耗时监控
spring boot·spring cloud·grafana·prometheus
麦兜*15 天前
Redis监控告警体系搭建:使用Redis Exporter + Prometheus + Grafana
java·spring boot·redis·spring·spring cloud·grafana·prometheus
qq_2320455717 天前
在Grafana中配置MySQL数据源并创建查询面板
mysql·grafana
3分云计算17 天前
Prometheus-02: 安装部署与配置管理详解
运维·云原生·grafana·普罗米修斯
七夜zippoe18 天前
Java 生态监控体系实战:Prometheus+Grafana+SkyWalking 整合全指南(二)
java·grafana·prometheus
七夜zippoe18 天前
Java 生态监控体系实战:Prometheus+Grafana+SkyWalking 整合全指南(三)
java·grafana·prometheus