uni-app 横向柱状图插件需求

在uni-app中实现横向柱状图的功能，你可以使用ECharts插件，这是一个功能强大的开源可视化图表库，支持多种图表类型，并且易于集成到uni-app项目中。以下是一个简单的示例，展示如何在uni-app中集成并使用ECharts来绘制横向柱状图。

步骤1：安装ECharts插件

首先，你需要在uni-app项目中安装ECharts插件。你可以通过npm或者yarn来安装：

npm install echarts --save
# 或者
yarn add echarts

步骤2：创建页面并引入ECharts

在你的uni-app项目中创建一个新的页面，比如BarChart.vue，并在页面中引入ECharts。

<template>
  <view class="container">
    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
  </view>
</template>

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

export default {
  data() {
    return {
      ec: {
        lazyLoad: true // 延迟加载
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('#mychart-dom-bar').boundingClientRect(data => {
          const canvas = uni.createCanvasContext('mychart-bar');
          const chart = echarts.init(canvas, null, {
            width: data.width,
            height: data.height
          });
          canvas.setFillStyle('white');
          canvas.fillRect(0, 0, data.width, data.height);
          chart.setOption({
            title: {
              text: '横向柱状图示例'
            },
            tooltip: {},
            xAxis: {
              type: 'value'
            },
            yAxis: {
              type: 'category',
              data: ['A', 'B', 'C', 'D', 'E']
            },
            series: [{
              data: [120, 200, 150, 80, 70],
              type: 'bar'
            }]
          });
          this.chart = chart;
        }).exec();
      });
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 500px;
}
</style>

说明

1. 模板部分：使用<ec-canvas>组件来承载ECharts图表。
2. 脚本部分：在mounted生命周期钩子中初始化图表，使用uni.createSelectorQuery来获取组件的尺寸，并使用ECharts的init方法初始化图表。
3. 样式部分：为容器设置宽度和高度，确保图表能够正确显示。

这个示例展示了如何在uni-app中使用ECharts绘制一个简单的横向柱状图。你可以根据需要调整图表的配置项来实现更复杂的功能。