vue echarts x轴文本过长，设置超出隐藏显示省略号，鼠标悬浮上显示全部_echart vue x轴文字溢出隐藏并悬停(1)

2401_84618023

于 2024-05-16 02:44:25 发布

阅读量1k

点赞数 23

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84618023/article/details/138933314

版权

程序员专栏收录该内容

105 篇文章 0 订阅

订阅专栏

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

                axisLabel: {
                    margin: 8,
                    formatter: function (params) {
                        var val = "";
                        if (params.length > 4) {
                            val = params.substr(0, 4) + '...';
                            return val;
                        } else {
                            return params;
                        }
                    }
                },

                //也可以从后台获取数据
                data: ['这是名称 非常长的商品1',
                    '这是名称比商品1还长很多的商品2', '这同样是名称很长的商品3这同样是名称很长的商品3这同样是名称很长的商品3这同样是名称很长的商品3这同样是名称很长的商品3', '短的商品4']
            },
            yAxis: {
                type: 'value',
            },
            series: [{
                name: 'xxxx',
                type: 'bar',
                stack: '总量',
                barWidth: 3,
                label: {
                    normal: {
                        show: false,
                        position: 'insideRight',
                        formatter: function (params) {
                            if (params.value > 0) {
                                return params.value;
                            } else {
                                return '';
                            }
                        }
                    }
                },
                data: [123]
            }]
        };
        // 基于准备好的dom，初始化echarts实例
        var chart2 = echarts.init(document.getElementById('charts2'));
        chart2.clear();
        chart2.setOption(option);
        // 页面监控宽度的变化
        window.addEventListener("resize", function () {
            chart2.resize();
        });
        
        extension(chart2);//这个方法是用来处理鼠标悬浮显示全部内容的
        function extension(chart2) {
            //判断是否创建过div框,如果创建过就不再创建了
            //该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
            var id = document.getElementById("extension");
            if (!id) {
                var div = "<div id = 'extension' sytle=\"display:block\"></div>";
                $("html").append(div);
            }
            chart2.on('mouseover', function (params) {
                console.log(params)
                //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
                if (params.componentType == "xAxis") {
                    //设置悬浮文本的位置以及样式
                    $('#extension').css({
                        "position": "absolute",
                        "color": "#333",
                        "font-size": "12px",
                        "padding": "5px",
                        "display": "inline",
                        'border-radius': '4px',
                        'background-color': 'rgba(255, 255, 255, 0.5)',
                        'box-shadow': 'rgba(0, 0, 0, 0.3) 2px 2px 8px'
                    }).text(params.value);
                    $("html").mousemove(function (event) {
                        var xx = event.pageX - 10;
                        var yy = event.pageY + 15;
                        $('#extension').css('top', yy).css('left', xx);
                    });
                }
            });
            chart2.on('mouseout', function (params) {
                //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
                if (params.componentType == "xAxis") {
                    $('#extension').css('display', 'none');
                }
            });
        }
    }
</script>



**2. vue版本**


**可以全局封装一下这个悬浮的方法：**extension.js'

import $ from ‘jquery’
// echart X轴文字太长悬浮
export function extension(chart2) {
//判断是否创建过div框,如果创建过就不再创建了
//该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
var id = document.getElementById(“extension”);
if (!id) {
var div = “<div id = ‘extension’ sytle=“display:block”>”;
$(“html”).append(div);
}
chart2.on(‘mouseover’, function (params) {
// console.log(params)
//注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
if (params.componentType == “xAxis”) {
//设置悬浮文本的位置以及样式
$(‘#extension’).css({
“position”: “absolute”,
“color”: “#333”,
“font-size”: “12px”,
“padding”: “5px”,
“display”: “inline”,
‘border-radius’: ‘4px’,
‘background-color’: ‘rgba(255, 255, 255, 0.5)’,
‘box-shadow’: ‘rgba(0, 0, 0, 0.3) 2px 2px 8px’
}).text(params.value);
$(“html”).mousemove(function (event) {
var xx = event.pageX - 10;
var yy = event.pageY + 15;
$(‘#extension’).css(‘top’, yy).css(‘left’, xx);
});
}
});
chart2.on(‘mouseout’, function (params) {
//注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
if (params.componentType == “xAxis”) {
$(‘#extension’).css(‘display’, ‘none’);
}
});
}


**vue  页面：**


引入： import { extension } from '@/components/Echarts/extension.js'




### 学习笔记

主要内容包括**html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue**等等

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

>**HTML/CSS**

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

![](https://img-blog.csdnimg.cn/img_convert/8df3303f87d179abc93a179618386375.webp?x-oss-process=image/format,png)

>**HTML5 /CSS3**

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

![](https://img-blog.csdnimg.cn/img_convert/4d0d80b00e6ae2350556275f114da925.webp?x-oss-process=image/format,png)

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

![](https://img-blog.csdnimg.cn/img_convert/42c1d66de58f50a897bb2fe02ebcb0b3.webp?x-oss-process=image/format,png)

715798642488)]

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中...(img-6H2mz7fh-1715798642489)]

2401_84618023

关注

23
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
vue echarts x轴文本过长，设置超出隐藏显示省略号，鼠标悬浮上显示全部_echart vue x轴文字溢出隐藏并悬停(1)

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。//注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis。//注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis。//设置悬浮文本的位置以及样式。
复制链接

扫一扫