Echarts雷达图点击name切换自定义样式

Echarts雷达图效果 

option配置 

const activeImg1 = new Image()
activeImg1.src = require('../assets/active3.png')
//activeImg1.style.width = '62vw'
//activeImg1.style.height = '20vw'
const unActiveImg1 = new Image()
unActiveImg1.src = require('../assets/unActive3.png')
//unActiveImg1.style.width = '62vw'
//unActiveImg1.style.height = '20vw'
export const lineOption = {
    radar: {
        center: ['50%', '55%'],
        // 外半径占据容器大小
        radius: '65%',
        // 指示器轴的分割段数
        splitNumber: 5,
        // shape: 'circle', // 雷达图形状
        indicator: [
            { name: '故障停电次数', max: 100, color: '#fff' },
            { name: '故障时户数', max: 100, color: '#BBD9F0' },
            { name: '运行年限', max: 100, color: '#BBD9F0' },
            { name: '自动化配置', max: 100, color: '#BBD9F0' },
            { name: '绝缘化率', max: 100, color: '#BBD9F0' },
            { name: '线路重过载次数', max: 100, color: '#BBD9F0' },
            { name: '重过载台区数量', max: 100, color: '#BBD9F0' },
            { name: '是否单辐射线路', max: 100, color: '#BBD9F0' },
            { name: '供电半径', max: 100, color: '#BBD9F0' },
            { name: '低电压台区数量', max: 100, color: '#BBD9F0' },
            { name: '工单数量', max: 100, color: '#BBD9F0' }
        ],
        triggerEvent: true, // 注意：name设置可点击!!!
        // 统一设置name的样式（也可以在每个name上单独设置）
        name: {
            // 雷达图各类别名称文本颜色
            formatter: function (value, indicator) {
                let text = ''
                switch (value) {
                    case '故障停电次数':
                        text = indicator.color == '#fff' ? '{active1|' + indicator.name + '}' : '{unActive1|' + indicator.name + '}'
                        break;
                    case '故障时户数':
                        text = indicator.color == '#fff' ? '{active1|' + indicator.name + '}' : '{unActive1|' + indicator.name + '}'
                        break;
                    case '运行年限':
                        text = indicator.color == '#fff' ? '{active1|' + indicator.name + '}' : '{unActive1|' + indicator.name + '}'
                        break;
                    case '自动化配置':
                        text = indicator.color == '#fff' ? '{active1|' + indicator.name + '}' : '{unActive1|' + indicator.name + '}'
                        break;
                    case '绝缘化率':
                        text = indicator.color == '#fff' ? '{active1|' + indicator.name + '}' : '{unActive1|' + indicator.name + '}'
                        break;
                    case '线路重过载次数':
                        text = indicator.color == '#fff' ? '{active1|' + indicator.name + '}' : '{unActive1|' + indicator.name + '}'
                        break;
                    case '重过载台区数量':
                        text = indicator.color == '#fff' ? '{active1|' + indicator.name + '}' : '{unActive1|' + indicator.name + '}'
                        break;
                    case '是否单辐射线路':
                        text = indicator.color == '#fff' ? '{active1|' + indicator.name + '}' : '{unActive1|' + indicator.name + '}'
                        break;
                    case '供电半径':
                        text = indicator.color == '#fff' ? '{active1|' + indicator.name + '}' : '{unActive1|' + indicator.name + '}'
                        break;
                    case '低电压台区数量':
                        text = indicator.color == '#fff' ? '{active1|' + indicator.name + '}' : '{unActive1|' + indicator.name + '}'
                        break;
                    case '工单数量':
                        text = indicator.color == '#fff' ? '{active1|' + indicator.name + '}' : '{unActive1|' + indicator.name + '}'
                        break;
                }
                return text

            },
            lineHeight: 20,
            rich: {
                active1: {
                    padding: [0, 0, 4, 12],
                    backgroundColor: {
                        image: activeImg1
                    },
                    color: '#fff',
                    fontSize: '14vw',
                    align: 'center',
                },
                unActive1: {
                    padding: [0, 0, 4, 12],
                    backgroundColor: {
                        image: unActiveImg1
                    },
                    color: '#BBD9F0',
                    fontSize: '14vw',
                    align: 'center'
                },
            }
        },
        // 坐标轴轴线相关设置(竖线)axisLine（中心散发的线）
        axisLine: {
            lineStyle: {
                color: '#94BFFF60'
            }
        },
        // 坐标轴在 grid 区域中的分隔线（圆圈）
        splitLine: {
            lineStyle: {
                color: [
                    '#94BFFF30', '#94BFFF40',
                    '#94BFFF50', '#94BFFF60',
                    '#94BFFF70', '#94BFFF80'
                ],
                width: 1
            }
        },
        splitArea: {
            areaStyle: {
                color: {
                    type: 'radial',
                    x: 0.51,
                    y: 0.52,
                    r: 0.8,
                    colorStops: [
                        {
                            offset: 0,
                            color: "#89BBFF00", // 中心
                        },
                        {
                            offset: 0.5,
                            color: "#89BBFF10", // 中心
                        },
                        {
                            offset: 0.65,
                            color: "#89BBFF60",
                        },
                        {
                            offset: 1,
                            color: "#89BBFF80", //最外层
                        },
                    ],
                }
            }
        },
    },
    series: [
        {
            type: 'radar',
            data: [
                {
                    value: [],
                    name: '上年末',
                    // 填充区样式可以为每个类别单独设置也可以在上层配置中统一设置
                    areaStyle: {
                        // 填充区颜色
                        color: '#2382FF59',
                    },
                    // 线条样式
                    lineStyle: {
                        normal: {
                            color: '#2382FF',
                            width: 3
                        }
                    },
                    symbol: 'circle', // 拐点形状，rect=矩形，circle=圆形
                    // 拐点的大小
                    symbolSize: 8,
                    // 小圆点（拐点）设置为白色
                    itemStyle: {
                        color: '#FFF',
                        borderColor: '#2382FF',
                        borderWidth: 2
                    },
                },
                {
                    value: [],
                    name: '当前',
                    // 填充区样式可以为每个类别单独设置也可以在上层配置中统一设置
                    areaStyle: {
                        // 填充区颜色
                        color: '#FBE80A4D',
                    },
                    // 线条样式
                    lineStyle: {
                        normal: {
                            color: '#FBE80A',
                            width: 3
                        }
                    },
                    symbol: 'circle', // 拐点形状，rect=矩形，circle=圆形
                    // 拐点的大小
                    symbolSize: 8,
                    // 小圆点（拐点）设置为白色
                    itemStyle: {
                        color: '#FFF',
                        borderColor: '#FBE80A',
                        borderWidth: 2
                    },
                    z: 3,
                },
            ]
        }
    ],
    // 在圆点上显示相关数据
    label: {
        show: false,
        color: '#BBD9F0',
        fontSize: 12
    },

}

 Echarts组件

