<!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. 2021-06-27：给定一个正数数组arr，代表若干人的体重。再给定一个正数limit，表示所有船共同拥有的载重量。每艘船最多坐两人，且不能超过载重，想让所有的人同时过河，并且用最好的分配方法让船尽

    2021-06-27:给定一个正数数组arr,代表若干人的体重.再给定一个正数limit,表示所有船共同拥有的载重量.每艘船最多坐两人,且不能超过载重,想让所有的人同时过河,并且用最好的分配方法让船尽 ...

  2. 2021-08-04：给定一个字符串str，当然可以生成很多子序列。返回有多少个子序列是回文子序列，空序列不算回文。比如，str = “aba”，回文子序列：{a}、{a}、 {a,a}、 {b}、{

    2021-08-04:给定一个字符串str,当然可以生成很多子序列.返回有多少个子序列是回文子序列,空序列不算回文.比如,str = "aba",回文子序列:{a}.{a}. {a ...

  3. @csrf_exempt

    在Django中对于基于函数的视图我们可以 @csrf_exempt 注解来标识一个视图可以被跨域访问.那么对于基于类的视图,我们应该怎么办呢? 简单来说可以有两种访问来解决 方法一:在类的 disp ...

  4. Python生成随机验证

    Python生成随机验证码   Python生成随机验证码,需要使用PIL模块. 安装: 1 pip3 install pillow 基本使用 1. 创建图片 1 2 3 4 5 6 7 8 9 fr ...

  5. 基于nerdctl+buildkitd+containerd实现镜像构建

    1.容器技术简介 容器技术除了的docker之外,还有coreOS的rkt.google的gvisor.以及docker开源的containerd.redhat的podman.阿⾥的pouch等,为了 ...

  6. 基因 ID 匹配利器

    一.背景 对于每个生物信息分析的人来说,ID 匹配(映射)是一项非常常见,但又很繁琐的任务.假设,我们有一个来自上游分析的 gene symbol 或报告的 ID 列表,然后我们的下一个分析却需要使用 ...

  7. CAPL 脚本基本语句

    CAPL(Communication Access Programming Language)是一种用于汽车通信网络分析和仿真的脚本语言.以下是CAPL脚本的基本语句: 1.变量声明 variable ...

  8. 迟来的秋招面经，17家公司，Java岗位

    一位朋友秋招面试了17家公司(都是中小公司或者银行),Java 后端岗.下面是他的个人情况.求职经验已经这17家公司的面经. 个人情况和求职经验 其实现在是挺后悔大学没有好好的学习的,因为基本上都会提 ...

  9. Solon 也是 SSE（Server Send Events）后端开发的优选

    Solon 2.3.6 在开发异步接口时,顺带也为 Solon Web 提供了 SSE (Server-Sent Events) 协议的支持插件: <dependency> <gro ...

  10. python3使用PIL添加中文文本水印背景

    环境:Windows10_x64  Python版本 :3.9.2 Pillow版本:9.1.1   写的博客文章被转载且不注明出处的情况时有发生,甚至有部分转载者将文章配图添加自己的水印!为了保护作 ...