uni-app 需要一个统计图插件

itying888 1楼

更多关于uni-app 需要一个统计图插件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在 uni-app 中集成统计图插件，你可以选择使用 ECharts，这是一个非常流行的开源可视化图表库，支持多种图表类型，如折线图、柱状图、饼图等。下面是一个如何在 uni-app 中集成并使用 ECharts 的示例代码。

1. 安装 ECharts

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

npm install echarts --save

2. 创建图表组件

在 components 目录下创建一个名为 MyChart.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: {
        onInit: this.initChart
      }
    };
  },
  methods: {
    initChart(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);

      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };

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

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

3. 在页面中使用图表组件

在你的页面（如 pages/index/index.vue）中引入并使用 MyChart 组件：

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

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

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

4. 配置 `pages.json`

确保在 pages.json 中正确配置了页面路径。

5. 运行项目

最后，运行你的 uni-app 项目，你应该能在页面中看到一个简单的柱状图。