请问：echarts雷达图indicator如何添加点击事件？

问题描述

问 题

项目中遇到一个问题，需要点击indicator弹出tooltip

解决方案

//遮盖原有的indicator，添加标签到指定位置
$.each($('ul li canvas:nth-child(3n):visible'),function(index,element){
                    var _this=$(this)[0],ctx=_this.getContext('2d'),ancestor=$(element).parent().parent(),parent=$(element).parent();
                    var instanceId=$(ancestor).attr('_echarts_instance_');
                    var chart=echarts.getInstanceById(instanceId);
                    var indicators=chart.component.polar.polar[0].indicator;
                    var pwidth=$(_this).attr('width');
                    ctx.fillStyle = "rgba(255,255,255,1)";
                    ctx.strokeStyle = "rgba(255,255,255,1)";
                    $(parent).find('a').remove();
                    $.each(indicators,function(idx,indicator){
                        //大概indicator的位置
                         var coordinate=chart.component.polar.getVector(0,idx,indicator.max+1);
                         var left=coordinate[0],top=coordinate[1]-6;
                         if(left==pwidth/2){
                             left=left-indicator.text.length*6-2;
                         }
                         else if(left<pwidth/2){
                             left=left-indicator.text.length*12-2;
                         }
                         var width=indicator.text.length*12;
                         var height=12;
                         ctx.fillRect(left-2, top-height/2, width+4,height+6.4);
                         var aLabel=$('<a href=\'javascript:void(0)\'>'+indicator.text+'</a>').appendTo(parent);
                         $(aLabel).css({
                             'position':'absolute',
                             'left':left,
                             'top':top-height/2,
                             'font-size':'12px',
                             'text-decoration':'underline',
                             'color':'#2B3E4C',
                             'font-familly':'Microsoft YaHei'
                         }).click(function(){
                             chart.component.tooltip.showTip({ seriesIndex: 0,dataIndex:idx });
                         }).hover(function(){$(this).css('color','#61C4C9');},function(){$(this).css('color','#2B3E4C');});
                        
                         
                    });
                    
                });

这篇关于请问：echarts雷达图indicator如何添加点击事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！