小程序----使用图表显示数据--canvas

需求:在小程序上实现数据可视化

思路:本来想用的是echarts或者相关的可视化插件,但因为用的是vue3,大多数插件不支持,所以用了echarts,但最后打包的时候说包太大超过2M无法上传,百度了一下,说包太大可以进行分包,但是分包的时候还有很多条件,例如tabbar必须在主包,而且最重要的是主包还不能使用分包的资源,那这样的话,如果把echarts这个页面封装的页面放到分包里面,那我主包就没法引用这个图表页面显示了,所以分包是不现实的(然而这一点是在我分完包之后才知道的,所以这告诉我们,无论使用什么新东西都要认真阅读文档,读明白所有使用条件,再决定是否可以使用),分包实现不了,最后只能放弃echarts,转向用canvas绘图,其实最开始也是考虑过使用canvas的,但是因为canvas刚自己看了文档不久,不太熟练,而且也没太想好,所以才用echarts的,但最后还是回到了canvas上。

效果图:

实现过程:其实就是利用canvas 2d来画圆,具体属性大家可以到这个网站查看HTML5 Canvas | 菜鸟教程,

但是有一点要注意的是,canvas原生属性画图优先级是最高的,且不受z-index等优先级属性控制,所以可能会有一些优先级问题,所以最后我把canvas绘出来的图形转成了图片显示在页面上,这样就没有了优先级的问题。

实现代码:

 <canvas v-if="!imgsrc" id="canvas" canvas-id="canvas" style="width: 384px; height: 150px;" ></canvas><image v-if="imgsrc" :src="imgsrc" ></image>
	let that =thisvar ctx = uni.createCanvasContext('canvas', this);let end = (this.data.done / this.data.total ) * 2 * Math.PI; //设置弧度ctx.setLineWidth(12); // 设置圆环的宽度ctx.arc(100, 80, 60, 0, 2 * Math.PI)ctx.setStrokeStyle('#ececec');ctx.stroke(); //对当前路径进行描边// ctx.setLineCap('square'); // 设置圆环端点的形状  无圆角ctx.beginPath(); //开始一个新的路径ctx.setStrokeStyle('#6db500'); // 设置圆环的颜色ctx.setLineCap('round'); // 设置圆环端点的形状  圆角ctx.arc(100, 80, 60, 0, end, false);ctx.stroke(); //对当前路径进行描边//设置一个原点(110,110),半径为100的圆的路径到当前路径ctx.stroke(); //对当前路径进行描边ctx.draw(false,()=>{// 生成图片wx.canvasToTempFilePath({height: 150,canvasId: 'canvas',success: (res) => {that.imgsrc = res.tempFilePath},fail: (res) => {console.log(res);}},that);});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/177485.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode Hot100 33.搜索旋转排序数组

题目&#xff1a; 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], ..., nums[n-1], nu…

构建沉浸式 AI 文本编辑器:开源 3B 编辑器的设计原则与思路

借助于在 AutoDev 与 IDE 上的 AI 沉浸式体验设计&#xff0c;我们开始构建一个 AI 原生的文本编辑器&#xff0c;以探索沉浸式创作体验。其适用于需求编写、架构文档等等文档场景&#xff0c;以加速软件开发中的多种角色的日常工作。 GitHub&#xff1a;https://github.com/un…

Claude2 -sdk java (非官方提供)开源计划

场景 我们要对接claude2&#xff0c;但是claude2官方并没有开放接口文档&#xff0c;只有一个python版本的sdk&#xff0c;但是我们的api_key 并没有升级&#xff08;因为调用的问题&#xff0c;调用报错403&#xff0c;社区人员回应是地域的问题&#xff0c;我们尝试使用代理…

【MySql】14- 实践篇(十二)-grant权限/分区表/自增Id用完怎么办

文章目录 1.grant之后要跟着flush privileges吗&#xff1f;1.1 全局权限1.2 db 权限1.3 表权限和列权限1.4 flush privileges 使用场景 2. 要不要使用分区表?2.1 分区表是什么?2.2 分区表的引擎层行为2.3 分区策略2.4 分区表的 server 层行为2.5 分区表的应用场景 3. 自增Id…

重复的子字符串

题意&#xff1a; 给定一个非空的字符串 s &#xff0c;检查是否可以通过由它的一个子串重复多次构成。 示例 1: 输入: s “abab” 输出: true 解释: 可由子串 “ab” 重复两次构成。 示例 2: 输入: s “aba” 输出: false 示例 3: 输入: s “abcabcabcabc” 输出: t…

Python自动化办公:PDF文件的分割与合并

我们平时办公中&#xff0c;可能需要对pdf进行合并或者分割&#xff0c;但奈何没有可以白嫖的工具&#xff0c;此时python就是一个万能工具库。 其中PyPDF2是一个用于处理PDF文件的Python库&#xff0c;它提供了分割和合并PDF文件的功能。 在本篇博客中&#xff0c;我们将详细…

服务器数据恢复—服务器重装系统导致逻辑卷发生改变的数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌linux操作系统服务器&#xff0c;服务器中有4块SAS接口硬盘组建一组raid5阵列。服务器中存放的数据有数据库、办公文档、代码文件等。 服务器故障&检测&#xff1a; 服务器在运行过程中突然瘫痪&#xff0c;管理员对服务器进行了重装…

