快捷導(dǎo)航

解決echarts中橫坐標(biāo)值顯示不全(自動(dòng)隱藏)問(wèn)題

更新時(shí)間：2020年07月20日 11:39:10 作者：趕路人兒

這篇文章主要介紹了解決echarts中橫坐標(biāo)值顯示不全(自動(dòng)隱藏)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

echarts中，橫軸數(shù)據(jù)如果非常多，會(huì)自動(dòng)隱藏一部分?jǐn)?shù)據(jù)，我們可以通過(guò)屬性interval來(lái)進(jìn)行調(diào)整。

如下圖，當(dāng)橫軸時(shí)間為13天時(shí)，echarts會(huì)自動(dòng)隔天顯示

如果我們想顯示全，則需要在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官網(wǎng)的文檔，可以得知：

補(bǔ)充知識(shí)：Echarts X軸內(nèi)容過(guò)長(zhǎng)自動(dòng)隱藏，鼠標(biāo)移動(dòng)上去顯示全部

使用echarts圖表做頁(yè)面展示的時(shí)候，當(dāng)X軸內(nèi)容過(guò)長(zhǎng)時(shí)，之前一直用的 '\n' 換行(將字符串根據(jù)需要分成兩行來(lái)展示)，這樣有很大的局限性（如內(nèi)容過(guò)長(zhǎng)的話(huà) 分成兩行也放不下，而且也會(huì)影響美觀(guān)），后來(lái)發(fā)現(xiàn)可以通過(guò)設(shè)置自動(dòng)隱藏,鼠標(biāo)移動(dòng)上去顯示全部名稱(chēng)的方法來(lái)做，效果會(huì)更好。

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

xAxis: {
data: result.nameList,
silent: false,
triggerEvent: true,
axisLine: {
onZero: true,
show: true,
lineStyle: {
color: '#90979c' // x 軸線(xiàn)最下面的橫坐標(biāo)線(xiàn)的顏色
}
},
splitLine: {show: false},
splitArea: {show: false},
axisLabel: {
interval: 0,//設(shè)置橫坐標(biāo)為斜
rotate: 30,//文字傾斜角度
formatter: function (value) {
if (value.length > 10) {
value = value.substring(0, 9) + "..";
}
return value;
},
textStyle: {
color: '#666',
fontSize: '12'
}
},
},

2. 自定義x軸上顯示的內(nèi)容長(zhǎng)度。如上面代碼段中的藍(lán)色部分。

3. 自定義一個(gè) 鼠標(biāo)懸浮事件方法，并調(diào)用。

function extensionOne(myChart) {
 var id = document.getElementById("extensionOne");
 //判斷是否創(chuàng)建過(guò)div框,如果沒(méi)有創(chuàng)建過(guò)，則創(chuàng)建。（創(chuàng)建時(shí)，默認(rèn)隱藏）
 if (!id) {
  var div = "<div id = 'extensionOne' sytle=\"display:none\"></div>";
  $('html').append(div);
 }

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

  //設(shè)置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軸坐標(biāo)：" + event.pageX + " Y軸坐標(biāo)：" + 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 初始化完成后，調(diào)用自定義的鼠標(biāo)懸浮事件方法
 extensionOne(chart);
}

到此結(jié)束！

以上這篇解決echarts中橫坐標(biāo)值顯示不全(自動(dòng)隱藏)問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: