echarts实现radar图点击拐点显示当前数据--不用改源码

本文链接：https://blog.youkuaiyun.com/ilyomind/article/details/121775003

本文介绍了如何利用鼠标移动事件在ECharts中实现雷达图表的动态提示，通过获取点击位置的下标调整提示内容，并设置了透明边框扩大点击范围。Option代码展示了详细的配置和事件处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、实现原理

1.在事件方法里获取点击的数据的下标
2.setOption会增量更新图标
3.设置拐点的范围宽度，这里是设置了透明的边框，来增加点击范围

二、Option代码

option = {
  title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['Allocated Budget']
  },
  tooltip: {
    show: false,
    triggerOn: 'mousemove',
    formatter: function () {
      return '';
    }
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      symbol: 'circle',
      name: 'Budget vs spending',
      type: 'radar',
      itemStyle: {
        borderWidth: 10,
        borderColor: 'transparent'
      },
      data: [
        {
          value: [5600, 16000, 30000, 38000, 52000, 25000],
          name: 'Allocated Budget'
        }
      ]
    }
  ]
};

myChart.on('mousemove', (params) => {
  let num = params.event.topTarget.__dimIdx;
  if (num === undefined) {
    option.tooltip.show = false;
    option.tooltip.formatter = function () {
      return '';
    };
  } else {
    option.tooltip.show = true;
    option.tooltip.formatter = function (params) {
      console.log(params)
      return (
        option.radar.indicator[num].name +
        ':' +
        params.data.value[num]
      );
    };
  }
  myChart.setOption(option);
});