MySQL的Linux安装

在MySQL官网下载压缩包MySQL :: Download MySQL Community Server (Archived Versions) 下载完成后将压缩包上传到Linux中。我这里是下的CentOS的压缩包。 并且用的是FinalShell连接工具&#xff0c;可以选择压缩包直接上传。 ​ 上传完毕后&#xff0c;新建mysql文件夹&…

vue3中readonly和shallowReadonly

readonly: 深度只读数据 获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。 只读代理是深层的&#xff1a;访问的任何嵌套 property 也是只读的。 shallowReadonly 浅只读数据 创建一个代理&#xff0c;使其自身的 property 为只读&#xff0c;但不执行…

在线陪诊系统: 医学科技的革新之路

医疗服务的数字化时代已经到来&#xff0c;而在线陪诊系统正是医学科技革新的杰出代表。通过巧妙的技术代码&#xff0c;这一系统不仅实现了患者和医生之间的远程互动&#xff0c;还将医疗服务推向了一个更加智能化的未来。在这篇文章中&#xff0c;我们将深入探讨在线陪诊系统…

办公软件定制开发在企业发展中的优势|app小程序搭建

办公软件定制开发在企业发展中的优势|app小程序搭建 如今&#xff0c;办公软件已经成为企业日常工作的必需品。很多企业为了提高工作效率和满足自身业务需要&#xff0c;选择定制开发办公软件。下面将介绍定制开发办公软件在企业发展中的优势。 1定制开发办公软件可以满足企业…

【量子计算机】量子计算机是什么?优缺点和当前的研究进展情况

近来有看到量子计算机相关信息&#xff0c;对未来可能是一个新的趋势。量子计算领域属于一个新兴高速发展的领域&#xff0c;在近二十年间&#xff0c;不论是量子算法的研究&#xff0c;还是量子芯片的研发均取得了巨大的进展。由于量子计算的理论研究有限&#xff0c;目前所说…

自动驾驶—MPC模型预测控制算法工程实现

文章目录 概要研究对象MPC 控制器算法原理技术细节 —— 使用MATLAB实现MPC 控制器算法小结MyRelatedWorks概要 考虑到之前在我的公众号写的MPC控制器得到了大家的很多阅读和转载量,我将此文章再完善一下,让人更容易理解些,希望对大家有帮助。 研究对象 LQR的研究对象是现…

9.4 Windows驱动开发:内核PE结构VA与FOA转换

本章将继续探索内核中解析PE文件的相关内容&#xff0c;PE文件中FOA与VA,RVA之间的转换也是很重要的&#xff0c;所谓的FOA是文件中的地址&#xff0c;VA则是内存装入后的虚拟地址&#xff0c;RVA是内存基址与当前地址的相对偏移&#xff0c;本章还是需要用到《内核解析PE结构导…

短视频账号矩阵系统开发--saas源头技术开发(手机版)

目前PC端网页版基本上已经很倦市场了&#xff0c;所以在这种情况下 &#xff0c;我们已经专注开发短视频矩阵系统pc版3年了&#xff0c;目前我们这边核心技术优势就是都是自己一手搭建开发的并且我们的剪辑算法也是自己一手源头开发的&#xff0c;剪辑成本后期运营成本低&#…

万宾科技第四代可燃气体监测仪的作用

燃气作为一种重要的能源已在居民生活、工业生产和商业活动等领域得到了广泛的应用。但是与之而来的便是各种各样的燃气管网的安全问题&#xff0c;其中燃气管网泄漏成为了城市生命线建设中亟待解决的安全隐患。因此采取切实有效的措施来保障燃气管网的安全运行&#xff0c;应用…

MySQL存储引擎如何优化索引搜索的

索引覆盖 就是查询字段在索引的B树的叶子节点里 索引下推 innoDB会在存储层进行一些判断&#xff0c;而不是发送回server层&#xff0c;减少一些开销 MRR(Multi-Range Read)机制 回表不仅仅是磁盘io的问题&#xff0c;更恐怖的事磁盘的随机io&#xff01;想想这样一种情况…

docker容器入门

docker容器入门 1.1 容器介绍 容器技术是一种操作系统级的虚拟化技术&#xff0c;它允许在一个物理或虚拟机上运行多个隔离的应用程序实例&#xff0c;每个实例都被封装在一个独立的容器中。每个容器都包含应用程序及其依赖的运行时环境&#xff0c;如操作系统、库文件和配置…

leetcode:2864. 最大二进制奇数(python3解法)

难度&#xff1a;简单 给你一个 二进制 字符串 s &#xff0c;其中至少包含一个 1 。 你必须按某种方式 重新排列 字符串中的位&#xff0c;使得到的二进制数字是可以由该组合生成的 最大二进制奇数 。 以字符串形式&#xff0c;表示并返回可以由给定组合生成的最大二进制奇数。…

Linux(9):正规表示法与文件格式化处理

简单的说&#xff0c;正规表示法就是处理字符串的方法&#xff0c;他是以行为单位来进行字符串的处理行为&#xff0c;正规表示法透过一些特殊符号的辅助&#xff0c;可以让使用者轻易的达到【搜寻/删除/取代】某特定字符串的处理程序。 正规表示法基本上是一种【表示法】&…