前言

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

一、组件功能概述

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

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

二、代码结构分析

2.1 模板结构

<template>
    <canvas
        canvas-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微信小程序中的使用。