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

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

news 2025/9/4 4:36:58

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

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。具体可参…...

编程新知 2025/8/23 5:51:08

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/9/2 17:00:01

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台，覆盖应用全生命周期测试需求，主要提供五大核心能力： 测试类型检测目标关键指标功能体验基…...

编程新知 2025/9/1 18:12:52

基于服务器使用 apt 安装、配置 Nginx

🧾 一、查看可安装的 Nginx 版本首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/8/26 18:00:13

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...

编程新知 2025/8/14 14:59:56

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/8/1 7:53:11

GitHub 趋势日报 (2025年06月06日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2025/8/14 23:57:25