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'
                            }
                        }
                    }
                }
            ]
        }
    ]
};
from https://blog.csdn.net/tsh18523266651/article/details/78932622


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM