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

相关推荐
qq_312920111 天前
Proxmox VE 监控:把集群指标秒级推送到 InfluxDB 2.x,Grafana 大屏一步到位
运维·grafana
A-刘晨阳2 天前
Prometheus + Grafana + Alertmanager 实现邮件监控告警及配置告警信息
运维·云计算·grafana·prometheus·监控·邮件
电话交换机IPPBX-3CX3 天前
如何使用 Grafana 可视化你的 3CX 呼叫中心电话系统
grafana·ip pbx·电话交换机·企业电话系统
Otto_10274 天前
在 OpenStack Rocky 中部署 Prometheus + Grafana
openstack·grafana·prometheus
小北方城市网4 天前
Spring Boot Actuator+Prometheus+Grafana 生产级监控体系搭建
java·spring boot·python·rabbitmq·java-rabbitmq·grafana·prometheus
牛奶咖啡135 天前
Prometheus+Grafana构建云原生分布式监控系统(九)_pushgateway的使用
云原生·grafana·prometheus·pushgateway·pushgateway使用场景·推数据到pushgateway·pushgateway的使用
牛奶咖啡136 天前
Prometheus+Grafana构建云原生分布式监控系统(八)_监控docker容器
云原生·grafana·prometheus·cadvisor·docker容器的安装与部署·docker容器的监控·node-exporter容器
翱翔的苍鹰7 天前
完整的“RNN + jieba 中文情感分析”项目之一:添加 Prometheus + Grafana 监控,配置 CI/CD 自动部署和支持多语言模型切换
rnn·grafana·prometheus
牛奶咖啡137 天前
Prometheus+Grafana构建云原生分布式监控系统(七)
云原生·grafana·prometheus·hadoop集群的安装·hadoop集群的监控·prometheus自动发现·hadoop数据可视化
kft13148 天前
Grafana + OracleDB Exporter深度监控大屏(docker-compose版)
docker·容器·grafana