欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

echarts X軸顯示不全的處理方法(顯示完全以及換行)

 更新時間：2024年01月15日 09:50:32   作者：有蟬  
我們在echarts表中經(jīng)常會出現(xiàn)X軸的信息顯示不完全的情況,所以本文小編給大家介紹了echarts X軸顯示不全的處理方法,文中通過代碼示例給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下

echarts  X軸顯示不全   如下圖

如何處理

首先，設(shè)置 interval: 0，如下

    xAxis: {
          type: "category",         
          axisLabel: {
            //x軸文字的配置
            show: true,
            interval: 0,//使x軸文字顯示全
           }
    }

效果圖如下：明顯重疊

解決：使用formatter 換行顯示，處理如下

axisLabel: {
            //x軸文字的配置
            show: true,
            interval: 0,//使x軸文字顯示全
            textStyle: {
              color: "rgba(219, 225, 255, 1)"
            },
            formatter: function(params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 3; //一行顯示幾個字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            }
          }
        },

 效果如下圖

以上就是echarts X軸顯示不全的處理方法(顯示完全以及換行)的詳細內(nèi)容，更多關(guān)于echarts X軸顯示不全的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論