uniapp 微信小程序使用ec-canvas图表

news2024/12/23 19:57:53

微信小程序中使用到了ec-canvas图表,从DCloud插件市场中下载echarts-for-wx;

在uniapp项目中找到js-sdk文件夹,把其中的uni-ec-canvas放到要用的包的components中。

在文件中导入:

饼图:

<template>
    <view>
        <uni-ec-canvas
	          force-use-old-canvas="true" 
	          id="mychartDom" 
	          canvas-id="mychart-bar" 
	          :ec="ec" 
			  ref="canvas"
	          canvasHeight="170"
			  class="canvas_size"
	          ></uni-ec-canvas> 
    </view>
</template>

import uniEcCanvas from '../components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '../components/uni-ec-canvas/echarts.js'
let chartA = null;
export default {
	components: {
		uniEcCanvas
	},
    methods: {
		initChart(canvas, width, height, canvasDpr) {
			chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
			})
			canvas.setChart(chart)
			var data=[{value:this.abnormal, name:'正常',"itemStyle":{"normal":{"color":"#00CCB8"}}},
					{value:this.absence, name:'异常',"itemStyle":{"normal":{"color":"#FFCB96"}}}];
			var dataName = data.reduce((per,cur,i)=>{per[i]=cur.name;return per},[]);
			var a=0;
			for(var i=0; i<data.length; i++)
				{
					a+=data[i].value;
				}
			data.push({value:a, name:'__other', itemStyle:{normal:{color:'rgba(0,0,0,0)'}}});
			let option = {
					legend: {
						orient: "horizontal",//图例的布局,水平布局、垂直布局
						icon:'circle',
						bottom:50,
						textStyle: {//图例字体样式
							color: "#00CCB8",
							fontSize: 15,
							fontFamily: "微软雅黑"
						},
						data:dataName,
						formatter: e =>{
							let val=0;
							data.forEach(el => {
								if(e == el.name) val = el.value
							});
							return `${e}${val}天`
						}
					},
					series : [
						{
							name: '上下班统计',
							type: 'pie',
							startAngle:-180,
							radius : '95%',
							center: ['50%', '60%'],
							data:data,
							itemStyle: {
								borderRadius:0,
								borderColor:'#fff',
								borderWidth:5
							},
 
							label: {
								normal: {
									show: false,
								},
							},
							labelLine: {
								normal: {
									show: false
								}
							},
						}
					]
				};
				chart.setOption(option)
				return chart
		},
    	mounted() {
			this.$refs.canvas.init(this.initChart)
		}
}

折线图:

            initChart(canvas, width, height, canvasDpr) {
				chartA = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chartA)

				let option = {
					  title: {
						text: ''
					  },
					  tooltip: {
						trigger: 'axis',
						formatter: '{b}\r\n{c0}人',
						axisPointer: {
						  type: 'line',
						  axis: 'x',
						  label: {
							backgroundColor: '#000000'
						  }
						}
					  },
					  grid: {
						left: '6%',
						right: '6%',
						top: '6%',
						bottom: '6%',
						containLabel: true
					  },
					  xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['2-12', '2-14', '2-16', '2-18', '2-20', '2-22', '2-24'],
						axisLine: {
						  // y轴
						  show: false
						},
						axisTick: {
						  // y轴刻度线
						  show: false
						},
						splitLine: {
						  // 网格线
						  show: false
						}
					  },
					  yAxis: {
						type: 'value',
						axisLine: {
						  // y轴
						  show: false
						},
						axisTick: {
						  // y轴刻度线
						  show: false
						},
						splitLine: {
						  // 网格线
						  show: false
						}
					  },
					  series: [{
						name: '浏览量',
						type: 'line',
						smooth: true,
						lineStyle: {
						  color: '#EF5959'
						},
						data: [120, 132, 101, 134, 90, 230, 210]
					  }]
				};
				chartA.setOption(option)
				return chartA
			},

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

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

相关文章

嵌入式学习——Shell(流指针、文件读写函数)——day20

1. 标准IO和文件IO的区别 1. 标准IO是一种有缓存的IO形式&#xff08;接收了一部分内容后给到linux内核中&#xff09; 2. 文件IO是一种没有缓存的IO形式&#xff08;即刻交给linux内核&#xff0c;及时性&#xff09; 3. 标准IO是库函数,库函数可以在Windows和Linux系统中都能…

使用docker创建hadoop集群:Couldn‘t upload the file

运行的环境; Windows10 Docker Desktopdocker-hadoop 出现的问题如下: 解决方法 https://github.com/big-data-europe/docker-hadoop/issues/98

喜大普奔!VMware Workstation Pro 17.5 官宣免费!

Broadcom 已经正式收购 VMware&#xff0c;【VMware中国】官方公众号已于3月11日更名为【VMware by Broadcom中国】。 13日傍晚&#xff0c;该公众号发表推文 V风拂面&#xff0c;好久不见 - 来自VMware 中国的问候 &#xff0c;意味着 VMware 带着惊喜和美好的愿景再次归来。 …

JavaScript进阶——05-迭代器和生成器【万字长文,感谢支持】

迭代器 概念 迭代器&#xff08;Iterator&#xff09;是 JavaScript 中一种特殊的对象&#xff0c;它提供了一种统一的、通用的方式遍历个各种不同类型的数据结构。可以遍历的数据结构包括&#xff1a;数组、字符串、Set、Map 等可迭代对象。我们也可以自定义实现迭代器&…

