请教下 echarts 柱状图 数据 与 x轴对不齐

img

getStatisFactionChart(val) {
  const xlChart = this.$echarts.init(document.getElementById('statisChart'))
  xlChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    toolbox: {
      feature: {
        dataView: {
          show: false,
          readOnly: false
        },
        magicType: {
          show: false,
          type: ['line', 'bar']
        },
        restore: {
          show: false
        },
        saveAsImage: {
          show: false
        }
      }
    },
    legend: {
      data: val.legend,
      textStyle: {
        color: '#FFFFFF'
      }
    },
    xAxis: [{
      type: 'category',
      data: val.xAxis,
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        textStyle: {
          color: '#FFFFFF'
        }
      }
    }],
    yAxis: [{
        type: 'value',
        name: '满意度',
        axisLabel: {
          formatter: '{value} %',
          textStyle: {
            color: '#FFFFFF'
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#FFFFFF'
          }
        }
      }
    ],
    series: val.series
  })
}

xAxis 不是数组吧是对象 。你去官网随便找一个,柱状图,减少 series减少到两个依然可以对齐https://echarts.apache.org/examples/zh/editor.html?c=bar-simple

{
      type: 'category',
      data: val.xAxis,
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        textStyle: {
          color: '#FFFFFF'
        }
      }
    }

这是val 传过来的数据

img