<!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-05-04：给定一个非负整数c，你要判断是否存在两个整数a和b，使得a*a+b*b=c。【举例】c=5时，返回true。c=4时，返回true。c=3时，返回false。

    2021-05-04:给定一个非负整数c,你要判断是否存在两个整数a和b,使得aa+bb=c.[举例]c=5时,返回true.c=4时,返回true.c=3时,返回false. 福大大 答案2021- ...

  2. 2022-01-13：K 个不同整数的子数组。 给定一个正整数数组 A，如果 A 的某个子数组中不同整数的个数恰好为 K，则称 A 的这个连续、不一定不同的子数组为好子数组。 （例如，[1,2,3,1

    2022-01-13:K 个不同整数的子数组. 给定一个正整数数组 A,如果 A 的某个子数组中不同整数的个数恰好为 K,则称 A 的这个连续.不一定不同的子数组为好子数组. (例如,[1,2,3,1 ...

  3. idea过期解决

    用作用作发现过期了,苦恼,好办直接 搞个code 就行 MNQ043JMTU-eyJsaWNlbnNlSWQiOiJNTlEwNDNKTVRVIiwibGljZW5zZWVOYW1lIjoiR1VPI ...

  4. python 环境下使用PIP 报错的解决方法

    最近做一个小程序项目,使用djangorestframework,安装restframework 出现错误,安装环境Python2.7:出现错误如下:  "UnicodeEncodeErro ...

  5. 信息收集_网络扫描_nmap

    信息收集_网络扫描nmap 目标说明 -iL <inputname> (从列表或文件输入) -iR <hostnum> (随机选择生成目标数量) --exclude <h ...

  6. 逍遥自在学C语言 | break-循环的中断与跳转

    前言 在C语言中,break语句是一种控制流语句,它用于终止当前所在的循环结构(for.while.do-while)或者switch语句,从而跳出循环或者结束switch语句的执行. 一.人物简介 ...

  7. STL-stack(ACM)

    1.没有.clear()操作,需要手动pop() 重构函数(默认) stack<int> a; 基础操作 a.push() // 入栈 a.pop() // 弹出栈顶元素 a.empty( ...

  8. 如何在矩池云上安装和使用 Stata

    Stata是一款功能强大的统计分析软件,本文提供了如何在矩池云安装使用 Stata,以及如何在 Jupyter 中使用 Stata 的简要教程. 安装 Stata 时需要确保按照官方指南进行操作,St ...

  9. CSR格式如何更新？ GES图计算引擎HyG揭秘之数据更新

    摘要:HyG图计算引擎采用CSR格式来存储图的拓扑信息,CSR格式可以将稀疏矩阵的存储空间压缩,进而大大降低图的存储开销,同时具备访问效率高.格式易转化等优点. 本文分享自华为云社区<CSR格式 ...

  10. 阿里云ASK试用心得(避坑贴)

    前言 常年BP阿里云的各种服务,今天却被阿里云给上了一课,这一套组合拳把我安排的明明白白,血亏50大洋,算是提前为各位大佬排坑了,预祝大家中秋快乐 目的 最近阿里云首页放出了免费试用的活动,本着不用白 ...