<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--引入js文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js"></script>
    <div id="charts2" style="width: 99%; height: 390px; margin: 3px auto;"></div>
    <script>
        window.onload = function () {
            var option = {
                title: {
                    text: 'xxxx统计',
                    x: 'left',
                    y: 'top',
                    textStyle: {
                        fontSize: 14,
                        fontStyle: 'normal',
                        fontWeight: 'bold',
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    x: '15%',
                    textStyle: { //图例文字的样式
                        fontSize: 12
                    },
                    data: ['xxxx']

                },
                grid: {
                    left: '3%',
                    right: '2%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    scale: true,
                    triggerEvent: true,
                    //设置文本过长超出隐藏...表示
                    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>

</body>

</html>

Echarts--x轴文本过长，设置超出隐藏显示省略号，鼠标悬浮上显示全部的更多相关文章

  1. echarts x轴名称太长

    echarts x轴名称太长了,隐藏一部分,鼠标移到名称上,显示全称 function extension(mychart, type) { let extension = document.getE ...

  2. Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法

    最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...

  3. html使用css让文字超出部分用省略号三个点显示的方法案例

    html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display: ...

  4. Echarts x轴文本内容太长的几种解决方案

    Echarts 标签中文本内容太长的时候怎么办 ? - 1对文本进行倾斜 在xAxis.axisLabe中修改rotate的值 xAxis: { data: ["衬衫11111", ...

  5. 使用flex的同时设置超出喜爱是省略号，

    超出宽度,显示省略号 overflow:hidden; white-space:nowrap; text-overflow:ellipsis; 需要注意的是,在移动端在flex元素中的内容进行省略文字 ...

  6. text-overflow:ellipsis实现超出隐藏时省略号显示

    text-overflow:ellipsis;要达到的效果是:文字超出容器宽度时,文字被隐藏的文字用省略号代替.所以该属性只能用于块状元素或行内块元素中,对行内元素是不起作用的. 一般和white-s ...

  7. HTML中文本过长时自动隐藏末尾部分或中间等任意部分

    一.    一般情况下,HTML字符串过长时都会将超过的部分隐藏点,方法如下: 设置CSS: .ellipsis-type{ max-width: 50px;                      ...

  8. html使用css让文字多行超出部分用省略号三个点显示的方法案例

    text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-w ...

  9. CSS多行文字超出隐藏加省略号

    overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 限制行数 overflow: hidden; text-overflow: ...

  10. echarts图表X轴文字过长解决解决方案：根据文字长度自动旋转

    Echarts 标签中文本内容太长的时候怎么办 ? 关于这个问题搜索一下,有很多解决方案.无非就是 省略(间隔显示).旋转文字方向.竖排展示 前面两种解决方案,就是echarts暴露的: {   ax ...

随机推荐

  1. 日增数据超10PB！揭秘沃尔玛Lakehouse架构选型之路

    沃尔玛系统产生了世界上最大和最多样化的数据集之一,每天数据增长超 10 PB. 来自许多不同的来源及其支持的后端系统,一系列大量的业务事件流被发送到主要由 Apache Kafka 支持的消息传递层. ...

  2. 声音好听,颜值能打,基于PaddleGAN给人工智能AI语音模型配上动态画面(Python3.10)

    借助So-vits我们可以自己训练五花八门的音色模型,然后复刻想要欣赏的任意歌曲,实现点歌自由,但有时候却又总觉得少了点什么,没错,缺少了画面,只闻其声,却不见其人,本次我们让AI川普的歌声和他伟岸的 ...

  3. xshell入门及Linux常用命令

    一.首先您的xshell先连接上需要远程连接的服务器. 二.打开连接,出现下记页面,就证明与服务器连接正常了. 三.接下来,我们就可以使用命令做一系列操作了. 3-1:cd 是进入下一级目录命令 例如 ...

  4. Gitlab Registries

    在项目开发和部署过程中,我们常常需要一套私有仓库,比如 Code Repository.Package Repository,Docker Registry 等. Code Repository:在 ...

  5. R 语言柱状图示例笔记

    由于微信不允许外部链接,你需要点击文章尾部左下角的 "阅读原文",才能访问文章中链接. 一.基础柱状图 1. barplot 命令 基于barplot基础柱状图颜色.方向及分组的绘 ...

  6. 在 VS Code 里逛知乎、发文章？Zhihu on VSCode 来啦！重新定义内容创作！

    本文为 牛岱 的原创文章 在2020年2月10日首发于"玩转VS Code"知乎专栏 你是否已经厌倦了知乎 Web 端文本编辑器糟糕的使用体验和时而出现的奇怪 Bug? 身为程序员 ...

  7. RSA 加密解密

    from Crypto.Util.number import bytes_to_long, long_to_bytes, getPrime import libnum # 一.取两个素数 p = ge ...

  8. 2023安洵杯web两道WP

    Web CarelessPy 在首页提示存在eval和login的路由,在download存在任意文件下载 访问eval可以读取目录下的文件,知道/app/pycache/part.cpython-3 ...

  9. 使用python连接阿里云iot平台时遇到的问题及解决方法（on_connect打印的rc值为9，上传物模型值）

    使用python连接阿里云iot平台时遇到的问题及解决方法                                                            on_connect打 ...

  10. 软件开发架构及OSI七层协议

    软件开发架构 规定了程序的请求逻辑.功能分块 1.C/S架构 Client:客户端 Server: 服务端 """ 我们使用计算机下载下俩的一个个app本质是各大互联网公 ...