请问:echarts雷达图indicator如何添加点击事件?

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

阅读 7.9k
1 个回答
//遮盖原有的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');});
                        
                         
                    });
                    
                });
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题