Echarts的标签过长，需要省略显示 且鼠标停留会有全部内容悬浮提示
标题
Echarts的标签过长，需要省略显示 且鼠标停留会有全部内容悬浮提示
放上实际的效果图，标签过长省略为3个实心点，红色箭头可以当做 鼠标 ，鼠标经过会显示标签的全称。
关键代码先贴上：
ok.如果能够看懂上面的两端代码 那就可以直接上手你的echarts了. echarts是没有这个提供这两个方法的。但是因为实际业务的需求很多东西都要自己附加进去。例如这里面的业务需求：
- 标签可能会很长
- 标签过长需要省略
- 如果鼠标经过标签，要显示完整的标签内容
还好echarts有个formatter这个方法让大家自己去自定义标签的输出形式，可塑性就变的非常高了。第二就是echarts有自己的监听器，只需要通过on绑定一个mouseover就可以让鼠标经过这个canvas触发一系列变化。
完整的代码如下：（请在echarts官网下载echarts.min.js，即可直接复制运行这段代码。请看文件引用的路径，确保文件被正确引入）
<!--
Copyright 2018-04-25, Jachin
QQ: 381558301
Email: 381558301@qq.com
Echarts标签过长省略-鼠标经过显示完整
-->
<!DOCTYPE html>
<html>
<head>
<title>Echarts标签过长省略-鼠标经过显示完整</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
<script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>
<script src="js/echarts.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
.pct100{ width: 100% }
.h250{ height: 250px; }
.hide{ display: none; }
.tipname {
position: absolute;
background: rgba(0,0,0,0.5);
border-radius: 5px;
max-width: 400px;
padding: 5px;
z-index: 1;
color: #fff;
}
</style>
<body>
<div id="bar-1" class="pct100 h250"></div>
<div id="tip" class="tipname hide"></div>
</body>
</html>
<script type="text/javascript">
var bar1 = echarts.init(document.getElementById('bar-1'));
option2 = {
yAxis: [{
type: "category",
data: ["事项1事项1事项1事项1事项1事项1事项1事项1事项1事项1事项1事项1", "事项2事项2事项2事项2事项2事项2", "事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3", "事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4", "事项5事项5事项5事项5事项5事项5事项5事项5事项5事项5"],
axisLabel: {
show:true,
interval: 0, //强制所有标签显示
align:'left',
margin: 115, //标签向右移动 如果yAxis 跟 xAxis换了,这个margin应该调为0才能看见标签显示
textStyle: {
color: "#000",
},
formatter: function (params){ //标签输出形式 ---请开始你的表演
var index = 10;
var newstr = '';
for(var i=0;i<params.length;i+=index){
var tmp=params.substring(i, i+index);
newstr+=tmp+'\n';
}
if( newstr.length > 20)
return newstr.substring(0,20) + '...';
else
return '\n'+newstr;
},
},
triggerEvent: true,
}],
xAxis: [{
type: "value",
}],
series: [{
type: "bar",
data:[
{
name:'事项1',
value: 630,
itemStyle: {
normal: {
color: '#d8514b',
},
},
},
{
name:'事项2',
value: 730,
itemStyle: {
normal: {
color: '#f4a53b',
},
},
},
{
name:'事项3',
value: 830,
itemStyle: {
normal: {
color: '#fdce10',
},
},
},
{
name:'事项4',
value: 930,
itemStyle: {
normal: {
color: '#27737c',
},
},
},
{
name:'事项5',
value: 1030,
itemStyle: {
normal: {
color: '#60c1de',
},
},
}],
label: {
normal: {
show: true,
position: "right",
formatter: function(params) {
return params.data.value;
},
}
}
}]
};
bar1.setOption(option2);
bar1.on('mouseover', function (params) { //鼠标经过图表时候判断参数 ---请开始你的表演
console.log(params);
if( params.componentType == 'yAxis' ){
var tt = $('#tip');
tt.html(params.value);
console.log('x='+params.event.event.layerX+' ---'+'y='+params.event.event.layerY)
tt.css('left', params.event.event.layerX+10);
tt.css('top', params.event.event.layerY+20);
console.log(tt.css('left'));
tt.show();
}
});
bar1.on('mouseout', function (params) {
$('#tip').hide();
})
</script>
参考原博文原址： https://blog.csdn.net/qq_35129893/article/details/80078642.