uniapp 使用echarts做折线图条形图。

news2024/9/25 15:22:18

在这里插入图片描述
在这里插入图片描述

提前10天把中烟活动做完了,以为能打酱油到除夕那天,结果又要做什么数据看板,方便烟草领导过年查看数据,还只给5天时间,真实压榨剥削啊,下辈子再也不‘拍黄片’了,不!下份工作我就转前端了,php我再也不写了。

1.安装echarts 依赖 npm install echarts

2.引用 import * as echarts from ‘echarts’;

3.上代码

				<canvas :style="{width: '100%', height: '500rpx'}" id="mychart" canvas-id="mychart"
					:canvas-type="canvasType"></canvas>

			chart() {


				const ctx = document.getElementById('mychart');
				const chart = echarts.init(ctx);
				chart.setOption({
					grid: {
						// 设置图表距离顶部,左侧,右侧和底部的高度
						top: '50rpx',
						left: '50rpx',
						right: '50rpx',
						bottom: '50rpx',

					},
					color: ["#2363FF", "#03C6D4", "#6B49F5"],
					title: {
						left: "center",
						text: this.ChartDatatext,
					},
					tooltip: {
						width: '100%',
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					legend: {
						bottom: 0,
						itemWidth: 15,
						itemHeight: 8,
						itemGap: 40,
						data: ['小盒扫码数', '条盒扫码数', '总扫码数']
					},
					xAxis: [{
						type: 'category',
						data: this.tongdate,
						axisPointer: {
							type: 'shadow'
						}
					}],
					yAxis: [{
							type: 'value',
							name: '',
							min: 0,
							//max: 0,
							max: function(value) {
								return Math.ceil(value.max * 1.2);
							},
							interval: 1000,
							axisLabel: {
								formatter: '{value}'
							}
						},

					],
					series: [{
							name: '小盒扫码数',
							type: 'bar',
							data: this.box
						},
						{
							name: '条盒扫码数',
							type: 'bar',
							data: this.bar
						},
						{
							name: '总扫码数',
							type: 'line',
							data: this.all
						}
					]
				})

			},

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

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

相关文章

破解Windows系统密码(保姆级教学)

前言: 本篇博客只是技术分享并非非法传播知识,实验内容均是在虚拟机中进行,并非真实环境 正文: 看到题目大家都已经晓得这篇博客是干嘛了,我也不废话了,直接上win7素材 需要windows10破解过程的关注后在下面评论"已关注,请私聊"我会私发给你 一.windows7电脑密码破解…

JAVA_Set系列集合:HashSet、LinkedHashSet、TreeSet底层详解

先看看 Set 系列集合的位置&#xff1a; Set 系列集合的特点&#xff1a; 无序&#xff1a;存取顺序不一致 如存入张三、李四、王五。而遍历获取到的是李四, 张三, 王五 不重复&#xff1a;可以去除重复无索引&#xff1a;没有带索引的方法&#xff0c;所以不能使用普通for循…

MTE内存扩展精讲与实战

思考 1、常见的内存安全问题有哪些&#xff1f;举例说明&#xff1f; 2、内存安全的软件缓解技术有哪些&#xff1f;在optee上的应用&#xff1f; 3、MTE下的内存安全性如何保证&#xff1f;空间安全性&#xff1f;时间安全性&#xff1f; 4、MTE的架构细节&#xff1f;硬件原…

8.14划分字母区间(LC763-M)(附.length,.length(),.size()使用原理)

算法&#xff1a; 在遍历的过程中相当于是要找每一个字母的边界&#xff0c;如果找到之前遍历过的所有字母的最远边界&#xff0c;说明这个边界就是分割点了。 此时前面出现过所有字母&#xff0c;最远也就到这个边界了。 步骤&#xff1a; 统计每一个字符最后出现的位置从…

【代码随想录-数组】长度最小的子数组

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

adb测试冷启动和热启动 Permission Denial解决

先清理日志 adb shell logcat -c 打开手机模拟器中的去哪儿网&#xff0c;然后日志找到包名和MainActivity adb shell logcat |grep Main com.Qunar/com.mqunar.atom.alexhome.ui.activity.MainActivity 把手机模拟器的去哪儿的进程给杀掉 执行 命令 adb shell am start -W…

2013年苏州大学837复试机试C/C++

2013年苏州大学复试机试 第一题 题目 假设有一堆数字&#xff08;小于100个&#xff09;需要对其做如下处理&#xff1a; 求平均数求标准差求方差 可用函数实现也可以不用 代码 #include <iostream> #include <sstream> //字符串流 #include <cmath> …

LabVIEW振动信号分析

LabVIEW振动信号分析 介绍如何使用LabVIEW软件实现希尔伯特-黄变换&#xff08;Hilbert-Huang Transform, HHT&#xff09;&#xff0c;并将其应用于振动信号分析。HHT是一种用于分析非线性、非平稳信号的强大工具&#xff0c;特别适用于旋转机械等复杂系统的振动分析。开发了…

【linux】Debian防火墙

Debian系统默认没有安装防火墙&#xff0c;但用户可以根据需要自行选择并安装一个防火墙以增强系统安全性。 一、查看Debian 桌面系统的防火墙是否关闭 在Debian及其他基于Linux的桌面系统中&#xff0c;防火墙功能通常是由iptables或nftables规则集控制的&#xff0c;而ufw&…

《WebKit技术内幕》学习之十五(3): Web前端之未来

3 Web应用和Web运行环境 3.1 Web应用 HTML5提供了强大的能力&#xff0c;而不是支持Web网页这么简单。就目前而言&#xff0c;它已经初步提供了支持Web网页向Web应用方向发展的能力。相对于本地应用&#xff08;Native Application&#xff09;&#xff0c;Web前端领域也能够…

如何在yolov8中验证时计算FPS

ultralytics-main/ultralytics/engine/validator.py文件下&#xff0c;第200行左右&#xff0c;添加如下代码 LOGGER.info(fFPS:{(1000 / sum(self.speed.values())):.2f}) speed.values()是一个字典&#xff0c;包括preprocess,inference,loss,postprocess的时间&#xff0c;所…

SpringSecurity(15)——OAuth2密码模式

工作流程 将用户和密码传过去&#xff0c;直接获取access_token&#xff0c;用户同意授权动作是在第三方应用上完成&#xff0c;而不是在认证服务器&#xff0c;第三方应用申请令牌时&#xff0c;直接带用户名和密码去向认证服务器申请令牌。这种方式认证服务器无法判断用户是…

【python自动化系列01】Openpyxl,操作Excel文件的利器

如果要批量操作Excel文件&#xff0c;使用最广泛的是 Openpyxl 库。这个库集成了Excel的所有操作&#xff0c;从创建Excel、保存Excel到设置Excel单元格字体、颜色都可以实现。下面开始学习 Openpyxl 的简单使用吧&#xff01;&#xff01;&#xff01; 安装 openpyxl 库 ope…

ensp winpcap无法安装

安装ensp的依赖软件winpcap无法安装 发现提示已有最新版本、找网上都是修改文件后缀名&#xff0c;测试后发现根本不行&#xff0c;有点扯 npcap是wireshark安装带的&#xff0c;通过卸载wireshark安装 ensp安装顺序应该先安装winpcap->wireshark->virtualbox->ens…

高中数学常识

一、大小关系 |x| > |sinx| 理由&#xff1a; 很明显&#xff0c;在圆内&#xff0c;弧长x>垂线sinx 3x、2x 、 1 2 \frac{1}{2} 21​x 理由&#xff1a; log 1 2 _\frac{1}{2} 21​​x、log 2 _2 2​x、 log 3 _3 3​x 二、(xy)? 的求法 利用二项式定理 三、平…

ThreadLocal内存泄漏示例

ThreadLocal内存泄漏是老生常谈的问题了&#xff0c;原理就不多说了&#xff0c;这里只简单回顾下 Thread类有个属性threadLocals&#xff0c;其实就是个map。 这个map的结构如下&#xff0c;key是ThreadLocal对象&#xff0c;是一个弱引用&#xff0c;value是调用threadLocal…

cmake工具的安装

1、简介 CMake 是一个开源的、跨平台的自动化建构系统。它用配置文件控制编译过程的方式和Unix的make相似&#xff0c;只是CMake并不依赖特定的编译器。CMake并不直接建构出最终的软件&#xff0c;而是产生标准的建构文件&#xff08;如 Unix 的 Makefile 或 Windows Visual C …

ZYNQ AC7020C的“点LED”实验

一、创建 Vivado 工程 1、启动 Vivado 2、在 Vivado 开发环境里点击“Create New Project”&#xff0c;创建一个新的工程 3、弹出一个建立新工程的向导&#xff0c;点击“Next” 4、在弹出的对话框中输入工程名和工程存放的目录。需要注意工程路径“Project location”不能有…

安科瑞宿舍安全用电监测:科技保障,安全无忧

在当今社会&#xff0c;电力已成为我们日常生活中不可或缺的一部分。然而&#xff0c;不正确的用电方式或管理不善可能会引发火灾等安全事故&#xff0c;给学生带来生命财产威胁。为了解决这一问题&#xff0c;安科瑞宿舍安全用电监测系统应运而生&#xff0c;为学生的用电安全…

[每日一题] 01.27 - 斐波那契数列

文章目录 打分斐波那契数列 打分 n int(input()) lis list(map(int,input().split())) a sum(lis) - min(lis) - max(lis) print(round(a / (n - 2),2))斐波那契数列 n int(input()) res [] for i in range(n):res.append(int(input()))Max max(res) lis [1,1] for i in…