<!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. 2022-01-17：单词规律 II。 给你一种规律 pattern 和一个字符串 str，请你判断 str 是否遵循其相同的规律。 这里我们指的是 完全遵循，例如 pattern 里的每个字母和字符

    2022-01-17:单词规律 II. 给你一种规律 pattern 和一个字符串 str,请你判断 str 是否遵循其相同的规律. 这里我们指的是 完全遵循,例如 pattern 里的每个字母和字符 ...

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

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

  3. APP中RN页面渲染流程-ReactNative源码分析

    在APP启动后,RN框架开始启动.等RN框架启动后,就开始进行RN页面渲染了. RN页面原生侧页面渲染的主要逻辑实现是在RCTUIManager和RCTShadowView完成的. 通过看UIMana ...

  4. 1.ruoyi-ui部署

    1.ruoyi-ui 部署 A.用 idea 打开 ruoyi-ui 项目后,点击左下角的这个按钮 B.运行 build:prod 后,会在项目文件夹下生成dist文件夹(里面大概有这些文件) C.将 ...

  5. 一篇文章带你详细了解axios的封装

    axios 封装 对请求的封装在实际项目中是十分必要的,它可以让我们统一处理 http 请求.比如做一些拦截,处理一些错误等.本篇文章将详细介绍如何封装 axios 请求,具体实现的功能如下 基本配置 ...

  6. 3. @RequestMapping注解

    1. @RequestMapping 注解的功能 ‍ @RequestMapping 注解的作用就是将请求和处理请求的控制器方法关联起来,建立映射关系. ‍ SpringMVC 接收到指定的请求 , ...

  7. 数据库varchar和tinyint和int和java实体属性的对应关系的学习

    大家好,最近做项目碰到群里小伙伴的对于项目中用到的这几个类型,自己的java实体类属性该用什么类型干到困惑,于是乎,我决定为大家解密! 相信我,绝对干货,看完了,工资+200~哈哈哈,扯远了,闲话不对 ...

  8. asp.net程序通过Microsoft Azure中SAML协议实现单点登录

    1. 新建应用程序 登录Azure门户,进入左侧菜单"企业应用程序--所有应用程序",点"新建应用程序", 继续点"创建你自己的应用程序", ...

  9. 自研ORM （匠心之作）

    Fast Framework 作者 Mr-zhong 代码改变世界.... 一.前言 Fast Framework 基于NET6.0 封装的轻量级 ORM 框架 支持多种数据库 SqlServer O ...

  10. 大数据面试题集锦-Hadoop面试题(四)-YARN

    你准备好面试了吗?这里有一些面试中可能会问到的问题以及相对应的答案.如果你需要更多的面试经验和面试题,关注一下"张飞的猪大数据分享"吧,公众号会不定时的分享相关的知识和资料. 目录 ...