Echarts radar chart configuration edge text callback (with comments)

Echarts radar chart configures the callback of the text on the edge of the click on the edge of the text

• Gradient color wide lines, the 5.0 version has two top and bottom closing methods
• In radar (that is, a circle of text on the side plus values ​​and pictures)
• It is possible to click on the picture text on the side to perform operations on each item (such as jumping to the corresponding page)
  

<template>
  <div class="radar-box">
    <div id="radar-pie" ref="radar" :events="chartEvents" />
    <!-- <h2>{
   
   { text }}</h2> -->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import AllIcon from '@/assets/img/right.png'
import MentalIcon from '@/assets/img/report-question.png'
// import common from '@/data/index.js'
export default {
  props: {
    // loopData: {
    //   type: Array,
    //   default: () => []
    // }
    whereUse: {
      type: String,
      default: 'all'
    },
    values: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      text: 'gtrgrgbv',
      maxNumber: 110,
      reportText: ['心脏健康', '生命活力', 'BMI', '神经系统', '呼吸健康'],
      mentalText: ['抗压能力', '自主神经\n平衡系统度', '身体活力', '心脏稳定性指数', '自主神经 \n系统活性', '心理情绪 ']
      // mentalText2: ['抗压能力', '自主神经', '身体活力', '心脏稳定性指数', '自主神经 ', '心理情绪 ']
    }
  },
  computed: {
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      // const maxIndicator = 180 // 雷达图的最大值
      const myChart = echarts.init(this.$refs.radar)
      const values = this.values
      const indicatorList = this.whereUse === 'all' ? this.reportText.map(item => {
        return {
          name: item,
          max: this.maxNumber
        }
      }) : this.whereUse === 'mental' ? this.mentalText.map(item => {
        return {
          name: item,
          max: this.maxNumber
        }
      }) : ''
      const Option = {
        radar: {
          // shape: 'circle',
          // startAngle: 60,
          center: ['50%', '50%'],
          radius: '55%',
          closed: true,
          name: {
            textStyle: {
              color: '#65639C',
              borderRadius: 3,
              padding: [3, -5]
            },
            rich: {
              a: { // 名字
                color: '#65639C',
                align: 'center',
                lineHeight: 20,
                fontSize: 12
              },
              b: { // 数据
                color: '#5137DF',
                align: 'center',
                // backgroundColor: '#666',
                fontSize: 17,
                fontWeight: 600,
                padding: 2,
                borderRadius: 4
              },
              c: { // 箭头
                align: 'center',
                width: 15,
                height: 15,
                fontSize: 10,
                backgroundColor: { // 重点在这设置图片
                  image: this.whereUse === 'all' ? AllIcon : this.whereUse === 'mental' ? MentalIcon : ''
                }
              }
            },
            formatter: (a, b) => {
              console.log('显示的数值', a, b, indicatorList.map(item => item.name).indexOf(a))
              const val = values[indicatorList.map(item => item.name).indexOf(a)]
              return `{a|${a}}\n{b|${val}}{c|}`
            }
          },
          axisLine: {
            lineStyle: {
              color: '#CEC9E5',
              type: 'dotted',
              dashOffset: 15
            }
          },
          indicator: indicatorList,
          splitArea: {
            show: true,
            areaStyle: {
              color: ['#FAF7FF', '#fff', '#FAF7FF', '#F5EFFF', '#FAF7FF', '#F5EFFF'] // 图表背景的颜色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: 'dotted',
              color: '#CEC9E5' // 设置网格的颜色
            }
          },
          triggerEvent: true
          // shape: 'circle'
        },
        series: [
          // { 5.0之前使用这个使得首尾相连
          //   name: '首尾相连',
          //   type: 'radar',
          //   // radarIndex: 1,
          //   z: 1,
          //   symbolSize: 0,
          //   symbol: 'diamond',
          //   // symbolRotate: 180,
          //   data: [{
          //     value: values,
          //     name: '闭合',
          //     itemStyle: {
          //       normal: {
          //         color: '#639AFF'
          //       }
          //     }
          //   }]
          // },
          {
            name: '雷达图',
            type: 'radar',
            symbolSize: 0,
            // radarIndex: 2,
            z: 2,
            // areaStyle: {normal: {}},
            data: [{
              value: values,
              name: '当前部门',
              emphasis: {
                label: {
                  show: true,
                  color: '#fff',
                  fontSize: 14,
                  backgroundColor: '#0D1B42',
                  borderRadius: 5,
                  padding: 3,
                  shadowBlur: 3
                }
              },
              itemStyle: {
                normal: {
                  color: '#639AFF',
                  lineStyle: {
                    width: 10
                  }
                }
              },
              lineStyle: {
                width: 10,
                // type: [6, 10],
                color: new echarts.graphic.LinearGradient( // 设置渐变色
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#639AFF' },
                    { offset: 1, color: '#B353FF' }
                  ]
                ),
                cap: 'round',
                join: 'miter',
                miterLimit: 5
              }
            }
            ]
          }
        ]
      }
      console.log('图', Option)
      myChart.setOption(Option)
      // window.onresize = myChart.resize
      window.addEventListener('resize', function() { myChart.resize() })
      // 添加点击事件监听器
      const that = this
      myChart.on('click', function(e) {
        console.log('点击图', e)
        const text = e.name
        // const currentText = text.match(/{a|(\S*)}/)[1]
        const currentIndexList = (that.whereUse === 'all' ? that.reportText : that.whereUse === 'mental' ? that.mentalText : []).map(item => text.indexOf(item))
        const currentIndex = currentIndexList.findIndex((v) => v !== -1)
        console.log('是否需要划拉', text, currentIndex)
        if (currentIndex !== -1) {
          that.$emit('change', currentIndex, that.whereUse)
        }
      })

      // myChart.getZr().off('click')
      // // 点击文字（只有文字不配图片单独配置的话）
      // myChart.getZr().on('click', function(e) {
      //   console.log('点击图边上文字部分', e, e.topTarget.style, e.topTarget.style.text)
      //   const text = e.topTarget.style.text
      //   const currentIndex = (that.whereUse === 'all' ? that.reportText : that.whereUse === 'mental' ? that.mentalText2 : []).findIndex((v) => v === text)
      //   console.log('是否需要划拉', text, currentIndex)
      //   if (currentIndex !== -1) {
      //     that.$emit('change', currentIndex)
      //   }
      // })
    },
    handleClick(params) {
      // 点击事件处理函数，可以在这里调用其他函数
      console.log(params)
    }
  }
}
</script>

<style lang="scss" scoped>
.radar-box {
  // background-color: #000;
  display: flex;
  color: #fff;
  width: 95%;
  margin: auto;
}

#radar-pie {
  width: 100%;
  height: 280px;
  margin-top: 10px;
}
</style>