【ECharts】x轴名字过长不显示或者重叠显示

显示不全

如图所示尽管每一格的宽度很宽了，但是数据名称过长就导致x轴的名称显示不全。

重叠

那我们设置全部显示之后看下效果：
设置x轴名称全部显示通过添加 interval: 0,// 使x轴文字显示全

  xAxis: {
    type: 'category',
    data: ['这是一条测试数据1', '这是一条测试数据2', '这是一条测试数据3', '这是一条测试数据4', '这是一条测试数据5', '这是一条测试数据6', '这是一条测试数据7','这是一条测试数据8','这是一条测试数据9'],
    axisLabel: {
      // x轴文字的配置
      show: true,
      interval: 0,// 使x轴文字显示全
    }
  },

全部显示之后又出现了名称重叠，可以通过设置x轴名称旋转进行展示，效果如下所示
主要代码：rotate: 35

  xAxis: {
    type: 'category',
    data: ['这是一条测试数据1', '这是一条测试数据2', '这是一条测试数据3', '这是一条测试数据4', '这是一条测试数据5', '这是一条测试数据6', '这是一条测试数据7','这是一条测试数据8','这是一条测试数据9'],
    axisLabel: {
      // x轴文字的配置
      show: true,
      interval: 0,// 使x轴文字显示全
      rotate: 35
    }
  },

全部代码如下所示：

option = {
  title: {
    text: '用水量统计',
    textStyle: {
      fontSize: 16,
      color: '#333',
      family: 'PingFang SC',
      fontWeight: 500
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  toolbox: {
    show: true,
    itemSize: 20,
    itemGap: 30,
    right: 50,
    feature: {
      saveAsImage: {
        title: '下载',
        show: true,
        pixelRatio: 2
      }
    }
  },
  calculable: true,
  grid: {
    left: '2%',
    right: '2%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['这是一条测试数据1', '这是一条测试数据2', '这是一条测试数据3', '这是一条测试数据4', '这是一条测试数据5', '这是一条测试数据6', '这是一条测试数据7','这是一条测试数据8','这是一条测试数据9'],
    axisLabel: {
      // x轴文字的配置
      show: true,
      interval: 0,// 使x轴文字显示全
      rotate: 35
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130,90,210],
      type: 'bar',
      // 设置柱状图宽度
      barWidth: '13',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#78db6a' },
          { offset: 0.5, color: '#18bb94' },
          { offset: 1, color: '#18bb94' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#78db6a' },
            { offset: 0.7, color: '#78db6a' },
            { offset: 1, color: '#18bb94' }
          ])
        }
      }
    }
  ]
};