echarts中，橫軸資料如果非常多，會自動隱藏一部分資料，我們可以通過屬性interval來進行調整。

如下圖，當橫軸時間為13天時，echarts會自動隔天顯示

如果我們想顯示全，則需要在xAxis 屬性加上axisLabel:{interval: 0}

"xAxis":[{"data":["2015-5-13","2015-5-14","2015-5-15","2015-5-16","2015-5-17","2015-5-18","2015-5-19","2015-5-20","2015-5-21","2015-5-22","2015-5-23","2015-5-24","2015-5-25"],"type":"category","axisLabel":{
 interval: 0
 }
}],

效果如下：

檢視echarts官網的文件，可以得知：

補充知識：Echarts X軸內容過長自動隱藏，滑鼠移動上去顯示全部

使用echarts圖表做頁面展示的時候，當X軸內容過長時，之前一直用的 '\n' 換行(將字串根據需要分成兩行來展示)，這樣有很大的侷限性（如內容過長的話 分成兩行也放不下，而且也會影響美觀），後來發現可以通過設定自動隱藏,滑鼠移動上去顯示全部名稱的方法 來做，效果會更好。

1. 首先在 x軸上新增 triggerEvent: true。如下紅色部分：

xAxis: {
data: result.nameList,
silent: false,
triggerEvent: true,

2. 自定義x軸上顯示的內容長度。如上面程式碼段中的藍色部分。

3. 自定義一個 滑鼠懸浮事件方法，並呼叫。

function extensionOne(myChart) {
 var id = document.getElementById("extensionOne");
 //判斷是否建立過div框,如果沒有建立過，則建立。（建立時，預設隱藏）
 if (!id) {
  var div = "<div id = 'extensionOne' sytle=\"display:none\"></div>";
  $('html').append(div);
 }

 var arrow_left = '20px';
 //滑鼠懸浮事件
 myChart.on('mouseover',function (params) {
  if (params.componentType != "xAxis") {
   return;
  }

  //設定div框樣式，併為其填充值。
  $('#extensionOne').css({
   "position": "absolute","color": "#90979c",// "border": "solid 0px white","font-family": "Arial","font-size": "14px","padding": "5px","display": "inline"
  }).text(params.value);
  var xx_text = params.event.offsetX - 35;
  arrow_left = xx_text;

  $("#talentDemandDistribution").mousemove(function (event) {
   // console.log("X軸座標：" + event.pageX + " Y軸座標：" + event.pageY);
   var xx = event.pageX - 30;
   var yy = event.pageY + 10;
   $('#extensionOne').css('top',yy).css('left',xx);
  });
 });

 myChart.on('mouseout',function (params) {
  $('#extensionOne').css('display','none');
 });
}
{
 ...
 ...
 var chart = echarts.init(document.getElementById('talentDemandDistribution'));
 chart.setOption(option);

 //在echarts 初始化完成後，呼叫自定義的滑鼠懸浮事件方法
 extensionOne(chart);
}

到此結束！

以上這篇解決echarts中橫座標值顯示不全(自動隱藏)問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。