开发过程中遇到的记录下来，echarts官方的雷达图的tooltip和UI设计不一致，如分别下图：
image.png
官方图
image.png
UI图
如何实现UI图？查找了很多思路如下：
1，在原来的雷达图维度基础上再建一个雷达图的维度，将原来的数据进行处理（很重要！！！），再经过新雷达图的tooltip展示出来，将原来维度的雷达图覆盖掉和原来维度的tooltip的显示隐藏掉，新的雷达图的各种颜色都设置为透明色，这样就达到效果了。
（1）新建雷达图维度
radar: [
{
// shape: 'circle',
indicator: [
{ name: '销售', max: 6500},
{ name: '管理', max: 16000},
{ name: '信息技术', max: 30000},
{ name: '客服', max: 38000},
{ name: '研发', max: 52000},
{ name: '22', max: 25000}
]
},{
// shape: 'circle',
indicator: [
{ name: '销售1', max: 6500},
{ name: '管理1', max: 16000},
{ name: '信息技术1', max: 30000},
{ name: '客服1', max: 38000},
{ name: '研发1', max: 52000},
{ name: '221', max: 25000}
],
axisLine: { //隐藏第二个雷达维度的指示器名称
lineStyle: {
color: 'transparent'
}
},
},
],
（2）数据处理和设置
series: [{
name: '预算 vs 开销（Budget vs spending）',
type: 'radar',
radarIndex:0,
tooltip:{
show:false
},
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '预算分配（Allocated Budget）'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '实际开销（Actual Spending）'
}
]
},{
name: '预算 ',
type: 'radar',
//symbol: "none",//隐藏雷达图点的颜色
//lineStyle: { //隐藏雷达图线的颜色
// color: "transparent"
//},
radarIndex:1,//使用第二个维度的雷达图配置
zlevel:2,//覆盖住原来的雷达图
tooltip:{
formatter:(params)=>{
let {data,name}=params.data
return `${params.name}<br />当月销售 ${data[0]}<br />上月销售 ${data[1]}<br />`
}
},
data: [
{
value: [6200, 0, 0, 0, 0, 0], //显示当前‘’销售‘’对应的指示器，其余
data:[4200,5000],//真实需要显示的数据
name: '销售'
},
{
value: [0, 14000, 0, 0, 0, 0],
data:[3000,14000],
name: '管理'
}
]
}]
以上就可以实现如下效果：
image.png
需要注意的点：
1.雷达图指示器设置的最大最小值问题。如果是可以确定最大最小值的雷达图 最好将第二个维度的data中的value属性的有效值设置为最大值 这样当鼠标hover在坐标轴上就可以显示当前类目的值，实际的第二维度的图形效果要如下图黄红线所示，才会正确的显示tooltip
image.png
但是对于无法确定最大值，甚至最小值为负的情况下，可能会达不到效果，但是也已经找到方法就是将第二个维度的指示器设置为：最大值为当组数据的绝对值的最大值，最小值为0。数据data取绝对值，这样就不会出现错乱问题，具体为什么，你自己思考一下便知。下面是全部的配置项。在写第二个维度的时候最好处理好数据，不要把数据写死。
option = {
title: {
text: '基础雷达图'
},
legend: {
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
},
tooltip:{},
radar: [
{
// shape: 'circle',
indicator: [
{ name: '销售', max: 6500},
{ name: '管理', max: 16000},
{ name: '信息技术', max: 30000},
{ name: '客服', max: 38000},
{ name: '研发', max: 52000},
{ name: '22', max: 25000}
]
},{
// shape: 'circle',
indicator: [
{ name: '销售1', max: 6500},
{ name: '管理1', max: 16000},
{ name: '信息技术1', max: 30000},
{ name: '客服1', max: 38000},
{ name: '研发1', max: 52000},
{ name: '221', max: 25000}
],
axisLine: { //隐藏第二个雷达维度的指示器名称
lineStyle: {
color: 'transparent'
}
},
},
],
series: [{
name: '预算 vs 开销（Budget vs spending）',
type: 'radar',
radarIndex:0,
tooltip:{
show:false
},
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '预算分配（Allocated Budget）'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '实际开销（Actual Spending）'
}
]
},{
name: '预算 ',
type: 'radar',
symbol: "none",//隐藏雷达图点的颜色
lineStyle: { //隐藏雷达图线的颜色
color: "transparent"
},
radarIndex:1,//使用第二个维度的雷达图配置
zlevel:2,//覆盖住原来的雷达图
tooltip:{
formatter:(params)=>{
let {data,name}=params.data
return `${params.name}<br />当月销售 ${data[0]}<br />上月销售 ${data[1]}<br />`
}
},
data: [
{
value: [6200, 0, 0, 0, 0, 0],
data:[4200,5000],
name: '销售'
},
{
value: [0, 14000, 0, 0, 0, 0],
data:[3000,14000],
name: '管理'
}
]
}]
};
网友评论