vue实现echarts横向柱状图

好的，以下是实现横向柱状图的Vue代码，假设已经安装好了echarts：

<template>
  <div id="chart" style="height: 400px;"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    const chartDom = document.getElementById('chart');
    const myChart = echarts.init(chartDom);
    const option = {
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
      },
      series: [
        {
          type: 'bar',
          data: [10, 20, 30, 40, 50],
          barWidth: 20,
          label: {
            show: true,
            position: 'right',
            formatter: '{c}%'
          },
          itemStyle: {
            color: '#00bfff'
          }
        }
      ]
    };
    myChart.setOption(option);
  }
}
</script>

这段代码实现了一个横向柱状图，其中x轴表示数值，y轴表示类别，数据为一个数组，每个数组元素对应一个柱子，barWidth表示柱子宽度，label表示柱子上的文字标签，itemStyle表示柱子的样式。