echarts x轴过长文字悬浮显示

最新推荐文章于 2024-04-08 16:46:45 发布

原创

最新推荐文章于 2024-04-08 16:46:45 发布 · 3.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#柱状图 #x轴 #横坐标文字 #echarts #过长显示处理

该博客介绍了如何处理Echarts柱状图中x轴横坐标文字过长的问题，通过限制文字长度为4，并在超过长度时用'...'替代。当鼠标悬浮在'...'上时，会显示完整内容。文章提供了具体的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能描述：

x轴文字显示过长会影响柱状图显示不全，需要对文字进行处理，为了美观，限定文字只显示在一行，文字长度为4；当长度大于4时将第四个文字替换为"..."；当鼠标悬浮在"..."时，显示全部内容，其它长度为4的文字正常显示；当鼠标移出"..."时，悬浮显示内容消失。

代码实现如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>柱状图x轴过长文字悬浮显示</title>
	<script src="echarts.js"></script>
</head>
    
<body>
	<!--为ECharts 准备一个具备大小的DOM-->
	<div id="main1" style="width:600px; height:600px"></div>
</body>
<script>

	//基于准备好的Demo,实例化ECharts
	var myECharts = echarts.init(document.getElementById('main1'));
	var data0 = [{value:620}, {value:732}, {value:701}, {value:734}, {value:1090}, {value:1130}, {value:1120}];
	var data1= [{value:120}, {value:132}, {value:1