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

前端开发工程师——数据可视化

news 2025/6/17 9:49:03

canvas

canvas绘制线段

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {padding: 0;margin: 0;}canvas {border: 1px solid rgb(32, 30, 30);}
</style>
<body><!-- canvas画布：双闭合标签 --><!-- canvas默认标签宽度与高度 300 * 150 --><!-- 在canvas中添加文字内容没有任何意义，只能通过js --><!-- canvas的高度和宽度只能通过标签属性来设置 --><!-- 不能通过样式设置宽度和高度 --><canvas width="600" height="400"></canvas>
</body>
</html>
<script>// 通过js当中的笔去完成let canvas = document.querySelector('canvas');// 获取画布的笔（上下文）let ctx = canvas.getContext('2d');// 可以获取一些方法对象// console.log(ctx)// 绘制线段：绘制线段起点设置ctx.moveTo(100,100);// 其他点设置ctx.lineTo(100,200);ctx.lineTo(200,100);// 设置图形的填充的颜色，下面的fill是一起的ctx.fillStyle = 'red';ctx.fill();// 设置线段的颜色ctx.strokeStyle = 'pink';// 设置线段的宽度ctx.lineWidth = '20';// closePath方法表示起点和最终结束点的连接ctx.closePath();// stroke方法表示起点的其他点的连接ctx.stroke();
</script>

canvas绘制矩形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {padding: 0;margin: 0;}canvas {border: 1px solid rgb(32, 30, 30);}
</style>
<body><canvas width="600" height="400"></canvas>
</body>
</html>
<script>// 获取节点let canvas = document.querySelector('canvas');// 获取上下文let ctx = canvas.getContext('2d');// 绘制矩形的第一种方法：参数为x,y,w,h;x:表示距离水平轴的距离，y表示距离上面顶部的距离，w表示100宽度，h表示高度200// 这种方法是不能设置填充颜色的ctx.strokeRect(100,200,100,200);// 第二种：填充矩形，参数和上面一样// 注意：必须要在绘制图形之前填充颜色ctx.fillStyle = 'skyblue';ctx.fill();ctx.fillRect(300,200,100,200);</script>

canvas绘制圆形

arc(x,y,redius,startAngle,endAngle,anticlockwise)

x:圆心的x坐标
y:圆心的y坐标
redius:半径
startAngle:开始角度
endAngle:结束角度
anticlockwise：是否逆时针（true）逆时针，false顺时针

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {padding: 0;margin: 0;}canvas {border: 1px solid rgb(32, 30, 30);}
</style>
<body><canvas width="600" height="400"></canvas>
</body>
</html>
<script>// 获取canvaslet canvas = document.querySelector('canvas')// 获取上下文let ctx = canvas.getContext('2d')// 绘制圆形// 开始绘制ctx.beginPath();// 绘制圆形的方法：x,y,r,起始弧度，结束弧度，是否逆时针，360°=2.PIctx.arc(100,100,50,0,2 * Math.PI,true);// 是指填充颜色ctx.fillStyle = 'red';ctx.fill()// 绘制圆ctx.stroke();// 绘制第二个圆// 注意：弧度有一个计算// 2 * PI * 弧度 = 360ctx.beginPath();ctx.arc(200,200,50,0,1,false);ctx.stroke();</script>

清除画布和绘制文字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {padding: 0;margin: 0;}canvas {border: 1px solid rgb(32, 30, 30);}
</style>
<body><canvas width="600" height="400"></canvas>
</body>
</html>
<script>// 获取节点let canvas = document.querySelector('canvas')// 获取上下文let ctx = canvas.getContext('2d')// 绘制矩形ctx.fillRect(100,200,100,200);// 清除画布// 清除全部画布// ctx.clearRect(0,0,600,400);// 清除部分画布// 表示x,y,宽度50，高度100ctx.clearRect(100,200,50,100);// 绘制文字// 设置文字大小ctx.font = "20px 微软雅黑";ctx.fillStyle = 'red';// 绘制文字// 参数表示：需要的文字，x,y坐标ctx.fillText("数据可视化",50,20)</script>

绘制柱状图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {padding: 0;margin: 0;}/* canvas {border: 1px solid rgb(201, 109, 109);} */
</style>
<body><canvas width="800" height="420"></canvas>
</body>
</html>
<script>// 获取节点let canvas = document.querySelector('canvas');// 获取上下文let ctx = canvas.getContext('2d');// 绘制文字ctx.font = '16px 微软雅黑';ctx.fillText('数据可视化',50,80);// 绘制主线ctx.moveTo(100,100);ctx.lineTo(100,400);ctx.lineTo(700,400);// 连接点ctx.stroke();// 其他线ctx.moveTo(100,100);ctx.lineTo(700,100);ctx.fillText('150',70,110);ctx.moveTo(100,160);ctx.lineTo(700,160);ctx.fillText('120',70,170);ctx.moveTo(100,220);ctx.lineTo(700,220);ctx.fillText('90',70,230);ctx.moveTo(100,280);ctx.lineTo(700,280);ctx.fillText('60',70,290);ctx.moveTo(100,340);ctx.lineTo(700,340);ctx.fillText('30',70,350);ctx.fillText('0',80,400);ctx.stroke();// 绘制水平轴底部的线ctx.moveTo(250,400);ctx.lineTo(250,410);// 底部的文字ctx.fillText('食品',170,415);ctx.moveTo(400,400);ctx.lineTo(400,410);ctx.fillText('数码',310,415);ctx.moveTo(550,400);ctx.lineTo(550,410);ctx.fillText('服饰',460,415);ctx.fillText('箱包',600,415);ctx.stroke();// 绘制矩形ctx.fillStyle = 'red'ctx.fillRect(120,200,100,200)
</script>

svg 基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0;padding: 0;}.box {width: 800px;height: 800px;}
</style>
<body><!-- svg双闭合标签：默认宽度和高度300*150，svg绘制图形务必在svg标签内部绘制图形 --><svg class="box"><!-- x1 y1第一个点的坐标，x2 y2第二个点的坐标，stroke表示绘制line标签用于绘制直线--><line x1="100" y1="100" x2="200" y2="200" stroke="red"></line><!-- 绘制折线 --><!-- <polyline points="x1 y1 x2 y2 x3 y3"></polyline> --><!-- 折线默认是填充黑色，fill-opacity去除填充，stroke表示折线颜色 --><polyline points="300 300, 50 100, 120 400" fill-opacity="0" stroke="cyan"></polyline><!-- 绘制矩形 --><!-- fill属性：表示填充颜色 --><rect x="400" y="400" width="150" height="50" fill="pink"></rect><!-- 绘制圆型 --><!-- cx，cy表示圆心，r半径，style表示样式 --><circle cx="370" cy="95" r="50" style="stroke: black; fill:none" ></circle><!-- 绘制椭圆 --><!-- cx,cy表示圆心，rx表示x轴半径，ry表示y轴半径 --><ellipse cx="500" cy="500" rx="100" ry="50" style="fill: black;"></ellipse><!-- 绘制多边形 --><!-- <polygon points="x1 y1, x2 y2, x3 y3"></polygon> --><polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0"></polygon><!-- 绘制任意图型 --><!-- M：移动到初始位置 L：画线 Z：将结束和开始点闭合--><!-- <path d="M x1 y1L x2 y2L x3 y3Z"></path> --><path d="M 10 10L 400 20L 30 120L 50 99Z"></path></svg>
</body>
</html>

ECharts

echarts基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入echarts依赖包 --><script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
</head>
<style>* {margin: 0;padding: 0;}div {width: 800px;height: 400px;}
</style>
<body><!-- 准备一个容器用于显示图标 --><div></div>
</body>
</html>
<script>// 基于准备好的dom初始化echarts实例let dom = document.querySelector('div');// 创建echarts实例let mycharts = echarts.init(dom);// console.log(mycharts);// 指定图表 的配置项与数据mycharts.setOption({// 图表的标题title:{// 主标题的设置text:'数据可视化',// 子标题subtext:'echarts基本使用',// 主标题的颜色textStyle:{color:'cyan'},// 设置标题的位置left:'center',},// x轴的配置项xAxis:{// 数据// data表示底部数据的设置data:['衣服','直播','游戏','电影']},// y轴的配置项yAxis:{// 显示y轴的线axisLine:{show:true},// 显示y轴的刻度axisTick:{show:true},},// 系列的设置：绘制什么样类型的图表，数据的展示都在这里series:[{// 图表类型的设置，bar表示柱状图,pie表示饼状图，line折线图type:'bar',data:[10,20,30,40],// 表示柱状图的颜色color:'blue',}]})
</script>

多个容器显示多个表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入echarts依赖包 --><script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
</head>
<style>* {margin: 0;padding: 0;}div {width: 800px;height: 400px;}
</style>
<body><!--准备一个容器用于显示图标 --><div class="box1"></div><div class="box2"></div>
</body>
</html>
<script>// 基于准备好的dom初始化echarts实例let dom1 = document.querySelector('.box1');let dom2 = document.querySelector('.box2')// 创建echarts实例let mycharts1 = echarts.init(dom1);let mycharts2 = echarts.init(dom2);// console.log(mycharts);// 指定图表 的配置项与数据mycharts1.setOption({// 图表的标题title:{// 主标题的设置text:'数据可视化',// 子标题subtext:'echarts基本使用',// 主标题的颜色textStyle:{color:'cyan'},// 设置标题的位置left:'center',},// x轴的配置项xAxis:{// 数据// data表示底部数据的设置data:['衣服','直播','游戏','电影']},// y轴的配置项yAxis:{// 显示y轴的线axisLine:{show:true},// 显示y轴的刻度axisTick:{show:true},},// 系列的设置：绘制什么样类型的图表，数据的展示都在这里series:[{// 图表类型的设置，bar表示柱状图,pie表示饼状图，line折线图type:'bar',data:[10,20,30,40],// 表示柱状图的颜色color:'blue',}]});// 第二个图表的配置项mycharts2.setOption({title:{// 主标题text:'折线图',left:'center',textStyle:{color:'red',},// 子标题subtext:'echarts基本使用',subtextStyle:{color:'skyblue',}},// x轴xAxis:{data:['星期一','星期二','星期三','星期四','星期五','星期六','星期日']},// y轴yAxis:{},// 图表类型与数据series:[{type:'line',data:[10,20,15,44,2,19,100],}]})
</script>

一个容器显示多个图表

 series:[{// 图表类型的设置，bar表示柱状图,pie表示饼状图，line折线图type:'bar',data:[10,20,30,40],// 表示柱状图的颜色color:'blue',},{// 折线图type:'line',data:[10,20,30,40]},{// 饼图type:'pie',// name:名称，value：值,显示文字data:[{name:'x',value:10},{name:'y',value:20},{name:'z',value:30},{name:'t',value:40}],// 饼图的宽度和高度width:150,height:150,// 饼图的位置left:150,top:100,// 表示饼图的半径radius:25,}]

数据集和dataset

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入echarts依赖包 --><script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
</head>
<style>* {margin: 0;padding: 0;}div {width: 800px;height: 400px;}
</style>
<body><!--准备一个容器用于显示图标 --><div class="box1"></div></body>
</html>
<script>// 基于准备好的dom初始化echarts实例let dom1 = document.querySelector('.box1');// 创建echarts实例let mycharts1 = echarts.init(dom1);// 数据集let data = [// 第一个是衣服，第二个是10表示柱状图数据，第二个表示折线图数据，第三个表示饼图名字是x的数据["衣服",10,46,'x',30],["直播",20,28,'y',40],["游戏",30,39,'z',20],["电影",5,10,'t',10],]// console.log(mycharts);// 指定图表 的配置项与数据mycharts1.setOption({// 设置字符集dataset:{// 数据源source:data},// 图表的标题title:{// 主标题的设置text:'数据可视化',// 子标题subtext:'echarts基本使用',// 主标题的颜色textStyle:{color:'cyan'},// 设置标题的位置left:'center',},// x轴的配置项xAxis:{// 数据// data表示底部数据的设置data:['衣服','直播','游戏','电影']},// y轴的配置项yAxis:{// 显示y轴的线axisLine:{show:true},// 显示y轴的刻度axisTick:{show:true},},// 系列的设置：绘制什么样类型的图表，数据的展示都在这里series:[{// 图表类型的设置，bar表示柱状图,pie表示饼状图，line折线图type:'bar',// data:[10,20,30,40],// 表示柱状图的颜色color:'blue',encode:{// encode表示可以定义data中的数据表示那个表，y表示data中柱状图的数据位置y:1}},{// 折线图type:'line',// data:[10,20,30,40]encode:{y:2}},{// 饼图type:'pie',// name:名称，value：值,显示文字// data:[{name:'x',value:10},{name:'y',value:20},{name:'z',value:30},{name:'t',value:40}],// 饼图的宽度和高度width:150,height:150,// 饼图的位置left:120,top:150,// 表示饼图的半径radius:25,encode:{// 饼图旁边的文字itemName:3,value:4}}]});// 第二个图表的配置项</script>

内置组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引包 --><script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
</head>
<style>* {margin: 0;padding: 0;}.box {width: 100%;height: 500px;/* border: 1px solid rgb(68, 60, 60); */}
</style>
<body><div class="box"></div>    
</body>
</html>
<script>// 获取容器let dom = document.querySelector('.box');// 初始化let mycharts = echarts.init(dom);// console.log(mycharts);// 配置数据mycharts.setOption({// 标题title:{text:'echarts组件'},xAxis:{data:['游戏','电影','直播','娱乐']},yAxis:{},series:[{name:'柱状图',type:'bar',data:[20,30,40,50]},{name:'折线图',type:'line',data:[30,40,50,60]}],// 提示组件tooltip:{// 提示框文字的颜色textStyle:{color:'red'}},// 系列切换组件legend:{data:['柱状图','折线图']},// 工具栏组件toolbox:{show:true,feature:{saveAsImage:{},dataZoom:{yAxisIndex:"none"},dataView:{readOnly:false},magicType:{type:['line','bar']},restore:{},}},// 缩放dataZoom:{},// 调整图表布局grid:{left:30}})
</script>

坐标体系

单个坐标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引包 --><script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
</head>
<style>* {margin: 0;padding: 0;}.box {width: 100%;height: 500px;/* border: 1px solid rgb(68, 60, 60); */}
</style>
<body><div class="box"></div>    
</body>
</html>
<script>// 获取容器let dom = document.querySelector('.box');// 初始化let mycharts = echarts.init(dom);// 一个坐标体系：散点图mycharts.setOption({// 标题title:{text:'一个坐标系'},// x轴xAxis:{// 可以是数据更加聚合type:'category'},// y轴yAxis:{},// 散点图series:[{type:'scatter',// 散点图数据data:[[10,20],[30,64],[20,16],[78,56],]}]})
</script>

双坐标体系

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引包 --><script src="https://cdn.staticfile.net/echarts/4.7.0/echarts.min.js"></script>
</head>
<style>* {margin: 0;padding: 0;}.box {width: 100%;height: 500px;/* border: 1px solid rgb(68, 60, 60); */}
</style>
<body><div class="box"></div>    
</body>
</html>
<script>// 获取容器let dom = document.querySelector('.box');// 初始化let mycharts = echarts.init(dom);// 双坐标mycharts.setOption({title:{text:'双坐标'},xAxis:{data:['游戏','直播','经济','娱乐']},yAxis:[{// 显示y轴的线axisLine:{show:true},// 显示y轴的刻度axisTick:{show:true}},{// 显示y轴的线axisLine:{show:true},// 显示y轴的刻度axisTick:{show:true}}],series:[{type:'line',data:[10,20,30,40],// 表示折线图用的是第一个y轴，索引值为0的y轴yAxisIndex:0,},{type:'bar',data:[5,10,20,30],// 表示柱状图用的是第二个y轴yAxisIndex:1}]})
</script>

前端开发工程师——数据可视化

canvas canvas绘制线段 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthd…...

编程日记 2024/5/28 8:11:57

【代码随想录训练营】【Day 35】【贪心-2】| Leetcode 122, 55, 45

【代码随想录训练营】【Day 35】【贪心-2】| Leetcode 122, 55, 45 需强化知识点贪心：跳跃游戏题目 122. 买卖股票的最佳时机 II 动态规划贪心：只要股票第二天涨了，前一天就买，第二就买 class Solution:def maxProfit(sel…...

编程日记 2024/5/28 8:10:56

【深度学习】ultralytics, yolo seg，实例分割图绘制，核对yolo seg 的txt标记对不对

这段代码的作用是从指定路径读取图像和标签文件，然后在图像上绘制分割区域和相关点，并保存最终的图像。以下是每个函数的具体作用及其解释： read_labels(label_path): 读取指定路径的标签文件。标签文件的每一行表示一个物体的分割信息&#…...

编程日记 2024/5/28 8:09:54

如何保证员工在精益变革中始终保持积极的态度？

在当今日新月异的商业环境中，企业为了保持竞争力，需要不断寻求创新和变革。精益变革作为一种提升效率和质量的有效手段，已逐渐成为企业转型升级的关键。然而，变革往往伴随着挑战和不确定性，如何保证员工在精益变革中始…...

编程日记 2024/5/28 8:08:53

【Java面试】三、Redis篇（下）

文章目录 1、抢券场景2、Redis分布式锁3、Redisson实现分布式锁4、Redisson实现的分布式锁是可重入锁5、Redisson实现分布式锁下的主从一致性6、面试 1、抢券场景正常思路： 代码实现： 比如优惠券数量为1。正常情况下：用户A的请求过来&a…...

编程日记 2024/5/28 8:07:52

GpuMall智算云：QwenLM/Qwen1.5/Qwen1.5-7B-Chat

Qwen 是阿里巴巴集团 Qwen 团队的大型语言模型和大型多模态模型系列，现在大型语言模型已经升级到 Qwen1.5 版本。 GpuMall智算云 | 省钱、好用、弹性。租GPU就上GpuMall,面向AI开发者的GPU云平台无论是语言模型还是多模态模型，都在大规模的多语言和多模…...

编程日记 2024/5/28 8:05:47

CentOS6.5 下编译 FreeSWITCH 1.2.23 版本

命题作文，慢慢来，一边做，一边记录。老古董了，查资料很不容易，但朋友说不着急，这很好。生命的意义在于折腾，不是吗？ 先下载 CentOS6.5， 查了下资料，最后…...

编程日记 2024/5/28 8:03:45

2024年03月 Python（三级）真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试（1~6级）全部真题・点这里一、单选题（共25题，共50分）第1题在Python中，hex(2023)的功能是？（） A：将十进制数2023转化成十六进制数 B：将十进制数2023转化成八进制数 C：将十六进制数2023转化成十进制数 D：将八进制数2023转化成十进制数答案：A …...

编程日记 2024/5/28 8:02:41

Redis篇数据的编码方式和单线程模型

编码方式和单线程模型一.redis中的数据类型二. Redis中查询编码方式命令三. 单线程模型四. 经典面试题,redis为何这么快?什么是IO多路复用? 一.redis中的数据类型在redis中,数据类型大致分为5种 1.字符串类型 2.哈希 3.列表 4.集合 5.有序集合 redis底层在实现这些数据结构…...

编程日记 2024/5/28 7:59:37

(delphi11最新学习资料) Object Pascal 学习笔记---第13章第4节（内存管理和接口）

13.4 内存管理和接口在第11章中，我介绍了接口的内存管理的关键要素。与对象不同，接口是受管理且具有引用计数。如我所提到的，接口引用会增加所引用对象的引用计数，但您可以声明接口引用为弱引用以禁用引用计数（但…...

编程日记 2024/5/28 7:58:36

【记录贴】docker镜像格式报错

1，错误内容最近想要补一补docker的基础知识，跟着练习的时候，发现下面的错误。换了其他镜像（docker pull ubantu）也存在同样的问题： 错误内容：docker: mediaType in manifest should be appli…...

编程日记 2024/5/28 7:57:34

设计模式 19 模板模式 Template Pattern

设计模式 19 模板模式 Template Pattern 1.定义模板模式（Template Pattern）是一种行为设计模式，它定义了一个算法的骨架，将一些步骤的具体实现延迟到子类中。在模板模式中，定义了一个抽象类，其中包含了一个…...

编程日记 2024/5/28 7:56:30

PHP如何实现实时计算使用者消耗服务器资源费用？

最近几天遇到一个客户，提出一个很有意思的东西！当然客户的项目方案这里不方便说，这里就假定客户的项目是腾讯云？哈哈哈哈哈以前客户的收费方案是按月、按季度、按年收费，现在半路杀出了很多程咬金，导致之前的收费方案有点儿贵，没啥性价比，那就搞一个看起来很“便宜”…...

编程日记 2024/5/28 7:54:28

在C++中自定义命名空间，在命名空间中定义string变量，同时定义一个函数实现单词逆置

代码 #include <iostream> #include <cstring> using namespace std; namespace my_space {string s;void reverse(string s);//定义逆置函数 } using namespace my_space; void my_space::reverse(string s){int lens.size();int i0;int jlen-1;while(i<j){//…...

编程日记 2024/5/28 7:50:24

【leetcode 141】环形链表——快慢指针（龟兔赛跑）

给你一个链表的头节点 head ，判断链表中是否有环。如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。为了表示给定链表中的环，评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置（…...

编程日记 2024/5/28 7:47:21

容器（Container）的详细介绍

容器，作为现代软件开发和部署的核心技术之一，已经成为云计算、微服务架构等领域的基石。容器技术通过提供轻量级的虚拟化环境，实现了应用程序的快速部署、迁移和扩展，极大地提高了软件开发的效率和灵活性。本文将详细介绍容器的概…...

编程日记 2024/5/28 7:45:19

Python 网格变换之平移、旋转、缩放、变换矩阵

网格变换一、平移1.1、代码示例1.2、结果示例二、旋转2.1、代码示例2.2、结果示例三、缩放3.1、代码示例3.2、结果示例四、变换矩阵4.1、代码示例4.2、结果示例一、平移网格平移：将网格沿着特定的方向移动一段距离。 1.1、代码示例...

编程日记 2024/5/28 7:44:17

freertos的信号量和互斥锁学习笔记

freertos的信号量和互斥锁有两个比较形象的例子可以解释两者的主要用途。第一个是信号量： 使用信号量的最初目的是为了给共享资源建立一个标志，该标志表示该共享资源被占用情况。这样，当一个任务在访问共享资源之前，可以先对这…...

编程日记 2024/5/28 7:42:14

C++基础——vector的详解与运用

vector的介绍文档介绍 vector是表示可变大小数组的序列容器。就像数组一样，vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问，和数组一样高效。但是又不像数组，它的大小是可以动态改变的，…...

编程日记 2024/5/28 7:41:13

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...

编程新知 2025/6/17 4:18:34

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...

编程新知 2025/6/17 1:31:50

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/6/15 17:37:51

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...

编程新知 2025/6/17 6:54:34

【磁盘】每天掌握一个Linux命令 - iostat

目录【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景注意事项【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/6/17 1:04:53

django filter 统计数量按属性去重

在Django中，如果你想要根据某个属性对查询集进行去重并统计数量，你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求： 方法1：使用annotate()和Count 假设你有一个模型Item，并且你想…...

编程新知 2025/6/15 19:00:14

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/6/16 17:24:42

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/6/16 11:39:36

稳定币的深度剖析与展望

一、引言在当今数字化浪潮席卷全球的时代，加密货币作为一种新兴的金融现象，正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而，加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下，稳定…...

编程新知 2025/6/16 17:40:56

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写实现一个RNN网络完成多分类任务判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/6/15 10:42:02