使用echarts的雷达图自定义实现能力图像

最近一个需求需要实现以下效果图，尝试了很多种方法都不行，用过g6的同心圆，虽然可以使页面呈现这种效果但是页面缩放时无法获取节点的实际位置导致点击事件无法触发，最后只能回归原始，尝试使用echarts的雷达图来自己修改样式，终于成功，特记录一下以便下次在遇到好找

实现效果图

代码：

 

 init() {
                let that = this;
                var chartDom = document.getElementById('container');
                const width = chartDom.scrollWidth;
                const height = chartDom.scrollHeight;
                var myChart = echarts.init(chartDom);                
                var option;
                let data = []
                let value = []
                let i = 1
              //对数据的一些处理
                if (that.keyAbility.graduateList) {
                   
                    that.keyAbility.graduateList.forEach(s => {
                        let course = that.kidCourseList.find(k =>
                            k.kid == s.kid)
                        if (course) {
                            data.push({
                                i: i++,
                                name: s.kname,
                                count: s.avgCount + '%',
                                max: 100,
                                id: s.kid,
                                size: course.courseSize
                            })
                            value.push(s.avgCount)
                        } else {
                            data.push({i: i++, name: s.kname, count: s.avgCount + '%', max: 100, id: s.kid, size: 0})
                            value.push(s.avgCount)
                        }
                    })
                    
                    option = {
                        radar: [
                            {
                                indicator: data,//接口获取的数据
                                triggerEvent: true,
                                center: ['50%', '50%'],
                                radius: '60%',
                                splitNumber: 0,
                                shape: 'circle',
                                //文字渲染
                                axisName: {
                                    formatter: function (value, params) {                                       
                                        return '{top|' + params.i + '.' + value + '}' + '\n' + '{end|' + params.count + '   ' + params.size + '门}';
                                    },
                                    rich: {
                                        // 属性上部分的样式
                                        top: {
                                            color: '#fff',
                                            fontSize: 18,
                                            fontWeight: 600,
                                            align: 'center',
                                            lineHeight: 24
                                        },
                                        // 属性下部分样式
                                        end: {
                                            color: '#24E9EA',
                                            fontSize: 16,
                                            // fontWeight: 600,
                                            align: 'center',
                                            lineHeight: 24
                                        }
                                        
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#52ABDC',
                                        type: "dashed"
                                    }
                                },
                                // 分割域配置
                                splitArea: {
                                    areaStyle: {
                                        color: ['transparent'],
                                    }
                                },
                                // 分割线配置
                                splitLine: {
                                    lineStyle: {
                                        color: ['rgba(238, 197, 102, 0)'].reverse()
                                    }
                                }
                            }
                        ],
                        graphic: [
                            {
                                type: 'image',
                                style: {
                                    image: '/yethan/public/assets/images/bigScreen/wingsuit.png', // 图片的URL
                                    x: width / 2 - 50, // 图片的横坐标位置（相对于雷达图）
                                    y: height / 2 - 50, // 图片的纵坐标位置（相对于雷达图）
                                    // z:"9999",
                                    width: 100, // 图片的宽度
                                    height: 100, // 图片的高度

                                }
                            },
                            {
                                type: 'text',
                                style: {
                                    text: [
                                        that.grade + "级"
                                    ],
                                    x: width / 2 - 35, // 文字的水平位置
                                    y: height / 2 + 55, // 文字的垂直位置
                                    fontSize: [20], // 文字的字号
                                    fill: '#F9220F',
                                    fontWeight: 'bold', // 文字的粗细
                                    textBaseline: 'middle', // 文字的垂直对齐方式
                                    textAlign: 'center' // 文字的水平对齐方式
                                }
                            },
                            {
                                type: 'text',
                                style: {
                                    text: [
                                        "能力图像"
                                    ],
                                    x: width / 2 + 35, // 文字的水平位置
                                    y: height / 2 + 57, // 文字的垂直位置
                                    fontSize: [16], // 文字的字号
                                    fill: '#fff',
                                    fontWeight: 'bold', // 文字的粗细
                                    textBaseline: 'middle', // 文字的垂直对齐方式
                                    textAlign: 'center' // 文字的水平对齐方式
                                }
                            }
                        ],
                        series: [
                            {
                                type: 'radar',
                                emphasis: {
                                    lineStyle: {
                                        width: 4
                                    }
                                },

                            },

                        ]
                    };
                    option && myChart.setOption(option);             
            },