首页 前端知识 ECharts,X轴或Y轴名字过长截断且鼠标悬停在刻度标签上时显示全称

ECharts,X轴或Y轴名字过长截断且鼠标悬停在刻度标签上时显示全称

2024-08-19 22:08:54 前端知识 前端哥 592 440 我要收藏

业务需求

下图的柱状图,Y轴刻度标签长度大于3个字时,截断并显示…,当鼠标悬停在标签上时,显示全称,鼠标移开则消失。

在这里插入图片描述

开发环境

ECharts + vue

代码实现过程

<div class="bottom_left">
	<!-- id为wuzichuku的div就是柱状图的容器,按需求正常设置宽高及样式即可 -->
  <div class="wuzichuku_div" id="wuzichuku" @mousemove="onmousemove"></div>
</div>
<!-- id为extension的div为待会要显示/隐藏刻度标签名字的容器,需设置display: none,以及在css中设置容器的其他样式 -->
<div id="extension" style="display: none" class="tooltipDiv"></div>
//这些都是刻度标签容器的固定样式,可以写在css中,使js的部分可以专注处理逻辑
.tooltipDiv{
   color:white;
   position:absolute;
   font-size:16px;
   padding:10px;
   z-index:3000;
   background-color:black;
 }
getLine() {
   var _this = this;
   var chartDom = document.getElementById("wuzichuku");
   var myChart = echarts.init(chartDom);
   var option;
   //以下...的部分为同本文关系不大的内容,可根据业务需求自行设定
   option = {
     color: [...],
     tooltip: {...},
     legend: {...},
     grid: {...},
     xAxis: {
       type: "category",
       ...
       //triggerEvent: true, //这句很重要,没有不会触发事件,想要在X轴添加鼠标事件,则写在这里
     },
     yAxis: {
       type: "value",
       ...
       triggerEvent: true, //这句很重要,没有不会触发事件,想要在Y轴添加鼠标事件,则写在这里
       axisLabel: {
         show: true, //是否显示刻度标签。
         color: "rgba(255, 255, 255, 1)",
         width: 30, //文本显示宽度。想要设置截断,必须设置width,不然下一行代码无法生效。
         overflow: "truncate", //文字超出宽度是否截断或者换行。truncate代表超出部分截断,且echarts默认截断后显示...,需要其他截断显示,可以查官方文档设置。
       },
     },
     series: [...],
   };
   option && myChart.setOption(option);

	//设置triggerEvent: true之后,就可以给图表绑定事件,可支持事件有鼠标点击、悬停、移入、移出等,可以查询官方文档。
   myChart.on("mouseover", function (params) {
   	//若想设置针对X轴的事件,if函数的条件可以为params.componentType == "xAxis"
     if (params.componentType == "yAxis") {
     	//鼠标悬停的位置为Y轴时,我们去获取刻度标签容器的dom
       var extension = document.getElementById("extension");
			//设置display为显示
       extension.style.display = "inline-block";
       //设置容器的内容为Y刻度标签的全称
       extension.innerHTML = params.value;
       
     }
   });
   //鼠标移出时,刻度标签容器隐藏
   myChart.on("mouseout", function (params) {
     if (params.componentType == "yAxis") {
       var extension = document.getElementById("extension");

       extension.style.display = "none";
     }
   });
 },

 // 给echats图表绑定的事件,获取鼠标当前位置,用来设置刻度标签容器显示的位置
 onmousemove: function (event) {
   var extension = document.getElementById("extension");
   extension.style.top = (event.pageY +10) + 'px';
   extension.style.left = (event.pageX +10) + 'px';
 },

代码实现效果

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16248.html
标签
评论
发布的文章

php保存

2024-08-27 16:08:00

jQuery NiceScroll 插件

2024-08-27 09:08:49

vue echart4.0 按需引入

2024-08-27 09:08:28

Taro3 Vue3使用echarts

2024-08-27 09:08:49

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!