vue实现echarts横向电池图并把y轴放在最上面x轴放左边

您好，要实现横向电池图并把y轴放在最上面x轴放左边，您可以参考以下代码：

<template>
  <div class="echarts-battery"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.querySelector('.echarts-battery'))

      const option = {
        xAxis: {
          type: 'value',
          position: 'top',
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ['电池1', '电池2', '电池3', '电池4'],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            type: 'bar',
            data: [75, 60, 45, 30],
            barWidth: 20,
            itemStyle: {
              color: '#409EFF'
            }
          }
        ]
      }

      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.echarts-battery {
  height: 300px;
}
</style>

其中，x轴的 `position: 'top'` 可以将x轴放在最上面，y轴的 `type: 'category'` 可以将y轴的数据类型设置为类别型，`axisLine: {show: false}` 和 `axisTick: {show: false}` 可以将y轴的轴线和刻度隐藏。另外，电池图的实现可以使用 echarts 的柱状图，通过设置 `barWidth` 来调整电池的宽度。