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

相关推荐
张声录17 小时前
【Prometheus】【实战篇(七)】在 Grafana 中配置数据源并使用 Prometheus Node Exporter
grafana·prometheus
DevilHeart灬7 小时前
使用Grafana中按钮插件实现收发HTTP请求
http·grafana
-KamMinG14 小时前
Centos7.9安装openldap+phpldapadmin+grafana配置LDAP登录最详细步骤 亲测100%能行
运维·grafana
福大大架构师每日一题6 天前
36.3 grafana-dashboard看图分析
linux·网络·grafana·prometheus
点燃银河尽头的篝火(●'◡'●)6 天前
【环境搭建】Grafana本地部署搭建(windows系统)
windows·grafana·环境搭建
童安格粉丝12 天前
Grafana配置告警规则推送企微机器人服务器资源告警
机器人·企业微信·grafana·告警·dashboard·阈值
jekc86814 天前
Ubuntu安装grafana
linux·ubuntu·grafana
Jum朱14 天前
轻量级日志管理平台:Grafana Loki搭建及应用(详细篇)
grafana
OpsEye14 天前
Grafana功能菜单介绍
信息可视化·grafana
TiDB 社区干货传送门15 天前
使用 Grafana 展示多个TiDB集群的告警
linux·服务器·数据库·tidb·grafana