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

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

如图:

Echarts 的悬浮框tooltip显示自定义格式化_第1张图片

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

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

完成后的效果如下:

Echarts 的悬浮框tooltip显示自定义格式化_第2张图片


下面是改变这个悬浮框tooltip显示的代码(在option中改变即可):

tooltip : {
    trigger: 'axis',
    formatter: function (params, ticket, callback) {
        console.log(params);
        var showHtm="";
        for(var i=0;ilength;i++){
            //x轴名称
            var name = params[i][1];
            //名称
            var text = params[i][3];
            //            var value = params[i][2];
            showHtm+= text+ '--' + name + ' 得分:' + value+'
'
} 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;ilength;i++){
                //x轴名称
                var name = params[i][1];
                //名称
                var text = params[i][3];
                //                var value = params[i][2];
                showHtm+= text+ '--' + name + ' 得分:' + value+'
'
} 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' } } } } ] } ] };


你可能感兴趣的:(js,jQuery)