echarts图表x轴文字过多分行倾斜展示（vue）

1.写一个有宽高的盒子（main）

2.在js模块的methods方法里写一个方法（getZXT()）

export default {
  data() {
    return {};
  },
  methods: {
    getZXT() {
      var myChart = this.$echarts.init(document.getElementById("main"));
      // var KSMC = [100, 82, 80, 70, 65, 66, 60, 54, 50, 42];
      var option = {
        xAxis: [
          {
            type: 'category',
            axisTick: {
              // 去除坐标轴上的刻度线
              //alignWithLabel: true
              show: false
            },
            axisLine: {
              // x轴的颜色和宽度
              show: false,
              lineStyle: {
                color: 'red' // x坐标轴的轴线颜色
                //width:3    //这里是坐标轴的宽度,可以去掉
              }
            },
            axisLabel: {
              // x轴的字体样式
              show: true, //这行代码控制着坐标轴x轴的文字是否显示
              textStyle: {
                //color: '#fff',   //x轴上的字体颜色
                fontSize: "1vw"// x轴字体大小
              },
              interval: 0, //文字显示不全并将文字倾斜
              rotate: 45, //倾斜的角度
              formatter: function (value) {
                //debugger
                var ret = ''; //拼接加\n返回的类目项
                var maxLength = 7; //每项显示文字个数
                var valLength = value.length; //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = ''; //每次截取的字符串
                    var start = i * maxLength; //开始截取的位置
                    var end = start + maxLength; //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + '\n';
                    ret += temp; //凭借最终的字符串
                  }
                  return ret;
                } else {
                  return value;
                }
              }
            },
            data: [
              
              '双重预防机制示范建设成果宣贯培训',
              '安监系统干部综合素质提升专项培训',
              '举办集团公司2018年特种设备安全管理专题培训',
              '安全生产风险预控管理体系（双控机制）建设培训',
              '班组长安全生产专项培训'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value',
            //minInterval:1,//最小数为1，避免刻度出现小数情况
            axisTick: {
              // 去除坐标轴上的刻度线
              //alignWithLabel: true
              show: false
            },
            splitLine: {
              // 控制网格线是否显示
              //show: false,   // 网格线是否显示
              lineStyle: {
                //  改变样式
                width: '0.2',
                color: '#507b7d' // 修改网格线颜色
              }
            },
            axisLine: {
              // y轴的颜色和宽度
              show: false,
              lineStyle: {
                color: "red" // y坐标轴的轴线颜色
              }
            },
            axisLabel: {
              // y轴的字体样式
              show: true, //这行代码控制着坐标轴y轴的文字是否显示
              textStyle: {
                //color: '#fff',   //y轴上的字体颜色
                fontSize: '0.5vw' // y轴字体大小
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '28%',
            data: [10, 52, 200, 334, 390]
          }
        ]
      };
      myChart.setOption(option)
      
    },
  },
  mounted() {
    this.getZXT();
  },
};

3.在mounted()里面挂载