开发过程中遇到的记录下来,echarts官方的雷达图的tooltip和UI设计不一致,如分别下图:
官方图
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}
当月销售 ${data[0]}
上月销售 ${data[1]}
`
}
},
data: [
{
value: [6200, 0, 0, 0, 0, 0], //显示当前‘’销售‘’对应的指示器,其余
data:[4200,5000],//真实需要显示的数据
name: '销售'
},
{
value: [0, 14000, 0, 0, 0, 0],
data:[3000,14000],
name: '管理'
}
]
}]
以上就可以实现如下效果:
需要注意的点:
1.雷达图指示器设置的最大最小值问题。如果是可以确定最大最小值的雷达图 最好将第二个维度的data中的value属性的有效值设置为最大值 这样当鼠标hover在坐标轴上就可以显示当前类目的值,实际的第二维度的图形效果要如下图黄红线所示,才会正确的显示tooltip
但是对于无法确定最大值,甚至最小值为负的情况下,可能会达不到效果,但是也已经找到方法就是将第二个维度的指示器设置为:最大值为当组数据的绝对值的最大值,最小值为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}
当月销售 ${data[0]}
上月销售 ${data[1]}
`
}
},
data: [
{
value: [6200, 0, 0, 0, 0, 0],
data:[4200,5000],
name: '销售'
},
{
value: [0, 14000, 0, 0, 0, 0],
data:[3000,14000],
name: '管理'
}
]
}]
};