ECHARTS 标签中文本内容太长的时候怎么办 ?

看如下两块有分别说明：

具体代码如下：

<!--引入js文件-->
<script src="${ctx}/tiles/echarts/echarts.common.min.js"></script>
 
//echarts容器
<!--html代码-->
<div id="charts2" style="width: 99%; height: 390px; margin: 3px auto;"></div>
 
<!--script代码：绘制echarts，本例以堆叠柱状图为例，Y轴name过长，对其进行处理-->
 
        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 : 'value'
                    },
                    yAxis : {
                        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', '短的商品4']
                    },
                    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]
                    }]
 
        };
				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) {
            //注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
            if(params.componentType == "yAxis") {
                //设置悬浮文本的位置以及样式
            	$('#extension').css({
	            	"position": "absolute",
	                "color": "black",
					"background":"white",
	                "font-family": "Arial",
	                "font-size": "12px",
	                "padding": "5px",
	                "display": "inline"
	             }).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) {
            //注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
         	if(params.componentType == "yAxis") {
            	$('#extension').css('display', 'none');
            }
         });                
	}     

效果如图：

版权声明：本文为qq_35030421原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_35030421/article/details/103344475

转载于：https://www.freesion.com/article/4178424216/