快捷導(dǎo)航

Echarts中X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問題解決

更新時間：2023年09月07日 15:30:23 作者：輝常努膩

本文主要介紹了Echarts中X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

解決Echarts X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問題【很長的情況】

     xAxis:[
          {
              //目錄軸
          type:"category",
          //數(shù)據(jù)
          data: data.map(i=>i.location+" -- "+i.city_name),
          //軸標(biāo)簽
          axisLabel:{
          //格式化
              formatter: function (params) {
                  var val = "";
                  //判斷長度
                  if (params.length > 4) {
                  //替換原字符
                      val = params.substr(0, 4) + '...';
                      //返回
                      return val;
                  } else {
                  //否則返回原string
                      return params;
                  }
               }
          }
      }
      ],

當(dāng)然這樣還不夠

我們可以懸浮顯示X坐標(biāo)軸名字

    tooltip: {
       trigger: 'axis', //'item'  數(shù)據(jù)項圖形觸發(fā)，主要在散點圖，餅圖等無類目軸的圖表中使用。  'axis'  坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。 在 ECharts 2.x 中只支持類目軸上使用 axis trigger，在 ECharts 3 中支持在直角坐標(biāo)系和極坐標(biāo)系上的所有類型的軸。并且可以通過 axisPointer.axis 指定坐標(biāo)軸。
       axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效 
           type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
       }
   },

看效果圖

解決Echarts X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問題【不是很長的情況】

    xAxis: {
     type: 'category',
      name: "公司名",
      data: myData.map(elem => elem.name),
      axisLabel: {
          interval: 0,    
          rotate: 30     //可以通過旋轉(zhuǎn)解決標(biāo)簽顯示不下的問題
      }
    }

這里產(chǎn)生了另一個問題，你會發(fā)現(xiàn)自己圖表太大了，需要將圖表向上移動

首先通過width height 設(shè)置圖表的寬高我們這里將所有的圖表題添加一個class

.box{
    width: 1000px;
    height: 500px;
}

然后將圖表移動一下

grid: {
  left: "15%",
  bottom:'38%'
}

看效果圖

到此這篇關(guān)于Echarts中X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問題解決的文章就介紹到這了,更多相關(guān)Echarts 坐標(biāo)標(biāo)簽顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: