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

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

如图:

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

可以看到上面从兴安开始数据就被遮住了Echarts 的悬浮框tooltip显示自定义格式化

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

完成后的效果如下:

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

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'
                            }
                        }
                    }
                }
            ]
        }
    ]
};