<template>
  <div id="echarts" ref="echartsRef" />
</template>

<script>
import * as echarts from 'echarts5';
import * as _ from 'lodash';
export default {
  name: "index",
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    loading: {
      type: Boolean,
      default: false
    },
    hasClick: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      instanceEcharts: null,
      selfOption: this.option
    }
  },
  computed: {
    // 节流
    throttle() {
      return _.throttle(this.handleResizeEcharts, 16)
      //1. _.throttle 是 Lodash 库提供的节流方法
      //2. 第一个参数 this.handleResizeEcharts ：需要节流的原始方法（图表自适应方法）
      //3. 第二个参数 16 ：节流等待时间（单位：毫秒），相当于约 60FPS 的刷新频率（1000ms/60 ≈ 16.66ms）
      //4. 返回的新函数会被缓存到计算属性中，作为事件监听器的回调函数
    },
  },
  watch: {
    option: {
      handler() {
        const { selfOption } = this
        if (selfOption && typeof selfOption === 'object' && Object.keys(selfOption).length > 0) {
          this.$nextTick(() => {
            this.instanceEcharts && this.instanceEcharts.setOption(selfOption, true);
          })
        }
      },
      immediate: true,
      deep: true
    },
    loading: {
      handler(loading) {
        this.$nextTick(() => {
          loading ? this.handleShowLoading() : this.handleHideLoading()
        })
      },
      immediate: true
    }
  },
  methods: {
    // 初始化
    initEcharts() {
      this.instanceEcharts = echarts.init(this.$refs.echartsRef);
      // 监听点击事件并传递给父组件
      if (this.hasClick) {
        this.instanceEcharts.on('click', (params) => {
          this.$emit('chart-click', params);
          this.instanceEcharts.resize();
        });
      }
    },
    // eCharts自适应
    handleResizeEcharts() {
      this.$nextTick(() => {
        this.instanceEcharts && this.instanceEcharts.resize();
      })
    },
    // 显示 Echart loading
    handleShowLoading() {
      this.$nextTick(() => {
        this.instanceEcharts && this.instanceEcharts.showLoading({
          text: '',
          color: '#009280',
          textColor: '#000',
          maskColor: 'rgba(255, 255, 255, 0.8)',
          zlevel: 0,
          // 字体大小。从 `v4.8.0` 开始支持。
          fontSize: 14,
          // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
          showSpinner: true,
          // 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
          spinnerRadius: 16,
          // 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
          lineWidth: 2,
          // 字体系列。从 `v5.0.1` 开始支持。
          fontFamily: 'sans-serif'
        })
      })
    },
    // 隐藏 Echart loading
    handleHideLoading() {
      this.instanceEcharts && this.instanceEcharts.hideLoading()
    },
  },
  mounted() {
    this.initEcharts();
    window.addEventListener('resize', this.throttle);
  },
  beforeDestroy() {
    //销毁ECharts实例
    this.instanceEcharts.dispose();
    window.removeEventListener('resize', this.throttle);
  },
}
</script>

<style scoped lang="scss">
#echarts {
  height: 100%;
}
</style>

//父组件调用
<Echarts ref="echartsItem" :option="indexOption" @chart-click="handleChartClick" :hasClick="true" />


//点击事件
handleChartClick(params) {
            if (params.componentType === 'radar' && params.targetType === 'axisName') {
                // 设置样式
                const option = this.lineOption;
                const indicatorIndex = option.radar.indicator.findIndex(item => params.name.includes(item.name));
                const activeName = params.name.replace(/^\{|\}$/g, "").split('|')[1]
                this.getList(activeName)
                if (indicatorIndex != -1) {
                    option.radar.indicator.forEach((item, index) => {
                        if (index == indicatorIndex) {
                            item.color = '#fff'
                        } else {
                            item.color = '#BBD9F0'
                        }
                    })
                    // 更新 Echarts 实例的配置
                    this.$refs.echartsItem.instanceEcharts.setOption(option);
                    this.$refs.echartsItem.handleResizeEcharts()
                }
            }
        },