【echarts】柱狀圖X軸底部文字顯示不全的解決方案

                                       柱狀圖X軸底部文字顯示不全的解決方案

  在使用echarts圖表架構開發的過程中，遇到這樣的一個問題，當柱狀圖底部X軸文字過多時，将會出現文字顯示不全的問題。

  解決方案，在添加以下代碼

var option = {
//.....其他屬性             

  grid: { // 控制圖的大小，調整下面這些值就可以，
    x: 100,//控制x軸文字與底部的距離
         y2: 200 // y2可以控制傾斜的文字獄最右邊的距離，放置傾斜的文字超過顯示區域
    },
  xAxis: [{
      type: 'category',
      //data: ['2015-2016', '2016-2017', '2017-2018', '2018-2019']
      axisLabel: {
            interval: 0,    //強制文字産生間隔
              rotate: 45,     //文字逆時針旋轉45°
            textStyle: {    //文字樣式
                        color: "black",
                        fontSize: 16,
                        fontFamily: 'Microsoft YaHei'
                        }
             }

      }]


}//option結束