echarts 雷达图到达知乎盐值效果

为实现如下效果：

知乎盐值效果图

个人实现难点：在 ‘基础信用’ 等每个人维度的位置插入图片

图片放置位置

代码实现：

<div id="myChart" style="width:100px; height:400px"> <div> 

<script>
import edit from "./img/edit.png"
import love from "./img/love.png"
import user from "./img/user.png"
import friend from "./img/friend.png"
import obey from "./img/obey.png"
export default {
  data () {
    return {
      chartValue: [5, 10, 4, 5, 6],
    }
  },
  mounted () {
    this.drawRadar();
  },
  methods: {
    drawRadar () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      let option = {
        radar: {
          name: {
            formatter: function (params) {
              if (params == "基础建设") return "{user|}" + "\n" + params;
              if (params == "社区建设") return "{friend|}" + "\n" + params;
              if (params == "遵守公约") return "{obey|}" + "\n" + params;
              if (params == "友善互助") return "{love|}" + "\n" + params;
              if (params == "内容创作") return "{edit|}" + "\n" + params;
            },
            textStyle: { color: '#000' },
            rich: {
              user: {
                backgroundColor: {
                  image: user
                },
                align: "center"
              },
              friend: {
                backgroundColor: {
                  image: friend
                },
                align: "center"
              },
              obey: {
                backgroundColor: {
                  image: obey
                },
                align: "center"
              },
              love: {
                backgroundColor: {
                  image: love
                },
                align: "center"
              },
              edit: {
                backgroundColor: {
                  image: edit
                },
                align: "center"
              },
            }
          },
          indicator: [
            { name: '基础建设', max: 10 },
            { name: '社区建设', max: 10 },
            { name: '遵守公约', max: 10 },
            { name: '友善互助', max: 10 },
            { name: '内容创作', max: 10 }
          ],
          // 是否设置阴影间隔
          splitArea: {
            show: false
          }
        },
        series: [{
          type: 'radar',
          symbolSize: 0,
          tooptip: {
            tigger: "item"
          },
          areaStyle: { opacity: 0.3, color: "rgb(102,102,102)" },
          lineStyle: { color: "rgb(102,102,102)" },
          data: [
            {
              value: this.chartValue,
              name: '盐值'
            }
          ]
        }]
      };
      myChart.setOption(option);
    }
  }
}
</script>