uni-app x统计图插件

在uni-app中实现统计图功能，通常可以使用一些基于Canvas的图表库，比如ECharts、F2等。下面我将以ECharts为例，展示如何在uni-app中集成并使用ECharts绘制统计图。

步骤一：安装ECharts

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

npm install echarts --save

步骤二：创建图表组件

在components目录下创建一个名为MyChart.vue的组件，用于封装ECharts图表。

<template>
  <view class="container">
    <canvas canvas-id="mychart-dom-bar" style="width: 100%; height: 400px;"></canvas>
  </view>
</template>

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

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = uni.createSelectorQuery().select('#mychart-dom-bar').node();
      chartDom.exec((res) => {
        const canvas = res[0].node;
        const chart = echarts.init(canvas, null, {
          width: res[0].width,
          height: res[0].height
        });
        const option = {
          // ECharts配置项
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        };
        chart.setOption(option);
      }).exec();
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

步骤三：使用图表组件

在需要使用图表的页面中引入并使用MyChart组件。

<template>
  <view>
    <MyChart />
  </view>
</template>

<script>
import MyChart from '@/components/MyChart.vue';

export default {
  components: {
    MyChart
  }
};
</script>

注意事项

1. Canvas ID：确保每个canvas的ID唯一，避免重复。
2. 响应式：如果需要响应式图表，可以在窗口大小变化时重新初始化图表。
3. 样式调整：根据需求调整canvas的样式，比如宽度和高度。

通过以上步骤，你应该能够在uni-app中成功集成ECharts并绘制基本的统计图。如果需要更多复杂的图表类型或配置，可以参考ECharts的官方文档。