当前位置: 首页 > news >正文

微信小程序 uCharts的使用方法

一、背景

微信小程序项目需要渲染一个柱状图,使用uCharts组件完成

uCharts官网指引👉:uCharts官网 - 秋云uCharts跨平台图表库

二、实现效果

三、具体使用

进入官网查看指南,有两种方式进行使用:分别是原生方式与组件方式

3.1、原生方式

第一步:获取u-charts.js

获取方式一:通过码云 uCharts 项目开源地址获取 u-charts.js

https://gitee.com/uCharts/uCharts

获取方式二:通过 npm 命令 npm i @qiun/ucharts 安装

安装成功后使用 import 或 require 进行引用

备注:我使用的是第二种方式,npm下载后,再通过import使用的

第二步:引入u-charts.js文件在项目中使用

<template><view><canvas canvas-id="myid" id="myid" class="charts" @tap="tap" /></view>
</template><script>
import uCharts from '../../node_modules/@qiun/ucharts/u-charts'
var uChartsInstance = {}
export default {data() {return {cWidth: 750,cHeight: 500}},onReady() {//这里的 750 对应 css .charts 的 widththis.cWidth = uni.upx2px(750)//这里的 500 对应 css .charts 的 heightthis.cHeight = uni.upx2px(500)this.getServerData()},methods: {getServerData() {//模拟从服务器获取数据时的延时setTimeout(() => {let res = {categories: ['2016', '2017', '2018', '2019', '2020', '2021'],series: [{name: '目标值',data: [35, 36, 31, 33, 13, 34]},{name: '完成量',data: [18, 27, 21, 24, 6, 28]}]}this.drawCharts('myid', res)}, 500)},drawCharts(id, data) {const ctx = uni.createCanvasContext(id, this)uChartsInstance[id] = new uCharts({type: 'column',context: ctx,width: this.cWidth,height: this.cHeight,categories: data.categories,series: data.series,xAxis: {disableGrid: true},yAxis: {data: [{ min: 0 }]},extra: {column: {type: 'group'}}})},tap(e) {uChartsInstance[e.target.id].touchLegend(e)uChartsInstance[e.target.id].showToolTip(e)}}
}
</script><style scoped>
.charts {width: 750rpx;height: 500rpx;
}
</style>

3.2、组件方式

第一步:使用 HBuilderX 导入插件

uniapp插件地址指引👉:秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场 

第二步:在需要使用图表的地方引入组件

<template><view class="charts-box"><qiun-data-charts type="column" :chartData="chartData" /></view>
</template><script>
export default {data() {return {chartData: {}}},onReady() {this.getServerData()},methods: {getServerData() {//模拟从服务器获取数据时的延时setTimeout(() => {let res = {categories: ['2016', '2017', '2018', '2019', '2020', '2021'],series: [{name: '目标值',data: [35, 36, 31, 33, 13, 34]},{name: '完成量',data: [18, 27, 21, 24, 6, 28]}]}this.chartData = JSON.parse(JSON.stringify(res))}, 500)}}
}
</script><style scoped>
.charts-box {width: 100%;height: 300px;
}
</style>

备注:需要给元素设置宽高,否则图表无法显示

四、项目中bug补充

4.1、bug描述

在微信小程序中使用uCharts做柱状图,进入页面后滑动图表,此时图表在可视区域被遮挡了显示不全,点击下方的切换按钮,图表会上移,脱离原本位置,后面再切回到第一个按钮会回归到正常位置

图片1是切换按钮后图表上移(PS:错误版本,需改成图片2的效果)

图片2是正常情况下切换按钮图表位置不动(PS:这版是已经修改成功的状态)

4.2、问题分析

查看代码发现,在组件挂载时已经获取了按钮1下的接口数据(每个按钮下会展示数据列表),在切换按钮时,并对按钮2和按钮3都发起了请求,所以在切换按钮2和按钮3时又触发重绘。

为什么点按钮1时图表不会上移?是因为第一次进入页面组件挂载已经获取了按钮1的数据,所以在切换回按钮1时不会重新发请求触发重绘

理解了这个问题之后,我便将每个按钮的请求都放在组件挂载时获取,切换按钮只是重新赋值index值

相关文章:

微信小程序 uCharts的使用方法

一、背景 微信小程序项目需要渲染一个柱状图&#xff0c;使用uCharts组件完成 uCharts官网指引&#x1f449;&#xff1a;uCharts官网 - 秋云uCharts跨平台图表库 二、实现效果 三、具体使用 进入官网查看指南&#xff0c;有两种方式进行使用&#xff1a;分别是原生方式与组…...

面试算法54:所有大于或等于节点的值之和

题目 给定一棵二叉搜索树&#xff0c;请将它的每个节点的值替换成树中大于或等于该节点值的所有节点值之和。假设二叉搜索树中节点的值唯一。例如&#xff0c;输入如图8.10&#xff08;a&#xff09;所示的二叉搜索树&#xff0c;由于有两个节点的值大于或等于6&#xff08;即…...

七月论文审稿GPT第二版:从Meta Nougat、GPT4审稿到LongLora版LLaMA、Mistral

前言 如此前这篇文章《学术论文GPT的源码解读与微调&#xff1a;从chatpaper、gpt_academic到七月论文审稿GPT》中的第三部分所述&#xff0c;对于论文的摘要/总结、对话、翻译、语法检查而言&#xff0c;市面上的学术论文GPT的效果虽暂未有多好&#xff0c;可至少还过得去&am…...

PyTorch入门学习(十二):神经网络-搭建小实战和Sequential的使用

目录 一、介绍 二、先决条件 三、代码解释 一、介绍 在深度学习领域&#xff0c;构建复杂的神经网络模型可能是一项艰巨的任务&#xff0c;尤其是当您有许多层和操作需要组织时。幸运的是&#xff0c;PyTorch提供了一个方便的工具&#xff0c;称为Sequential API&#xff0c…...

Linux shell编程学习笔记20:case ... esac、continue 和break语句

一、case ... esac语句说明 在实际编程中&#xff0c;我们有时会请到多条件多分支选择的情况&#xff0c;用if…else语句来嵌套处理不烦琐&#xff0c;于是JavaScript等语言提供了多选择语句switch ... case。与此类似&#xff0c;Linux Shell脚本编程中提供了case...in...esa…...

树莓派4无法进入桌面模式(启动后出现彩色画面,然后一直黑屏,但是可以正常启动和ssh)

本文记录了这段比较坎坷的探索之路&#xff0c;由于你的问题不一定是我最终解决方案的&#xff0c;可能是前面探索路上试过的&#xff0c;所以建议按顺序看排除前置问题。 双十一又买了个树莓派 4B&#xff0c;插上之前树莓派 4B 的 TF 卡直接就能使用&#xff08;毕竟是一样规…...

花草世界生存技能

多菌灵 杀菌常用 阿维菌素 杀虫常用 除蚜虫 吡虫啉 有毒性 内吸性&#xff08;植物吸收&#xff09; 苦参碱 无毒&#xff0c;中药提取 内吸性药 吡虫啉&#xff0c;噻虫嗪、啶虫脒、苦参碱 栀子花 春秋花后修剪 牡丹 秋冬种植&#xff1b; 洛阳产地&#xff1b; 肥料 …...

执行npm install时老是安装不成功node-sass的原因和解决方案

相信你安装前端项目所需要的依赖包&#xff08;npm install 或 yarn install&#xff09;时&#xff0c;有可能会出现如下报错&#xff1a; D:\code\**project > yarn install ... [4/4] Building fresh packages... [-/6] ⠁ waiting... [-/6] ⠂ waiting... [-/6] ⠂ wai…...

【MongoDB】集群搭建实战 | 副本集 Replica-Set | 分片集群 Shard-Cluster | 安全认证

文章目录 MongoDB 集群架构副本集主节点选举原则搭建副本集主节点从节点仲裁节点 连接节点添加副本从节点添加仲裁者节点删除节点 副本集读写操作副本集中的方法 分片集群分片集群架构目标第一个副本集第二个副本集配置集初始化副本集路由集添加分片开启分片集合分片删除分片 安…...

「Verilog学习笔记」四选一多路器

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 分析 通过波形示意图我们可以发现&#xff0c;当sel为0&#xff0c;1&#xff0c;2时&#xff0c;输出mux_out分别为d3&#xff0c;d2&#xff0c;d1&#xff0c;那么sel3…...

asp.net 创建docker容器

首先创建asp.net web api 创建完成后如下图 添加docker支持 添加docker支持 添加linux docker支持...

Linux项目自动化构建工具-make/Makefile使用

make/Makefile使用介绍 make是一个命令makefile是一个在当前目录下存在的一个具有特定格式的文本文件 ​ 下面我们设计一个场景&#xff0c;实现make命令对我们code.c文件进行编译和删除。 1 #include<stdio.h> 2 3 int main() 4 { 5 printf("hello,world!…...

【React】03.脚手架的进阶应用

文章目录 暴露webpack配置暴露前后的区别config文件夹&#xff1a;scripts文件夹&#xff1a;package.json 常见的配置修改1.把sass改为less2.配置别名3.修改域名和端口号4.修改浏览器兼容5.处理Proxy跨域 2023年最新珠峰React全家桶【react基础-进阶-项目-源码-淘系-面试题】 …...

WPF开源控件HandyControl——零基础教程

学习Handycontrol的过程中,为后边快速开发,写的零基础教程,尽量看完就可以实践! 参考教程 中文文档:欢迎使用HandyControl | HandyOrg Github代码:https://github.com/HandyOrg/HandyControl 使用教程:WPF-HandyControl安装和使用 - 掘金 安装配置教程 创建wpf项目 …...

chinese-stable-diffusion中文场景文生图prompt测评集合

腾讯混元大模型文生图操作指南.dochttps://mp.weixin.qq.com/s/u0AGtpwm_LmgnDY7OQhKGg腾讯混元大模型再进化&#xff0c;文生图能力重磅上线&#xff0c;这里是一手实测腾讯混元的文生图在人像真实感、场景真实感上有比较明显的优势&#xff0c;同时&#xff0c;在中国风景、动…...

K-均值聚类算法

K-均值聚类算法是一种常用的无监督学习算法&#xff0c;目的是将一组数据点分为 K 个聚类。它的主要思想是通过迭代的方式不断调整聚类中心的位置&#xff0c;使得数据点与最近的聚类中心之间的距离最小。 算法步骤如下&#xff1a; 初始化 K 个聚类中心&#xff0c;可以随机…...

Xbox漫游指南

以Xbox series s为例 开机启动 用手柄连接&#xff0c;注意两颗电池要方向相反插入&#xff0c;虽然里面2个插槽长一样&#xff1b; Xbox APP极其难用&#xff0c;放弃&#xff0c;直接用手柄连接 转区 只需要一个空U盘&#xff0c;大小不限制&#xff0c;格式化为NTPS格式…...

降低毕业论文写作压力的终极指南

亲爱的同学们&#xff0c;时光荏苒&#xff0c;转眼间你们即将踏入毕业生的行列。毕业论文作为本科和研究生阶段的重要任务&#xff0c;不仅是对所学知识的综合运用&#xff0c;更是一次对自己学术能力和专业素养的全面考验。然而&#xff0c;论文写作常常伴随着压力和焦虑&…...

SELECT COUNT( * ) 与SELECT COUNT( 1 ) 区别

在 SQL 中&#xff0c;SELECT COUNT(*) 和 SELECT COUNT(1) 都用于统计符合条件的行数&#xff0c;但它们在具体实现和效率上有一些区别。 SELECT COUNT(*)&#xff1a;这是一种常见且通用的写法&#xff0c;它会统计所有符合查询条件的行数&#xff0c;包括所有列&#xff0c;…...

[python 刷题] 1248 Count Number of Nice Subarrays

[python 刷题] 1248 Count Number of Nice Subarrays 题目如下&#xff1a; Given an array of integers nums and an integer k. A continuous subarray is called nice if there are k odd numbers on it. Return the number of nice sub-arrays. 这道题和 1343 Number of S…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...