Git 基础使用(2) 分支管理

文章目录 分支概念分支使用查看分支分支创建分支切换分支合并合并冲突分支删除 分支管理快进模式分支策略内容保存错误处理 分支概念 &#xff08;1&#xff09;分支概念 Git分支是指在版本控制系统Git中&#xff0c;用来表示项目的不同工作流程或开发路径的一个重要概念。通过…

学习Nginx(一):基础

介绍 Nginx是一个高性能的HTTP和反向代理的web服务器&#xff0c;它的设计重点是高并发、高性能和低内存消耗。它常被用于提供静态内容、负载均衡和作为Web服务器。 Nginx具有以下功能和特点&#xff1a; 静态文件服务&#xff1a;作为一个Web服务器&#xff0c;Nginx可以处…

SpringBoot解决CORS跨域——@CrossOrigin

前端请求后端报错了。 状态码&#xff1a;403 返回错误&#xff1a;Invalid coRs request 一个注解就搞定了。 在类上加 CrossOrigin

队列的讲解

队列的概念 队列:只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出FIFO(First In First Out) 入队列:进行插入操作的一端称为队尾 出队列:进行删除操作的一端称为队头 一端进另一端出 也就是可以做到&#xff0c;先…

数据结构与算法-排序算法3-插入排序

目录 1.插入排序&#xff1a; 1.介绍&#xff1a; 2.动态图解 3.举例 4.小结插入排序规则 5.插入排序代码 6.运行时间 代码&#xff1a; 运行结果&#xff1a; 1.插入排序&#xff1a; 1.介绍&#xff1a; 数组中n个元素&#xff0c;把这n个待排序元素看成一个有序序…

01 Triton backend

1 整体架构 三部分组成&#xff1a; Triton backend tensorRT_backend、onnx_backend、tfs_backend、torch_backend **Triton model ** 不同的模型 **Triton model instance ** 模型实例 ![P2}5X%2ULV(2OAC$_OKOP.png 2 设计思路 需要实现七个接口&#xff1a; TRITON…

Elasticsearch - HTTP

文章目录 安装基本语法索引创建索引查看索引删除索引 文档创建文档更新文档匹配查询多条件查询聚合查询映射 安装 https://www.elastic.co/downloads/past-releases/elasticsearch-7-17-0 下载完成启动bin/elasticsearch服务&#xff0c;可以在Postman调试各种请求。 基本语法…

风电功率预测 | 基于遗传算法优化BP神经网络实现风电功率预测(附matlab完整源码)

风电功率预测 风电功率预测 | 基于遗传算法优化BP神经网络实现风电功率预测(附matlab完整源码)完整代码风电功率预测 | 基于遗传算法优化BP神经网络实现风电功率预测(附matlab完整源码) 基于遗传算法优化BP神经网络是一种常见的方法,用于改进BP神经网络在风电功率预测中的性…

IBM Granite模型开源:推动软件开发领域的革新浪潮

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

基于MSWA相继加权平均的交通流量分配算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于MSWA相继加权平均的交通流量分配算法matlab仿真.如图所示交通网络中&#xff0c;包含6个节点、11各路段、9个OD对。经枚举可得每个OD对间存在3条无折返有效路…

RS编码和卷积码总结

RS编码 简要介绍RS编码及其原理 1. RS编码简介 Reed-Solomon编码&#xff08;RS编码&#xff09;是一种强大的纠错码&#xff0c;广泛应用于数据存储和传输中。RS编码由Irving S. Reed和Gustave Solomon于1960年提出&#xff0c;属于BCH码的一种&#xff0c;是基于有限域&am…

免费思维13招之十二:耗材型思维

免费思维13招之十二:耗材型思维 今天给你分享免费思维的两个子思维——相关性耗材思维和非相关性耗材思维。 相关性耗材思维,是指有一些产品的使用,需要大量的相关耗材,从而对该产品进行免费,而耗材进行资费。 举例:全世界最大的一家直销公司叫安利,它的明星产品是净水…

【Python探索之旅】列表

目录 特点 入门 访问元素 新增元素 修改元素 插入元素 删除元素 完结撒花 前言 在Python中&#xff0c;列表(List)是最常用的数据结构之一&#xff0c;类似于其他语言&#xff0c;如Java&#xff0c;与其不同啊Python中不需要声明数据类型。它提供了一种灵活且高效的方式…

数学建模入门手册

数模的主要比赛 美赛&#xff08;报名费100美元&#xff0c;每年2月比赛&#xff09;&#xff1b;国赛&#xff08;每年9月&#xff09; 电工杯&#xff08;每年5月&#xff09;&#xff1b;APMCM&#xff08;每年11月&#xff09;&#xff1b;MathorCup&#xff08;每年4月&a…

3.TCP的三次握手和四次挥手

一、前置知识 TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议。在传输数据前通信双方必须建立连接&#xff08;所谓连接&#xff0c;是指客户端和服务端各自保存一份关于对方的信息&#xff0c;比如ip地址&#xff0c;端口号等&#xff09;。TCP通过三次握手建立一个…

Spring Boot 整合讯飞星火3.5通过接口Api接口实现聊天功能(首发)复制粘贴即可使用,后续更新WebSocket实现聊天功能

程序员必备网站&#xff1a; 天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/ 1.pom.xml <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.72</version></dependency><depen…