echarts雷达图中的点击事件indicator

问题:echart雷达图的坐标轴标签默认是不响应点击事件的
知识:
设置标签响应
区分点到哪里

解决:

this.chart.setOption({
	tooltip: {
	  trigger: 'axis',
	  axisPointer: { // 坐标轴指示器,坐标轴触发有效
	    type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
	  }
	},
	radar: {
	  radius: '50%',
	  center: ['50%', '50%'],
	  indicator: this.raddarData1,
	name: {
	textStyle: {
		color: 'rgb(52, 148, 136)'
	}
	},
	splitLine: {
	lineStyle: {
		color: [
				'rgba(52, 148, 136, 0.3)', 'rgba(52, 148, 136, 0.4)',
				'rgba(52, 148, 136, 0.5)', 'rgba(52, 148, 136, 0.7)',
				'rgba(52, 148, 136, 0.8)', 'rgba(52, 148, 136, 1)'
		].reverse()
	}
	},
	axisLine: {
	lineStyle: {
		color: 'rgba(52, 148, 136, 0.5)'
	}
	},
	triggerEvent: true
	},
	legend: {
	  left: 'center',
	  bottom: '10',
	  data: ['事件数量'],
	show: false
	},
	series: [{
	  type: 'radar',
	tooltip: {
	trigger: 'item',
	position: ['30%', '20%']
	},
	emphasis: {
	areaStyle: {
		color: 'rgba(215,41,58,0.3)'
	}
	},
	  data: this.raddarData2,
	  animationDuration: animationDuration
	}]
})
			
this.chart.on('click', function(params) {
	if (params.componentType === 'radar') {
			// 点击到了 radar坐标轴标签 上
			that.echartClick(params.name)
	} else if (params.componentType === 'series') {
			that.echartClick('')
	}
})
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值