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

相关推荐
mon_star°1 小时前
搭建基于火灾风险预测与防范的消防安全科普小程序
安全·微信小程序·小程序·微信公众平台
七七小报4 小时前
uniapp-商城-38-shop 购物车 选好了 进行订单确认4 配送方式1
uni-app
换日线°4 小时前
CSS常遇到自适应高度动画、带三角气泡阴影一行样式解决
css·微信小程序
七七小报6 小时前
uniapp-商城-39-shop 购物车 选好了 进行订单确认4 配送方式2 地址页面
uni-app
G_GreenHand6 小时前
uniapp 仿小红书轮播图效果
uni-app
yuanmenglxb20047 小时前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
编程毕设8 小时前
【含文档+PPT+源码】基于微信小程序连锁药店商城
微信小程序·小程序
幽络源小助理8 小时前
微信小程序鲜花销售系统设计与实现
微信小程序·小程序
性野喜悲8 小时前
uniapp返回上一页接口数据更新了,页面未更新
uni-app
冰镇生鲜10 小时前
小程序·安全·胶囊·容器组件
前端·vue.js·uni-app