关于echarts的y轴文字超出的解决方案

最新推荐文章于 2024-07-23 15:58:22 发布

原创最新推荐文章于 2024-07-23 15:58:22 发布 · 4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #文字超出显示

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何解决Echarts图表中Y轴文字显示超出的问题，通过使用“…”替换超出部分，提供了一段实现此功能的具体代码示例。

关于echarts的y轴文字超出的解决方案

在这里插入图片描述
类似这种，文字超出用“…”替换，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .hide{ display: none; }
    .contentval {
        position: absolute;
        background: rgba(0,0,0,0.5);
        border-radius: 5px;
        max-width: 400px;
        padding: 5px;
        z-index: 1;
        color: #fff;
    }
    </style>
</head>
<body>
    <div id="echartsShow"></div>
    <div id="content" class="contentval hide"></div>
</body>
<script>
$.postJson("<%=path%>"+"/xxx",msg,function(data){
        console.log("方法一：")
        console.log(data.data);
        var yData=data.data.ydata;
        var xData=data.data.xdata;
        var echartsData=xData;

        function configOption(array){
            var data=[];
            for(var i=0;i<array.length;i++){
                data.push({
                    name:array[i].name,
                    type:'bar',
                    data:array[i].data
                });
            }
            var series={
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top:'bottom',
                    data:['API','WEB']
                },
                grid: [{
                    left: '18%',
                    bottom: '10%',
                    top: '10%',
                    right: '10%'
                }],
                yAxis: {
                    type: 'category',
                    data: yData,
                    axisLabel: {//关键代码
                        show:true,
                        interval: 0, //强制所有标签显示
                        formatter: function (params){   //文字超出用...代替
                            console.log("params")
                            console.log(params)
                            if( params.length > 12)
                                return params.substring(0,12) + '...';
                            else
                                return params;
                        }
                    },
                    triggerEvent: true
                },
                xAxis: {
                    type: 'value'
                },
                series: data
            };
            return series;
        }
        var myChart = echarts.init(document.getElementById('echartsShow'));
        myChart.setOption(configOption(echartsData));
/**
* @title 鼠标经过显示剩余内容
*/
        myChart.on('mouseover', function (params) {  
            console.log("第一个图表");
            console.log(params);
            if( params.componentType == 'yAxis' ){
                var content = $('#content');
                content.html(params.value);
              content.css('left', params.event.event.layerX+10);
              content.css('top', params.event.event.layerY+20);
              content.show();
            }
        });
        /**
        * @title 鼠标移出隐藏用 ... 代替
        */
        myChart.on('mouseout', function (params) {
            $('#content').hide();
        })
    })
</script>
</html>