雷达图的tooltip实现以轴显示

开发过程中遇到的记录下来，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: '管理'
            }
        ]
    }]
};