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

Echarts 的悬浮框tooltip显示自定义格式化的更多相关文章

  1. echarts自定义悬浮框的显示

    最近在使用echarts的地图功能 ,业务需求是显示前五的具体信息,并且轮流显示,首先解决轮流显示的问题 var counta = 0; //播放所在下标 var mTime = setInterva ...

  2. Echarts地图悬浮框显示多组series数据以及修改地图大小

    1.如何让echarts的地图悬浮框出现多组series数据? 2.如何更改地图默认的大小? <!DOCTYPE html> <html lang="en"> ...

  3. Echarts之悬浮框中的数据排序

    Echarts非常强大,配置也非常的多,有很多细节需要深入研究.详解一下关于悬浮框中的数据排序问题 悬浮框的数据排序默认是根据series中的数据位置排序的,在我们想自定义排序时,在echarts的配 ...

  4. echarts之字符云tooltip显示混乱问题的解决办法

    echarts字符云中tooltip显示混乱主要表现为一下两点: 1.字体与其显示框内容不对应鼠标识别错误 解决思路: 就是option里的数据要对value降序排序(这一点很关键,是必须的一步) 把 ...

  5. echarts 折线柱形上方显示自定义格式数据

    series:[ { name: '成单率', type: 'line', data: valueArr2, itemStyle: { normal: { label: { show:true, po ...

  6. Android -- 使用WindowManager实现悬浮框效果

    1,原文在这里http://blog.csdn.net/qq_17250009/article/details/52908791,我只是把里面的关键步骤给注释了一下,首先来看一下我们的效果,如图(电脑 ...

  7. 菜鸟学JS(三)——自动隐藏的悬浮框

    今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天 ...

  8. Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框

    问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...

  9. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

随机推荐

  1. C#位操作

    一.原码与补码 在计算机系统中,数值一律用补码来存储(表示).主要原因:使用补码,可以将符号位和其他位统一处理:同时减法也可按加法来处理.另外,两个补码表示的数相加时,如果最高位(符号位)有进位,则进 ...

  2. Java类的连接与初始化 (及2013阿里初始化笔试题解析)

    Java虚拟机通过装载.连接.初始化来使得一个Java类型可以被Java程序所使用,如下图所示,其中连接过程又分为验证.准备.解析三个部分.其中部分类的解析过程可以推迟到程序真正使用其某个符号引用时再 ...

  3. UltraISO制作启动盘及提取U盘为ISO镜像

    我们先来说下UltraISO这个工具,中文名也叫软碟通,他是一个无需量产你的U盘就可以把U盘做成启动盘的工具,当然了,这么强大的工具肯定不是免费版的,对,他是共享的:但是你可以下载特别版嘛..网上到处 ...

  4. ntoj 808 蚂蚁的难题(八)

    蚂蚁的难题(八) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5 描述 蚂蚁是一个古玩爱好者,他收藏了很多瓶瓶罐罐. 有一天,他要将他的宝贝们一字排开, 摆放到一个长度为L的展 ...

  5. JAVA判断字符串相等

    java中判断字符串是否相等有两种方法:1.用“==”运算符,该运算符表示指向字符串的引用是否相同,比如: String a="abc";String b="abc&qu ...

  6. 设置open_cursors参数

    1.进入终端,输入命令:sqlplus /nolog 2.输入命令:conn /as sysdba 3.输入命令:alter system set open_cursors=1000 scope=me ...

  7. oracle 命令 登录

    1.打开终端,输入命令:sqlplus /nolog 2.连接数据库:conn user_name/passwd@db_name

  8. 彻底解决_OBJC_CLASS_$_某文件名", referenced from:问题(转)

    PS: 本文为转载而来,如有冲突,请与我联系,将立即删除. 最近在使用静态库时,总是出现这个问题.下面总结一下我得解决方法: 1. .m文件没有导入   在Build Phases里的Compile ...

  9. matlab_legend_使用

    matlab legend 使用 用Matlab画图时,有时候需要对各种图标进行标注,例如,用“+”代表A的运动情况,“*”代表B的 运动情况.legend函数的基本用法是LEGEND(string1 ...

  10. 详解 Go 语言中的 time.Duration 类型

    swardsman详解 Go 语言中的 time.Duration 类型swardsman · 2018-03-17 23:10:54 · 5448 次点击 · 预计阅读时间 5 分钟 · 31分钟之 ...