uniapp 统计图

### 实现 UniApp 统计图表功能

#### 使用 uCharts 图表组件

uCharts 是一款专为 uni-app 设计的高性能跨平台图表组件，适用于 H5 和 APP 开发[^1]。该组件提供了丰富的图表类型，如柱状图、折线图、饼图等，并且易于集成到 uni-app 项目中。

为了在一个页面上显示多个 uCharts 图表，在创建每个图表实例时需确保其 `canvasId` 属性唯一[^2]。以下是配置多图表的具体方法：

// pages/multiChartPage/multiChartPage.js
import uCharts from '@/components/u-charts/u-charts.js';

export default {
	data() {
		return {
			canvasObj: {}
		};
	},
	methods: {
		initCharts(canvasId, chartData) {
			this.canvasObj[canvasId] = new uCharts({
				$this: this,
				canvasId: canvasId,
				type: 'line', // 可替换为你想要使用的其他类型的图表
				fontSize: 11,
				legend: {},
				background: '#FFFFFF',
				pixelRatio: 1,
				categories: ['Mon', 'Tue', 'Wed'],
				series: [
					{
						name: "Series A",
						data: [35, 80, 45],
					}
				],
				animation: true,
				width: 750 * (window.screen.width / 375),
				height: 500,
				extra: {
					lineStyle: 'straight'
				}
			});
		}
	},
	onReady() {
		const lineChartData = { /* ... */ };
		const barChartData = { /* ... */ };

		this.initCharts('chart-line-id', lineChartData);
		this.initCharts('chart-bar-id', barChartData);		
	}
}

对于希望尝试更多高级特性的开发者来说，还可以考虑 Highcharts 这样的第三方 JavaScript 库来增强应用中的数据可视化能力[^4]。不过需要注意的是，Highcharts 并不是专门为 uni-app 打造的产品，因此可能需要额外的工作来进行适配。