我们只需要在雷达图的data中,找到emphasis,这个是控制鼠标悬浮时高亮显示展示的雷达图中的具体数据的样式
在label项中,我们配置formatter为:
formatter: '{c}(单位)'
这样就可以展示出数据的单位了,比如我想要我的数据单位是“%”,那么我的formatter需要这样写formatter: '{c}%'
完整的代码:
series: [
// 合同量:
{
type: 'radar', // 雷达图
data: [
{
name: '合同量',
value: this.quantityList,
// 鼠标悬浮时高亮显示,同时展示雷达图的数据样式
emphasis: {
label: {
show: true,
color: '#fff',
fontSize: 32,
formatter: '{c}%', // 鼠标悬浮时展示数据加上单位
backgroundColor: '#0D1B42',
borderRadius: 5,
padding: 3,
shadowBlur: 3
}
}
}
],
itemStyle: {
color: new echarts.graphic.LinearGradient( // 设置渐变色
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(0, 230, 98, 1)' },
{ offset: 1, color: 'rgba(0, 155, 171, 1)' }
]
)
},
areaStyle: // 雷达图辐射区域的样式
{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(0, 230, 98, 1)' },
{ offset: 1, color: 'rgba(0, 155, 171, 1)' }
]
)
},
}
]
看一个大概的效果图,这边后端没有处理接口为百分比,大家重点看下标签的单位展示效果就好。