uniapp 微信小程序 使用ucharts

前言

本文介绍一个基于 Vue 框架的小程序图表组件开发方案。该组件通过 uCharts 库实现折线图的绘制，并支持滚动、缩放、触摸提示等交互功能。文章将从代码结构、核心方法、交互实现和样式设计等方面进行详细解析。

一、组件功能概述

该组件实现了以下核心功能：

1. 动态折线图绘制
2. 图表滚动交互
3. 双指缩放功能
4. 数据点提示框
5. 响应式布局适配

二、代码结构分析

2.1 模板结构

<template><canvascanvas-id="chart"id="chart"@touchstart="touchstart"@touchmove="touchmove"class="charts"@touchend="touchend"/>
</template><script>
import uCharts from '@/js_sdk/u-charts.js'var uChartsInstance = {}export default {data() {return {cWidth: 750,cHeight: 900,options: {}}},onReady() {this.cWidth = uni.upx2px(750)this.cHeight = uni.upx2px(900)},methods: {generateData(data) {if (!data) {console.error('数据未提供，请传入有效的数据对象。');return;}this.drawCharts('chart', data);},drawCharts(id, data) {try {const min = this.getMin(data.series);const ctx = uni.createCanvasContext(id, this);const chartOptions = {type: 'line',context: ctx,width: this.cWidth,height: this.cHeight,categories: data.categories,series: data.series,animation: true,touchMoveLimit: 24,background: '#FFFFFF',enableScroll: true,scrollPosition: 'current',padding: [15, 15, 0, 5],legend: {},dataLabel: false,xAxis: {disableGrid: true,scrollShow: true,itemCount: 4,labelCount: 2,formatter: (value) => {const [a, b] = value.split(' ');return b.split(':').slice(0, 2).join(':');}},yAxis: {data: [{ min }]},extra: {line: {type: 'straight',width: 2,activeType: 'hollow'},tooltip: {showCategory: true}}};uChartsInstance[id] = new uCharts(chartOptions);} catch (error) {console.error('绘制图表时发生错误:', error);}},getMin(series) {let min = Infinity;series.forEach(item => {item.data.forEach(value => {if (value < min) {min = value;}});});return min;},touchstart(e) {if (uChartsInstance[e.target.id]) {uChartsInstance[e.target.id].scrollStart(e);}},touchmove(e) {if (uChartsInstance[e.target.id]) {uChartsInstance[e.target.id].scroll(e);uChartsInstance[e.target.id].dobuleZoom(e);}},touchend(e) {if (uChartsInstance[e.target.id]) {uChartsInstance[e.target.id].scrollEnd(e);uChartsInstance[e.target.id].touchLegend(e);uChartsInstance[e.target.id].showToolTip(e);}}}
}
</script><style>
page {width: 100%;height: 100%;background: #fff;
}
</style><style lang="scss" scoped>
.charts {width: 750rpx;height: 900rpx;
}
</style>    

总结

本文仅仅简单介绍了ucharts在uniapp微信小程序中的使用。