• 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 : '指标质量
    满分15', max  : 15},
                    {text : '故障管理
    满分35', max  : 35},
                    {text : '网络优化管理
    满分30', max  : 30},
                    {text : '综合资源管理
    满分15', max  : 15},
                    {text : '代维管理
    满分25', max  : 25},
                    {text : '投诉管理
    满分30', max  : 30},
                    {text : '网络维修费管理
    满分15', max  : 15},
                    {text : '保障情况
    满分15', max  : 15},
                    {text : '其他
    满分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'
                                }
                            }
                        }
                    }
                ]
            }
        ]
    };
    from https://blog.csdn.net/tsh18523266651/article/details/78932622
  • 相关阅读:
    GitHub 源码,Framework 框架
    转int啥啥啥的
    查看apk签名 和 keystore 的信息
    一次apk打开时报内存溢出错误,故写下内存溢出的各种原因和解决方法
    客户端传值里面包含URL特殊字符的应对方法
    Linux全硬盘搜索文件名是xxxxx的命令
    pythonmysql运行报错解决过程中遇到的其中一个报错解决文章来源
    linux查看硬盘占用情况
    Linux使用nginx反向代理。可实现域名指向特定端口
    Linux下使用yum安装软件命令
  • 原文地址:https://www.cnblogs.com/shizhijie/p/8805757.html
Copyright © 2020-2023  润新知