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