<!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. ET框架6.0分析二、异步编程

    概述 ET框架很多地方都用到了异步,例如资源加载.AI.Actor模型等等.ET框架对C#的异步操作进行了一定程度的封装和改造,有一些特点: 显式的或者说强调了使用C#异步实现协程机制(其实C#的异步 ...

  2. Redis使用lua脚本实现库存扣减

    为什么使用Lua脚本为什么能合并多个原子操作? Redis官方文档:https://redis.io/docs/manual/programmability/eval-intro/ Redis 保证脚 ...

  3. 补充:C语言枚举类型

    1.枚举类型 1.枚举数据类型是C语言中一种构造数据类型,可以让数据更加简洁,更易读,对于只有几个特定的数据,可以使用枚举类型 2.枚举对应英文enumeration,简写为enum 3.枚举是一组常 ...

  4. (偶尔更新)【Linux】Linux常见不常用命令收集

    本文时间 2023-05-20 作者:sugerqube漆瓷 cd,vi,clear这些属于常见常用命令本文不再赘述. 安装命令 yum install vim举例安装vim rpm -ivh a.r ...

  5. 洛谷 - P1030 求先序

    Description 给出一棵二叉树的中序与后序排列.求出它的先序排列.(约定树结点用不同的大写字母表示,且二叉树的节点个数 ≤8≤8). Input 共两行,均为大写字母组成的字符串,表示一棵二叉 ...

  6. odoo开发教程十五：仪表板

    仪表盘可以通过外部ID引用其他视图文件的内容,整合到一个界面进行显示. 一:建立仪表盘视图文件 views/session_board.xml: 通过外部id引入要展示的视图文件--定义仪表板form ...

  7. Centos 7 通过 targz 文件安装 Elastic Search 服务

    区别于通过发行版自带的仓库, 介绍如何通过 targz 文件安装 Elastic Search 服务, 使用的 Linux 为 Centos 7 下载 https://www.elastic.co/d ...

  8. 【Python入门教程】Python常用表格函数&操作（xlrd、xlwt、openpyxl、xlwings）

    ​         在我们使用Python时,避免不了与Excel打交道.同样Python的三方库和代码的简洁性也为我们处理大数据提供了便利.今天给大家介绍一下常用的处理表格的函数,同时还有一些常用的 ...

  9. 1. Mybatis 简介

    1. Mybatis历史 MyBatis最初是Apache的一个开源项目iBatis, 2010年6月这个项目由Apache Software Foundation迁移到了Google Code.随着 ...

  10. GPU技术在大规模数据集处理和大规模计算中的应用

    目录 GPU 技术在大规模数据集处理和大规模计算中的应用 随着深度学习在人工智能领域的快速发展,大规模数据处理和大规模计算的需求日益增长.GPU(图形处理器)作为现代计算机的重要部件,被广泛应用于这些 ...