uniapp 小程序 使用echarts 绘制横向柱状图

要在 Uniapp 小程序中使用 Echarts 绘制横向柱状图，需要进行以下步骤：

1. 首先在 Uniapp 项目中引入 Echarts 库，可以通过以下命令进行安装：

npm install echarts --save

2. 在需要绘制横向柱状图的页面中引入 Echarts 库：

<template>
  <view class="echarts-container">
    <ec-canvas id="mychart" canvas-id="mychart" :ec="ec"></ec-canvas>
  </view>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      ec: {
        lazyLoad: true
      }
    }
  },
  onLoad() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.ecComponent = this.selectComponent('#mychart');
      this.ecComponent.init((canvas, width, height) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        this.setOption(chart);
        return chart;
      });
    },
    setOption(chart) {
      const option = {
        xAxis: {
          type: 'value',
          position: 'top',
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false }
        },
        yAxis: {
          type: 'category',
          axisLine: { show: false },
          axisTick: { show: false },
          data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
        },
        series: [
          {
            type: 'bar',
            barWidth: 16,
            itemStyle: {
              normal: {
                color: '#1890ff'
              }
            },
            label: {
              show: true,
              position: 'right',
              color: '#666'
            },
            data: [180, 200, 220, 240, 260, 280, 300]
          }
        ]
      };
      chart.setOption(option);
    }
  }
}
</script>

3. 在页面的样式文件中设置 Echarts 图表容器的样式：

.echarts-container {
  width: 100%;
  height: 300rpx;
}

4. 最后，运行 Uniapp 小程序，即可看到绘制出的横向柱状图。