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

2401_84447390

已于 2024-05-08 16:46:34 修改

阅读量1.1k

点赞数 18

分类专栏：程序员文章标签： vue.js echarts 前端

于 2024-05-08 16:46:32 首次发布

本文链接：https://blog.csdn.net/2401_84447390/article/details/138577986

版权

程序员专栏收录该内容

151 篇文章 0 订阅

订阅专栏

总结

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

            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'

xAxis: {
type: ‘category’,
data: titleLineName,
triggerEvent: true, //这个很重要一定要写
axisTick: {
alignWithLabel: true
},
axisLabel: {
textStyle: {
color: ‘#fff’, //坐标值得具体的颜色
},
formatter: function(value) {
var strs = value;
if(strs.length > 4) {
strs = strs.substring(0, 3) + “…”;