e-charts 雷达图点击事件

e-charts 雷达图

---

---

前言

提示：雷达图的点击事件

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、雷达图点击效果

1.html 部分

代码如下（示例）：

  <ve-radar class="customer-rating" width="100%" height="240px" :data="chartData" :settings='chartSettings'
                :extend='chartExtend' :events="chartEvents"></ve-radar>

2.js部分

		indicator : [
		    {
		        name: '规范度', max: 100, color: 'rgb(64,145,176)', axisLabel: {
		            show: true,
		            margin: -10,
		            fontSize: 10,
		            align: 'left'
		        }
		    },
		    {name: '诚信度', max: 100, axisLabel: {show: false}},
		    {name: '成长度', max: 100, axisLabel: {show: false}},
		    {name: '配合度', max: 100, axisLabel: {show: false}},
		    {name: '预警度', max: 100, axisLabel: {show: false}}
		],
		 list:[
                {type:'规范度',rank:'A',score:78},
                {type:'诚信度',rank:'A',score:48},
                {type:'成长度',rank:'B',score:78},
                {type:'配合度',rank:'A',score:67},
                {type:'预警度',rank:'C',score:89}
            ],
		chartExtend: {
                color: ['rgba(121, 164, 222, 1)'],
                // 雷达图最大值配置
                radar: {
                    shape: 'polygon',
                    // axisLabel设置轴线上刻度值  color设置外部标签颜色
                    indicator:[
					    {
					        name: '规范度', max: 100, color: 'rgb(64,145,176)', axisLabel: {
					            show: true,
					            margin: -10,
					            fontSize: 10,
					            align: 'left'
					        }
					    },
					    {name: '诚信度', max: 100, axisLabel: {show: false}},
					    {name: '成长度', max: 100, axisLabel: {show: false}},
					    {name: '配合度', max: 100, axisLabel: {show: false}},
					    {name: '预警度', max: 100, axisLabel: {show: false}}
					],
                    name: {
                    // name  formatter外部标签自定义文字
                        formatter: (name) => {
                            const temp = this.list.filter(item => {
                                return item.type === name;
                            });
                            return `${name}：${temp[0].rank}`;
                        }
                    },
                    //  添加triggerEvent: true才能触发点击事件
                    triggerEvent: true
                },
                // legend不展示
                legend: {
                    show: false
                },
                tooltip: {
                    trigger: 'item',
                    formatter: (params) => {
                        return this.indicator[0].name;
                    }
                }
   			 },
            chartSettings: {
                // 线颜色配置
                lineStyle: {
                    color: 'rgba(121, 164, 222, 1)'
                },
                // 区域颜色配置
                areaStyle: {
                    color: 'rgba(121, 164, 222, 1)'
                }
            },
            chartEvents: { 
            //  点击事件触发
		            click: (e) => {
		                if (e.event.topTarget.__dimIdx !== undefined) {
		                //  点击的是图中拐点   e.event.topTarget.__dimIdx代表当前点击的是第几项
		                    const index = e.event.topTarget.__dimIdx;
		                    this.chartExtend = {
		                        ...this.chartExtend, tooltip: {
		                            trigger: 'item',
		                            formatter: (params) => {
		                                return `${this.indicator[index].name}<br/>评分：${this.chartData.rows[0][this.indicator[index].name]}`;
		                            }
		                        }
		                    };
		                } else {
		                  //  点击的是图中外部标签文字   通过 e.name可直接拿到标签文字
		                    const extend = {...this.chartExtend};
		                    const temp = this.list.filter(item => {
		                        return `${item.type}：${item.rank}` === e.name;
		                    });
		
		                    //  this.handleClickChart(temp[0].type);
							  extend.radar.indicator.forEach((item) => {
		                        if (`${item.name}：${temp[0].rank}` === e.name) {
		                            item.color = 'rgb(64,145,176)';
		                        } else {
		                            item.color = 'rgb(202,202,202)';
		                        }
		                    });
		                    this.chartExtend = extend;
		                }
		            }},
            chartData:
          {
              columns: ['规范度', '诚信度', '成长度', '配合度', '预警度'],
              rows: [
              {'规范度': 100, '诚信度': 93, '成长度': 32, '配合度': 48, '预警度': 60}
              ]
          }

3.实现效果

1、点击外部标签文字高亮显示 2、点击拐点自定义提示内容

总结

以上就是今天要讲的内容，本文仅仅简单介绍了e-charts 雷达图的使用。