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

首先，需要在uniapp项目中引入echarts库，可以在`main.js`中引入：

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

然后，在需要使用横向柱状图的页面中，可以在`<template>`标签中添加一个`<canvas>`标签用于绘制图表：

<template>
  <view>
    <canvas class="echarts" style="width: 100%; height: 300rpx;"></canvas>
  </view>
</template>

接下来，在`<script>`标签中，使用`this.$echarts.init`方法初始化echarts实例，并使用`this.$echarts.setOption`方法设置图表的数据和样式：

<script>
export default {
  data() {
    return {
      chartData: [
        { name: '项目1', value: 300 },
        { name: '项目2', value: 600 },
        { name: '项目3', value: 900 },
        { name: '项目4', value: 1200 },
      ],
    };
  },
  mounted() {
    const chart = this.$echarts.init(this.$refs.echartsCanvas);
    chart.setOption({
      xAxis: {
        type: 'value',
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
      },
      yAxis: {
        type: 'category',
        data: this.chartData.map(item => item.name),
        axisLine: { show: false },
        axisTick: { show: false },
      },
      series: [
        {
          type: 'bar',
          barWidth: 20,
          itemStyle: {
            normal: {
              color: '#1890ff',
            },
          },
          label: {
            show: true,
            position: 'right',
            formatter: '{c}',
          },
          data: this.chartData.map(item => item.value),
        },
      ],
    });
  },
};
</script>

其中，`chartData`是柱状图的数据，`xAxis`表示x轴的样式和配置，`yAxis`表示y轴的样式和配置，`series`表示柱状图的配置和数据。

最后，在`<style>`标签中设置`canvas`元素的样式：

<style>
.echarts {
  width: 100%;
  height: 300rpx;
}
</style>

这样就可以在uniapp微信小程序中使用echarts绘制横向柱状图了。