Echarts 标签中文本内容太长的时候怎么办 ?
看如下两块有分别说明：
具体代码如下：
<!--引入js文件--><script src="${ctx}/tiles/echarts/mon.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轴的话，需要改为xAxisif(ponentType == "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轴的话，需要改为xAxisif(ponentType == "yAxis") {$('#extension').css('display', 'none');}}); }
