Angular：echarts橫座標豎直顯示或傾斜展示

今天在使用echarts製作直方圖的時候，由於橫座標上xAxis.data太多，導致顯示的時候會自動不顯示一些項目，這樣可能不是我們想要的效果，那要怎麼才能讓橫座標data豎直顯示或者傾斜一定角度顯示呢？

首先，貼上修改前的直方圖的option的xAxis部分：

xAxis: [
        {
          type: 'category',
          data: ['計劃執行數量', '審批表數量', '詢價數量', '審定表數量', '合同數量', '結算數 
                  量'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],

可以看出來，當展示空間不夠的時候，橫軸上有的項目名稱被隱藏了，我們可以將它傾斜一定角度展示，這樣就能正常展示所有項目了：

xAxis: [
        {
          type: 'category',
          axisLabel: {
            interval: 0,
            margin: 20,
            formatter: function (value) {
              const str = value.split('');
              return str.join('\n');
            }
          },
          data: ['計劃執行數量', '審批表數量', '詢價數量', '審定表數量', '合同數量', '結算數 
                  量'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],

這樣，項目名稱變得豎直顯示了：

還有個問題，由於空間還是不夠，所以有的項目名稱會顯示不全，我們試圖將它傾斜一定角度顯示：

xAxis: [
        {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: -60,
            margin: 20,
            formatter: function (value) {
              const str = value.split('');
              return str.join('\n');
            }
          },
          data: ['計劃執行數量', '審批表數量', '詢價數量', '審定表數量', '合同數量', '結算數 
                  量'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],

這樣就能正常顯示了！