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

努力lshdnks

已于 2024-09-23 17:38:35 修改

阅读量2.6w

点赞数 4

分类专栏： js jQuery 文章标签： Echarts 的悬浮框

于 2017-12-29 16:20:39 首次发布

本文链接：https://blog.youkuaiyun.com/tsh18523266651/article/details/78932622

版权

jQuery 同时被 2 个专栏收录

14 篇文章

订阅专栏

12 篇文章

订阅专栏

本文介绍了如何使用Echarts解决雷达图中悬浮框tooltip因数据过多导致被遮挡的问题。通过自定义tooltip的格式化，实现了清晰展示所有数据的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做的项目用到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'
                            }
                        }
                    }
                }
            ]
        }
    ]
};