Echarts的标签过长，需要省略显示且鼠标停留会有全部内容悬浮提示

最新推荐文章于 2023-11-30 17:39:31 发布

是胡不是华

最新推荐文章于 2023-11-30 17:39:31 发布

阅读量1.4k

点赞数 1

文章标签： javascript echarts

原文链接：https://blog.csdn.net/qq_35129893/article/details/80078642

版权

标题

Echarts的标签过长，需要省略显示且鼠标停留会有全部内容悬浮提示

放上实际的效果图，标签过长省略为3个实心点，红色箭头可以当做鼠标，鼠标经过会显示标签的全称。

这里写图片描述

关键代码先贴上：

这里写图片描述

ok.如果能够看懂上面的两端代码那就可以直接上手你的echarts了. echarts是没有这个提供这两个方法的。但是因为实际业务的需求很多东西都要自己附加进去。例如这里面的业务需求：

标签可能会很长
标签过长需要省略
如果鼠标经过标签，要显示完整的标签内容

还好echarts有个formatter这个方法让大家自己去自定义标签的输出形式，可塑性就变的非常高了。第二就是echarts有自己的监听器，只需要通过on绑定一个mouseover就可以让鼠标经过这个canvas触发一系列变化。

完整的代码如下：（请在echarts官网下载echarts.min.js，即可直接复制运行这段代码。请看文件引用的路径，确保文件被正确引入）

<!-- 
    Copyright 2018-04-25, Jachin
    QQ: 381558301 
    Email: 381558301@qq.com

    Echarts标签过长省略-鼠标经过显示完整
 -->
<!DOCTYPE html>
<html>
<head>
    <title>Echarts标签过长省略-鼠标经过显示完整</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>
    <script src="js/echarts.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
    .pct100{ width: 100% }
    .h250{ height: 250px; }
    .hide{ display: none; }
    .tipname {
        position: absolute;
        background: rgba(0,0,0,0.5);
        border-radius: 5px;
        max-width: 400px;
        padding: 5px;
        z-index: 1;
        color: #fff;
    }
</style>
<body>
    <div id="bar-1" class="pct100 h250"></div>
    <div id="tip" class="tipname hide"></div>
</body>
</html>
<script type="text/javascript">
        var bar1 = echarts.init(document.getElementById('bar-1'));
    option2 = {
        yAxis: [{
            type: "category",
            data: ["事项1事项1事项1事项1事项1事项1事项1事项1事项1事项1事项1事项1", "事项2事项2事项2事项2事项2事项2", "事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3事项3", "事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4事项4", "事项5事项5事项5事项5事项5事项5事项5事项5事项5事项5"],
            axisLabel: {
                show:true,
                interval: 0, //强制所有标签显示
                align:'left',
                margin: 115, //标签向右移动 如果yAxis 跟 xAxis换了,这个margin应该调为0才能看见标签显示
                textStyle: {
                    color: "#000",
                },
                formatter: function (params){   //标签输出形式 ---请开始你的表演
                    var index = 10;
                    var newstr = '';
                    for(var i=0;i<params.length;i+=index){
                        var tmp=params.substring(i, i+index);
                        newstr+=tmp+'\n';
                    }
                    if( newstr.length > 20)
                        return newstr.substring(0,20) + '...';
                    else
                        return '\n'+newstr;
                },
            },
            triggerEvent: true,
        }],
        xAxis: [{
            type: "value",
        }],

        series: [{
            type: "bar",
            data:[
                {
                    name:'事项1',
                    value: 630,
                    itemStyle: {
                        normal: {
                            color: '#d8514b',
                        },
                    },
                },
                {
                    name:'事项2',
                    value: 730,
                    itemStyle: {
                        normal: {
                            color: '#f4a53b',
                        },
                    },
                },
                {
                    name:'事项3',
                    value: 830,
                    itemStyle: {
                        normal: {
                            color: '#fdce10',
                        },
                    },
                },
                {
                    name:'事项4',
                    value: 930,
                    itemStyle: {
                        normal: {
                            color: '#27737c',
                        },
                    },
                },
                {
                    name:'事项5',
                    value: 1030,
                    itemStyle: {
                        normal: {
                            color: '#60c1de',
                        },
                    },
                }],
            label: {
                normal: {
                    show: true,
                    position: "right",
                    formatter: function(params) {
                        return params.data.value;
                    },
                }
            }
        }]
    };
    bar1.setOption(option2);

    bar1.on('mouseover', function (params) {    //鼠标经过图表时候判断参数  ---请开始你的表演
        console.log(params);
        if( params.componentType == 'yAxis' ){
            var tt = $('#tip');
            tt.html(params.value);
            console.log('x='+params.event.event.layerX+'  ---'+'y='+params.event.event.layerY)
            tt.css('left', params.event.event.layerX+10);
            tt.css('top', params.event.event.layerY+20);
            console.log(tt.css('left'));
            tt.show();
        }
    });
    bar1.on('mouseout', function (params) {
        $('#tip').hide();
    })
</script>

参考原博文原址： https://blog.csdn.net/qq_35129893/article/details/80078642.

是胡不是华

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Echarts的标签过长，需要省略显示且鼠标停留会有全部内容悬浮提示

标题Echarts的标签过长，需要省略显示且鼠标停留会有全部内容悬浮提示放上实际的效果图，标签过长省略为3个实心点，红色箭头可以当做鼠标，鼠标经过会显示标签的全称。关键代码先贴上： ok.如果能够看懂上面的两端代码那就可以直接上手你的echarts了. echarts是没有这个提供这两个方法的。但是因为实际业务的需求很多东西都要自己附加进去。例如这里面的业务需求：标签可能会很长标签过长需要省略如果鼠标经过标签，要显示完整的标签内容还好echar
复制链接

扫一扫