echarts雷达图显示单个数据的tooltip

在这里插入图片描述

思路

略繁琐,但目前别无他法。本雷达图上涉及到五个维度,就黄色的线而言,第一次按照标准写法value的值设置为 [4000, 2080, 2080, 80, 80],然后再按照单个维度画5次,每次只有对应维度有值,即value分别设置为[4000, null, null, null, null] ,[null, 2080, null, null, null],[null, null, 2080, null, null],[null, null, null, 80, null],[null, null, null, null, 80]这种。

var option  =  {
   
					legend: {
   
						show:false,
						top: '0%',
						right: '2%',
						orient: 'vertical',
						textStyle: {
     color: '#fff', fontSize: 22,                   },
						data: ['移网', '家宽'],
						icon: 'roundRect',
					},
					tooltip: {
   },
					radar: {
   
						radius: '90%',
						center: ['50%', '52%'],
						startAngle: 0,
						triggerEvent: true,
						name: {
     textStyle: {
    color: '#fff', fontSize: '20', borderRadius: 3, padding: [20, 5] } },
						nameGap: '2',
						indicator: [
							{
    name: '平均下载速率', max: 5000,unit:'kbps' },
							{
    name: '建立连接时延', max: 2600,unit:'ms' },
							{
    name: '首屏时长', max: 2600 ,unit:'ms'},
							{
    name: '打开成功率', max: 100 ,unit:'%'},
							{
    name: '页面显示成功率', max: 100,unit:'%' },
						],
						splitArea: {
   
							areaStyle: {
   
								color:'transparent',
								shadowColor: 'rgba(0, 0, 0, 1)',
								shadowBlur: 30,
								shadowOffsetX: 10,
								shadowOffsetY: 10
							}
						},
						axisLine: {
     lineStyle: {
    color:'#002B78',} },
						splitLine: {
   
							lineStyle: {
   
								width: 1.5,
								color:  '#002B78',
							}
						}
					},
					series: [
						{
   
							type: 'radar',
							symbol: 'circle',
							symbolSize: 12,
							itemStyle: {
   
								color: '#00C5CC'
							},
							lineStyle: {
   
								color: 'transparent'
							},
							areaStyle: {
   
								color: 'transparent',
								opacity: 0.3
							},
							tooltip: {
   
								show:true,
								formatter: function() {
   
									return '平均下载速率(kbps):4000';
								}
							},
							z: 5, //这个必须设置,最终显示的tooltip来自于这个图层
							data: [
								{
   
									value: [4000,null ,null ,null , null],
									name: '移网',
									
								}
							]
						},
						{
   
							type: 'radar',
							itemStyle: {
   
								color: '#00C5CC'
							},
							lineStyle: {
   
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值