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