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

首先，你需要在uniapp项目中安装echarts插件。可以通过以下命令进行安装：

npm install echarts --save

安装完成之后，在需要使用echarts的页面或组件中引入echarts：

import * as echarts from 'echarts';

接着，你可以在页面或组件中使用echarts绘制横向柱状图。以下是一个简单的示例：

<template>
  <view>
    <ec-canvas id="mychart" canvas-id="mychart"></ec-canvas>
  </view>
</template>

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

  export default {
    onReady() {
      // 在页面或组件的onReady方法中绘制图表
      this.drawChart();
    },

    methods: {
      drawChart() {
        const chart = echarts.init(this.$refs.mychart.canvas, null, {
          width: uni.upx2px(375),
          height: uni.upx2px(200)
        });

        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [120, 200, 150, 80, 70, 110, 130]
            }
          ]
        };

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

在这个示例中，我们使用了uniapp自带的ec-canvas组件来绘制echarts图表。通过this.$refs.mychart.canvas获取到canvas元素，然后使用echarts.init方法初始化图表。接着，我们可以通过option来配置图表的样式和数据。最后，使用chart.setOption方法将配置应用到图表中。