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'
          }
        }
      ],

这样就能正常显示了！