ECharts雷达图tooltip实现单轴显示

参考文章：雷达图的tooltip实现以轴显示 - 简书

最终效果：

当只有一组数据时实现比较简单，主要代码如下：

radar: [
    //设置两组radar,第一组正常显示，第二组设置为透明色
    {
        splitArea: { areaStyle: { color: ['#fff', '#fff'] } },
        indicator: [
            { name: '测试1', max: 4 },
            { name: '测试2', max: 4 },
            { name: '测试3', max: 4 },
        ],
    },
    {
        axisName: { color: 'transparent' },
        splitArea: { areaStyle: { color: ['transparent', 'transparent'] } },
        indicator: [
            { name: '测试1', max: 4 },
            { name: '测试2', max: 4 },
            { name: '测试3', max: 4 },
        ],
    },
],
series: [
    {
        type: 'radar',
        radarIndex: 0,
        tooltip: {
            show: false,
        },
        data: [{
              name: '数据1',
              value: [1, 2, 3],
        }],
    },
    {
        type: 'radar',
        symbol: 'none', //隐藏雷达图点的颜色
        lineStyle: {
            color: 'transparent',
        },
        radarIndex: 1, //使用第二个维度的雷达图配置
        zlevel: 2, //覆盖住原来的雷达图
        tooltip: {
            formatter: (params) => {
            let { name, value } = params.data;
                return `${name}<br /> ${value[params.dataIndex]}`;
            },
        },
        data: [
            { name: '测试1', value: [1, 0, 0] },
            { name: '测试2', value: [0, 2, 0] },
            { name: '测试3', value: [0, 0, 3] },
          ],
        },
      ],

当有多组数据时，用这种方法实现就会很麻烦，此时可以用另一种方法，主要代码如下：

radar: [
    {
        indicator: [
            { name: '测试1', max: 4 },
            { name: '测试2', max: 4 },
            { name: '测试3', max: 4 },
        ],
    },
    {
        indicator: [
            { name: '测试1', max: 4 },
            { name: '测试2', max: 4 },
            { name: '测试3', max: 4 },
        ],
        axisLine: {
            lineStyle: {
              color: 'transparent',
            },
        },
    },
],
series: [
    {
        name: '数据1',
        type: 'radar',
        radarIndex: 0,
        tooltip: {
            show: false,
        },
        data: [
            {
              value: [1, 2, 3],
            },
            {
              value: [2, 3, 4],
            },
        ],
    },
    {
        name: '数据2',
        type: 'radar',
        symbol: 'none', 
        lineStyle: {
            color: 'transparent',
        },
        radarIndex: 1, //使用第二个维度的雷达图配置
        zlevel: 2, //覆盖住原来的雷达图
        tooltip: {
            formatter: (params) => {
                let { data, name } = params.data;
                return `${params.name}<br />数据1： ${data[0]}<br />数据2： ${data[1]}<br                         
                        />`;
            },
        },
        data: [
            //data为自定义，用于记录该轴上的所有数据
            {
              value: [4, 0, 0],
              data: [1, 2],
              name: '测试1',
            },
            {
              value: [0, 4, 0],
              data: [2, 3],
              name: '测试2',
            },
            {
              value: [0, 0, 4],
              data: [3, 4],
              name: '测试3',
            },
        ],
    },
],