Echarts X軸內容過長自動隱藏,鼠標移動上去顯示所有名稱方法

最近公司作項目,使用echarts作開發,碰到一些數據的名稱很長致使圖例展現的效果不是很好,本身寫了一個方法,當X軸內容過長時自動隱藏,鼠標移動上去顯示所有名稱

樣例:

 

圖二是鼠標移動到名稱顯示的,怎麼帶着鼠標一塊兒截圖博主不是很清楚,不要在乎這些細節好了.

 

這裏來講一下博主的實現方式

 

1. 設定mychart.on('mouseover',functionx) ,mychart的鼠標懸浮事件,當鼠標移動到x軸的名稱時觸發這個事件.這裏須要把x軸設置爲

triggerEvent: true,切記.

 

2. 聲明一個不顯示的div框,這個框是用在鼠標移到類目上,顯示展開的所有的名稱的.

 

3. 得到鼠標的位置,把這個位置賦給div框

 

4.添加mychart.on('mouseout',functiony) 鼠標移除事件.

 

5. 當類目名稱長度大於5的時候 博主就把他substring了  再拼接上"..".

 

下面是源碼:

 1 var myChart = echarts.init(document.getElementById('main'));  2 
 3  option = {  4  xAxis: {  5  triggerEvent: true,  6  type: 'category',  7  data: ['這是名稱很是長的商品1', '這是名稱比商品1還長不少的商品2', '這一樣是名稱很長的商品3', '短的商品4'],  8  axisLabel: {  9  formatter: function(value) { 10  var res = value; 11  if(res.length > 5) { 12  res = res.substring(0, 4) + ".."; 13  } 14  return res; 15  } 16  } 17  }, 18  yAxis: { 19  type: 'value' 20  }, 21  series: [{ 22  data: [120, 200, 150, 80], 23  type: 'bar' 24  }] 25  } 26 
27  myChart.setOption(option); 28                     
29  extension(myChart); 30                     
31  function extension(mychart) { 32 　　　　　　　　　　　　　　//判斷是否建立過div框,若是建立過就再也不建立了
33  var id = document.getElementById("extension"); 34  if(!id) { 35                             var div = "<div id = 'extension' sytle=\"display:none\"></div>" 36  $('html').append(div); 37  } 38 
39  mychart.on('mouseover', function(params) { 40  if(params.componentType == "xAxis") { 41  $('#extension').css({ 42  "position": "absolute", 43  "color": "black", 44  //"border":"solid 2px white", 45  "font-family": "Arial", 46  "font-size": "20px", 47  "padding": "5px", 48  "display": "inline" 49  }).text(params.value); 50 
51  $("html").mousemove(function(event) { 52  var xx = event.pageX - 30; 53  var yy = event.pageY + 20; 54  $('#extension').css('top', yy).css('left', xx); 55  }); 56  } 57  }); 58 
59  mychart.on('mouseout', function(params) { 60  if(params.componentType == "xAxis") { 61  $('#extension').css('display', 'none'); 62  } 63  }); 64 
65                     };

 

 想上傳源碼的..沒找到.

 

總之使用三步驟

 

1. x軸上添加 triggerEvent: true

2.加入這段代碼隱藏過長的文字,長度能夠本身定義

  axisLabel: {
                              formatter: function(value) {
                                 var res = value;
                                 if(res.length > 5) {
                                     res = res.substring(0, 4) + "..";
                                 }
                                 return res;
                             }
                         }
                     }3. 調用 extension('這裏傳入你的容器');就可使用了