echarts tooltip数据太多，容器遮挡显示不全，根据数据分列展示

前言：解决bug不易，分享也不易，点亮你的小心心吧。

这里是把所有数据在tooltip框中展示，并没有把数据为0的进行隐藏（因为项目要求）（如果要加的话：可以在适当位置，加个if判断条件就可以了）

1.先展示一下效果图，根据数据的数量进行多列展示，每列十行，每列宽度根据文本内容长度定义

2.直接上代码

myChart.setOption({tooltip: {trigger: 'axis',confine: true,// enterable: true, // 移入tooltip内查看数据position:function (point,params,dom,rect,size){let html='<div>' + '<span>'+params[0].axisValueLabel+'</span>' + '<br>';var RespectivelyArray=[];// 先定义分列数组params.forEach(ele=>{const  data=ele.data;for( const key in data){if (key===ele.seriesName){var obj=new Object();obj.color=ele.color;obj.text=key+'：'+data[key];RespectivelyArray.push(obj)}}})let chunkarr=divideChunk(RespectivelyArray, 10) // 调用自定义分块方法html+=render(chunkarr) // 调用自定义渲染方法html+='</div>';$(dom).html(html);}},
});
// echarts 跟随屏幕自适应
window.addEventListener("resize",function(){myChart.resize();
});

3.这里是自定义的函数方法

function divideChunk(array, size) {let [start, end, result] = [null, null, []];for (let i = 0; i < Math.ceil(array.length / size); i++) {start = i * size;end = start + size;result.push(array.slice(start, end));}return result;
};

function render(data){var str='';for(var i=0;i<data.length;i++){str+='<div style="height: 100%;width: auto;display: flex;flex-direction: column;float: left;padding-right: 10px;">'for(var j in data[i]){str+=`<div><span style="width: 10px;height: 10px;background: ${data[i][j].color};border-radius: 10px;display: inline-block;margin-right: 5px;"></span>${data[i][j].text}</div>`}str+='</div>'}return str;
}

第一次发布，玩的不溜，可能function看着有点乱，这里贴2个自定义方法的截图

echarts tooltip数据太多，容器遮挡显示不全，根据数据分列展示相关推荐

ECharts 柱状图横轴(X轴)文字内容显示不全
1.问题描述 ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题,效果如下图所示. 2.解决办法 1)更改grid布局原来布局 option = {gr ...
android底部弹出显示不全,Android 解决 NestedScrollView 底部内容被遮挡显示不全
Android 解决 NestedScrollView 底部内容被遮挡显示不全很早之前就遇到过在使用 NestedScrollView 的时候发现底部的 View 总是显示不全, 看起来像是被底部的 ...
Excel合并数据查找函数VLOOKUP()一直显示最后一行数据或者一直报错的解决方法
Excel合并数据查找函数VLOOKUP()一直显示最后一行数据或者一直报错的解决方法大家好,我叫亓官劼(qí guān jié ),在CSDN中记录学习的点滴历程,时光荏苒,未来可期,加油~博客地 ...
R语言ggplot2可视化数据点注释、标签显示不全、发生边界截断问题解决实战
R语言ggplot2可视化数据点注释.标签显示不全.发生边界截断问题解决实战目录 R语言ggplot2
echarts tooltip文字太长换行
tooltip文字太长换行,设置了宽度也没有换行,加上一句: extraCssText: 'max-width:300px; white-space:pre-wrap', 没加之前是这样: 加上之后 ...
Excel数据太多，不会筛选重复数据？只需1键，即可筛选出重复数据
在日常工作中,相信很多人都会遇到这样的问题:Excel表格中的数据太多了,而且其中还有一些重复的数据,想要快速筛选出,但是又不会. 其实,想要快速筛选出重复的数据是有方法的.只要掌握下面这些方法,1秒 ...
layui在搜索的时候没有数据，在表格中显示暂无数据
layui在搜索的时候没有数据,在表格中显示暂无数据网上有很多教程,都是说要改变table.js,但是我发现不需要,只需要在返回json数据的时候做一下判断即可. php给layui返回json数据 ...
表视图底部被遮挡显示不全？
列表视图或滚动视图在父视图中显示不全,或被UITabBarcontroller遮挡. 设置视图属性 autoresizingMask,且值为 UIViewAutoresizingFlexibleHei ...
解决python画图坐标轴数据太密集的问题(显示部分刻度值)
一个简单的美化目录一.问题描述二.解决方案三.完整代码一.问题描述例如,我的x轴显示的刻度太密集(图1),想让显示数据看起来更为稀疏(图2) 二.解决方案增加一行代码↓应该不难看懂,三个 ...

echarts tooltip数据太多，容器遮挡显示不全，根据数据分列展示

echarts tooltip数据太多，容器遮挡显示不全，根据数据分列展示相关推荐

最新文章

热门文章