echarts----X轴文本过长处理方法

ゞ浴缸里的玫瑰 2024-04-19 15:22 6阅读 0赞

1.截取名称用省略号替代，设置一个隐藏域用来显示完整的名称（个人推荐方式）  
先在**xAxis**中添加属性  
xAxis: \{  
triggerEvent: true,//必须设置为true，否则事件无法触发  
axisLabel:\{  
formatter: function(value) \{  
var res = value;  
if(res.length > 5) \{//截取几个字符自己设定  
res = res.substring(0, 4) + “…”;  
\}  
return res;  
·\}  
\}  
\}

然后常规操作：  
myChart.setOption(option);  
最后设置隐藏域以及鼠标的移入移出事件：  
extension(myChart);

function extension(mychart) \{  
//判断是否创建过div框,如果创建过就不再创建了  
var id = document.getElementById(“extension”);  
if(!id) \{  
var div = “<div id = ‘extension’ sytle=“display:none”>”  
$(‘html’).append(div);  
\}  
mychart.on(‘mouseover’, function(params) \{  
if(params.componentType == “xAxis”) \{  
$(’\#extension’).css(\{  
“position”: “absolute”,  
“color”: “black”,  
//“border”:“solid 2px white”,  
“font-family”: “Arial”,  
“font-size”: “20px”,  
“padding”: “5px”,  
“display”: “inline”  
\}).text(params.value);  
$(“html”).mousemove(function(event) \{  
var xx = event.pageX - 30;  
var yy = event.pageY + 20;  
$(’\#extension’).css(‘top’, yy).css(‘left’, xx);  
\});  
\}  
\});  
mychart.on(‘mouseout’, function(params) \{  
if(params.componentType == “xAxis”) \{  
$(’\#extension’).css(‘display’, ‘none’);  
\}  
\});  
\};

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzkyODQy_size_16_color_FFFFFF_t_70]  
2.其他：  
[添加链接描述][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzkyODQy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d187cb71cd344894b65647ecd02192fa.png
[Link 1]: https://blog.csdn.net/zm_miner/article/details/78321254

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts---x轴过长滑动显示

子： option = \{ title : \{ text: ‘某地区蒸发量和降水量’, subtext: ‘纯属虚构’ \}, tooltip...

男娘i/ 2024年04月19日 15:33/ 0 赞/ 9 阅读

相关 echarts----X轴文本过长处理方法

.截取名称用省略号替代，设置一个隐藏域用来显示完整的名称（个人推荐方式）先在**xAxis**中添加属性 xAxis: \{ triggerEvent: t...

ゞ浴缸里的玫瑰/ 2024年04月19日 15:22/ 0 赞/ 7 阅读

相关 VUE之Echarts图表x轴y轴提示文字过长处理为省略号

只需对显示文字格式修改即可 yAxis: { type: 'category', axisLine: {

心已赠人/ 2022年10月19日 15:59/ 0 赞/ 188 阅读

相关 echarts统计图Y轴（或X轴）文字过长问题解决

echarts 统计图Y轴文字过长在使用echarts时，出现数值非常大，Y轴又显示不下的情况就需要压缩Y轴数值刻度。 ![744482-20190227182035

不念不忘少年蓝@/ 2022年10月02日 14:43/ 0 赞/ 287 阅读

相关页面表格字段过长的处理方法

问题描述页面中可能遇到，表格列表中字段过长，撑大表格列，页面会变得很不整齐。解决方法方法1：省略过长字符 <table>

Dear 丶/ 2022年09月19日 13:28/ 0 赞/ 260 阅读

相关使用Echarts时，X轴文本太长的解决方案

在使用 Echarts 展示各种可视化数据的时候，经常会遇到 X 轴数据过多或者每一个刻度名称太长而导致的 X 轴混乱的问题。其实 Echarts 默认的配置是 X 轴刻度

谁践踏了优雅/ 2022年09月04日 10:59/ 0 赞/ 247 阅读

相关 jqueryflot图表x轴坐标过长完美解决方案(转)

jqueryflot图表x轴坐标过长完美解决方案(转) 参考文章： [（1）jqueryflot图表x轴坐标过长完美解决方案(转)][1_jqueryflot_x] （2

偏执的太偏执、/ 2022年08月28日 07:56/ 0 赞/ 112 阅读

相关（转）CSS处理文本过长或超出部分

原帖：https://segmentfault.com/a/1190000009873744 在网页开发中，经常会遇到文本超出了限定的范围，尤其是屏幕尺寸的大小导致的，

不念不忘少年蓝@/ 2022年05月21日 09:23/ 0 赞/ 293 阅读

相关 Java文本处理10-计算文本平均句长

1、任务简介本节任务是计算文本平均句长，可以再上一节任务[《Java文本处理9-计算文本句子数》][Java_9-]的基础上来进行，并且还需要使用到[《Java文本处理

今天药忘吃喽~/ 2022年03月18日 09:06/ 0 赞/ 203 阅读

相关 echarts统计图Y轴（或X轴）文字过长问题解决

echarts 统计图Y轴文字过长在使用echarts时，出现数值非常大，Y轴又显示不下的情况就需要压缩Y轴数值刻度。 ![744482-20190227182035

深藏阁楼爱情的钟/ 2022年01月06日 12:55/ 0 赞/ 802 阅读