uniapp 微信小程序 使用ucharts

文章目录

前言

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

一、组件功能概述

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

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

二、代码结构分析

2.1 模板结构

vue 复制代码
<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微信小程序中的使用。

相关推荐
小徐_23331 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差2 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview