Echarts 的悬浮框tooltip显示自定义格式化

Posted 2022-12-13 努力lshdnks

最近做的项目用到echarts雷达图，但是由于地市过多，遇到悬浮框显示问题被遮住

如图：

可以看到上面从兴安开始数据就被遮住了

为了解决这个被遮住的悬浮框，达到tooltip自定义格式

完成后的效果如下：

下面是改变这个悬浮框tooltip显示的代码（在option中改变即可）：

tooltip : 
    trigger: 'axis',
    formatter: function (params, ticket, callback) 
        console.log(params);
        var showHtm="";
        for(var i=0;i<params.length;i++)
            //x轴名称
            var name = params[i][1];
            //名称
            var text = params[i][3];
            //值
            var value = params[i][2];
            showHtm+= text+ '--' + name + ' 得分：' + value+'<br>'
        
        return showHtm;
    

下面是完整的option:

var option = 
    title : 
        text: '指标大类得分',
        subtext: '指标大类得分',
        show: false
    ,
    tooltip : 
        trigger: 'axis',
        formatter: function (params, ticket, callback) 
            // console.log(params);
            var showHtm="";
            for(var i=0;i<params.length;i++)
                //x轴名称
                var name = params[i][1];
                //名称
                var text = params[i][3];
                //值
                var value = params[i][2];
                showHtm+= text+ '--' + name + ' 得分：' + value+'<br>'
            
            return showHtm;
        
    ,
    legend: 
        x : '3%',
        y : '10%',
        orient: 'vertical',
        align: 'left',
        data:['内蒙1','阿拉善2','内蒙3','阿拉善4','内蒙5',
            '阿拉善6','内蒙7','阿拉善8','内蒙9','阿拉善10',
            '内蒙11','阿拉善12','内蒙13','阿拉善14'],
        show: true
    ,
    toolbox: 
        show : false,
        feature : 
            mark : show: false,
            dataView : show: false, readOnly: false,
            restore : show: false,
            saveAsImage : show: false
        
    ,
    calculable : false,
    polar : [
        
            indicator : [
                text : '指标质量\\n满分15', max  : 15,
                text : '故障管理\\n满分35', max  : 35,
                text : '网络优化管理\\n满分30', max  : 30,
                text : '综合资源管理\\n满分15', max  : 15,
                text : '代维管理\\n满分25', max  : 25,
                text : '投诉管理\\n满分30', max  : 30,
                text : '网络维修费管理\\n满分15', max  : 15,
                text : '保障情况\\n满分15', max  : 15,
                text : '其他\\n满分20', max  : 20

            ],
            radius : 130
        
    ],
    series : [
        
            name: '指标大类得分',
            type: 'radar',
            itemStyle: 
                normal: 
                    areaStyle: 
                        type: 'default'
                    
                
            ,
            data : [
                
                    value : [10,22,20,10,16,15,6,8,15],
                    name : '内蒙1',
                    itemStyle: 
                        normal: 
                            color: '#87CEFF',
                            label: 
                                show: true,
                                formatter:function(params) 
                                    return params.value;
                                
                            ,
                            areaStyle: 
                                color: '#87CEFF'
                            
                        
                    
                ,
                
                    value : [12,12,24,8,7,17,9,10,17],
                    name : '阿拉善2',
                    itemStyle: 
                        normal: 
                            color: '#CDB5CD',
                            label: 
                                show: true,
                                formatter:function(params) 
                                    return params.value;
                                
                            ,
                            areaStyle: 
                                color: '#CDB5CD'
                            
                        
                    
                
            ]
        
    ]
;