Echarts X轴内容过长自动隐藏，鼠标移动上去显示全部

使用echarts图表做页面展示的时候，当X轴内容过长时，之前一直用的 '\n' 换行(将字符串根据需要分成两行来展示)，这样有很大的局限性（如内容过长的话分成两行也放不下，而且也会影响美观），后来发现可以通过设置自动隐藏,鼠标移动上去显示全部名称的方法来做，效果会更好。

1. 首先在 x轴上添加 triggerEvent: true。如下红色部分：

xAxis: {data: result.nameList,silent: false,triggerEvent: true,axisLine: {onZero: true,show: true,lineStyle: {color: '#90979c' // x 轴线最下面的横坐标线的颜色}},splitLine: {show: false},splitArea: {show: false},axisLabel: {interval: 0,//设置横坐标为斜rotate: 30,//文字倾斜角度formatter: function (value) {if (value.length > 10) {value = value.substring(0, 9) + "..";}return value;},textStyle: {color: '#666',fontSize: '12'}},
},

2. 自定义x轴上显示的内容长度。如上面代码段中的蓝色部分。

3. 自定义一个鼠标悬浮事件方法，并调用。

function extensionOne(myChart) {var id = document.getElementById("extensionOne");//判断是否创建过div框,如果没有创建过，则创建。（创建时，默认隐藏）if (!id) {var div = "<div id = 'extensionOne' sytle=\"display:none\"></div>";$('html').append(div);}var arrow_left = '20px';//鼠标悬浮事件myChart.on('mouseover', function (params) {if (params.componentType != "xAxis") {return;}//设置div框样式，并为其填充值。$('#extensionOne').css({"position": "absolute","color": "#90979c",// "border": "solid 0px white","font-family": "Arial","font-size": "14px","padding": "5px","display": "inline"}).text(params.value);var xx_text = params.event.offsetX - 35;arrow_left = xx_text;$("#talentDemandDistribution").mousemove(function (event) {// console.log("X轴坐标：" + event.pageX + " Y轴坐标：" + event.pageY);var xx = event.pageX - 30;var yy = event.pageY + 10;$('#extensionOne').css('top', yy).css('left', xx);});});myChart.on('mouseout', function (params) {$('#extensionOne').css('display', 'none');});
}

{......var chart = echarts.init(document.getElementById('talentDemandDistribution'));chart.setOption(option);//在echarts 初始化完成后，调用自定义的鼠标悬浮事件方法extensionOne(chart);
}

到此结束！

Echarts X轴内容过长自动隐藏，鼠标移动上去显示全部相关推荐

echart移上去显示内容_Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法...
最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称样例: 图二是鼠标移动到名称显示的,怎 ...
echart横轴文字显示省略号_Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法...
最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称样例: 图二是鼠标移动到名称显示的,怎 ...
ECharts X 轴标签过长导致文字重叠的 4 种解决方案
目录方法一:Echarts X 轴标签倾斜摆放方法二:Echarts X 轴限制每行字数,换行显示方法三:Echarts X 轴垂直竖显文字方法四:Echarts X 轴隔行显示使用 ...
Echarts x轴标签太长解决方案
有时候我们会遇到x轴标签过于长的情况,会导致显示不全示例代码 option: {xAxis: {type: 'category',data: ['长长的标签', '长长长的标签', '长长长长长的标 ...
linux execl 错误信息,Excel：自动隐藏错误结果的显示信息(转)
Excel:自动隐藏错误结果的显示信息(转) 朋友在用Excel统计学生的成绩时,在E63单元格中输入公式:=AVERAGE(E3:E62),准备计算平均分,由于上面的单元格中还没有输入成绩数据,因而 ...
Excel：自动隐藏错误结果的显示信息(转)
Excel:自动隐藏错误结果的显示信息(转) 朋友在用Excel统计学生的成绩时,在E63单元格中输入公式:=AVERAGE(E3:E62),准备计算平均分,由于上面的单元格中还没有输入成绩数据,因而 ...
vue echarts x轴文本过长，设置超出隐藏显示省略号，鼠标悬浮上显示全部
1. 原生js版本源码如下: <!DOCTYPE html> <html lang="en"><head><meta charset= ...
echarts y轴文本过长，设置超出隐藏，然后显示省略号，并且鼠标悬浮上之后显示全部
Echarts 标签中文本内容太长的时候怎么办 ? 看如下两块有分别说明: 具体代码如下:  <script src="${ctx}/tiles/ ...
vue echarts y轴文本过长，设置超出隐藏，然后显示省略号，并且鼠标悬浮上之后显示全部
效果图 <template><div><div id="main-barChart&quo ...

Echarts X轴内容过长自动隐藏，鼠标移动上去显示全部

Echarts X轴内容过长自动隐藏，鼠标移动上去显示全部相关推荐

最新文章

热门文章