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

ECharts教程(详细)

news 2026/2/8 21:54:48

ECharts教程(详细)

非常全面的ECharts教程，非常全面的ECharts教程，目前线条/节点颜色、线条粗细、线条样式、线条阴影、线条平滑、线条节点大小、线条节点阴影、线条节点边框、线条节点边框阴影、工具提醒、工具提醒样式、工具自定义提醒、工具提醒背景、工具提醒边框、工具提醒阴影、工具提醒文字样式、工具箱、工具箱图标、工具箱标题、工具箱功能、类别显示、类别显示位置、类别显示图标、类别显示图标大小、类别显示图标间距、类别显示、类别显示位置、类别显示图标、类别显示图标大小、类别显示图标间距、类别显示图标文字大小、类别显示图标文字颜色、轴方向等多达四十个快捷键使多达四十个快捷键使用。

可以在使用过程中轻松应对大部分场景。由于时间原因，本文只更新全文的10%。以下时间会持续更新，ECharts 是一个常用的工具，但苦涩的 API 常常让人困惑。建议收藏一份，以方便使用时快速查找和解决问题。

文章目录

  • ECharts教程(详细)
    • 1：线条/节点颜色
    • 2：线条粗细
    • 3：线条样式
    • 4：线条阴影
    • 5：线条平滑
    • 6：线条节点大小
    • 7：线条节点阴影
    • 8：线条节点边框
    • 9：线条节点边框阴影
    • 10：工具提醒
    • 11：工具提醒样式
    • 12：工具自定义提醒
    • 13：工具提醒背景
    • 14：工具提醒边框
    • 15：工具提醒阴影
    • 16：工具提醒文字样式
    • 17：工具箱
    • 18：工具箱图标
    • 19：工具箱标题
    • 20：工具箱功能
    • 21：类别显示
    • 22：类别显示位置
    • 23：类别显示图标
    • 24：类别显示图标大小
    • 25：类别显示图标间距
    • 26：类别显示图标文字大小
    • 27：类别显示图标文字颜色
    • 28：轴方向（同其他，如柱状图等）
    • 29：坐标轴名称
    • 30：坐标轴名称位置
    • 31：坐标轴名称文字样式
    • 32：坐标轴名称与轴线之间的距离
    • 33：显示标签
    • 34：标签位置
    • 35：标签文字样式
    • 36：标签背景色
    • 37：标签边框
    • 38：标签边框圆角
    • 39：标签内边距
    • 40：标签阴影
    • 41：标签旋转
    • 42：持续更新中 ......

1：线条/节点颜色

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF'}}},}
]

在这里插入图片描述

2：线条粗细

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',width: 3}}},}
]

在这里插入图片描述

3：线条样式

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',width: 3,type: 'dashed'}}},}
]

在这里插入图片描述

4：线条阴影

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',width: 3,type: 'dashed',shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetY: 10}}},}
]

在这里插入图片描述

5：线条平滑

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',smooth: true,itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',width: 3,type: 'dashed',shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetY: 10}}},}
]

在这里插入图片描述

6：线条节点大小

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',symbol: 'circle',symbolSize: 20,itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',}}},}
]

在这里插入图片描述

7：线条节点阴影

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',symbol: 'circle',symbolSize: 20,itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',},areaStyle: {color: 'rgba(0, 0, 0, 0.5)'}}},}
]

在这里插入图片描述

8：线条节点边框

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',symbol: 'circle',symbolSize: 20,itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',},borderColor: '#409EFF',borderWidth: 5}},}
]

在这里插入图片描述

9：线条节点边框阴影

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',symbol: 'circle',symbolSize: 20,itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',},borderColor: '#409EFF',borderWidth: 5,shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetY: 10}},}
]

在这里插入图片描述

10：工具提醒

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',},}},tooltip: {trigger: 'axis'},}
]

在这里插入图片描述

11：工具提醒样式

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',},}},tooltip: {trigger: 'axis',formatter: '{b}<br />{a}: {c}'},}
]

在这里插入图片描述

12：工具自定义提醒

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',},}},tooltip: {trigger: 'axis',formatter: function (params) {return params[0].name + '<br /><span style="color:#409EFF">hello world<span>'}},}
]

在这里插入图片描述

13：工具提醒背景

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',},}},tooltip: {trigger: 'axis',backgroundColor: '#E6A23C'},}
]

在这里插入图片描述

14：工具提醒边框

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',},}},tooltip: {trigger: 'axis',borderColor: '#409EFF',borderWidth: 15},}
]

在这里插入图片描述

15：工具提醒阴影

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',},}},tooltip: {trigger: 'axis',shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10,shadowOffsetY: 10},}
]

在这里插入图片描述

16：工具提醒文字样式

series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',itemStyle: {normal: {color: '#E6A23C',lineStyle: {color: '#409EFF',},}},tooltip: {trigger: 'axis',textStyle: {color: '#409EFF',fontSize: 20}},}
]

在这里插入图片描述

17：工具箱

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},toolbox: {feature: {saveAsImage: {}}},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};

在这里插入图片描述

18：工具箱图标

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},toolbox: {feature: {saveAsImage: {icon: 'image://https://img.88icon.com/download/jpg/202001/388cc11b509232e7b5a2340742aba2ef.jpg!88con'}}},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};

在这里插入图片描述

19：工具箱标题

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},toolbox: {feature: {saveAsImage: {title: '保存为图片'}}},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};

在这里插入图片描述

20：工具箱功能

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},toolbox: {feature: {dataZoom: {},dataView: {readOnly: false},magicType: {type: ['line', 'bar']},restore: {},saveAsImage: {}}},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};

在这里插入图片描述

21：类别显示

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},legend: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},series: [{name:'Mon',data: [150, 230, 224, 218, 135, 147, 260],type: 'line'},{name:'Tue',data: [50, 30, 24, 18, 35, 47, 60],type: 'line'}]
};

在这里插入图片描述

22：类别显示位置

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},legend: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],left: 'right'},series: [{name:'Mon',data: [150, 230, 224, 218, 135, 147, 260],type: 'line'},{name:'Tue',data: [50, 30, 24, 18, 35, 47, 60],type: 'line'}]
};

在这里插入图片描述

23：类别显示图标

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},legend: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],icon: 'circle'},series: [{name:'Mon',data: [150, 230, 224, 218, 135, 147, 260],type: 'line'},{name:'Tue',data: [50, 30, 24, 18, 35, 47, 60],type: 'line'}]
};

在这里插入图片描述

24：类别显示图标大小

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},legend: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],icon: 'circle',itemWidth: 20,itemHeight: 20},series: [{name:'Mon',data: [150, 230, 224, 218, 135, 147, 260],type: 'line'},{name:'Tue',data: [50, 30, 24, 18, 35, 47, 60],type: 'line'}]
};

在这里插入图片描述

25：类别显示图标间距

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},legend: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],icon: 'circle',itemGap: 20},series: [{name:'Mon',data: [150, 230, 224, 218, 135, 147, 260],type: 'line'},{name:'Tue',data: [50, 30, 24, 18, 35, 47, 60],type: 'line'}]
};

在这里插入图片描述

26：类别显示图标文字大小

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},legend: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],icon: 'circle',textStyle: {fontSize: 20}},series: [{name:'Mon',data: [150, 230, 224, 218, 135, 147, 260],type: 'line'},{name:'Tue',data: [50, 30, 24, 18, 35, 47, 60],type: 'line'}]
};

在这里插入图片描述

27：类别显示图标文字颜色

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},legend: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],icon: 'circle',textStyle: {color: 'red'}},series: [{name:'Mon',data: [150, 230, 224, 218, 135, 147, 260],type: 'line'},{name:'Tue',data: [50, 30, 24, 18, 35, 47, 60],type: 'line'}]
};

在这里插入图片描述

28：轴方向（同其他，如柱状图等）

option = {xAxis: {type: 'value'},yAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};

在这里插入图片描述

29：坐标轴名称

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value',name: '我是Y轴名称'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};

在这里插入图片描述

30：坐标轴名称位置

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value',name: '我是Y轴名称',nameLocation: 'middle'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};

在这里插入图片描述

31：坐标轴名称文字样式

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value',name: '我是Y轴名称',nameTextStyle: {color: 'red',fontSize: 20}},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};

在这里插入图片描述

32：坐标轴名称与轴线之间的距离

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value',name: '我是Y轴名称',nameGap: 20},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};

在这里插入图片描述

33：显示标签

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',label: {show: true}}]
};

在这里插入图片描述

34：标签位置

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',label: {show: true,position: 'left'}}]
};

在这里插入图片描述

35：标签文字样式

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',label: {show: true,position: 'left',textStyle: {color: 'red',fontSize: 20}}}]
};

在这里插入图片描述

36：标签背景色

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',label: {show: true,textStyle: {color: 'red',fontSize: 20},backgroundColor: 'yellow'}}]
};

在这里插入图片描述

37：标签边框

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',label: {show: true,borderColor: 'blue',borderWidth: 2}}]
};

在这里插入图片描述

38：标签边框圆角

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',label: {show: true,borderRadius: 10}}]
};

在这里插入图片描述

39：标签内边距

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',label: {show: true,borderColor: 'blue',borderWidth: 5,borderRadius: 10,padding: 10}}]
};

在这里插入图片描述

40：标签阴影

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',label: {show: true,borderColor: 'blue',borderWidth: 1,padding: 10,shadowColor: 'red',shadowBlur: 10,shadowOffsetX: 1,shadowOffsetY: 1}}]
};

在这里插入图片描述

41：标签旋转

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',label: {show: true,rotate: 45}}]
};

在这里插入图片描述

42：持续更新中 …

如果命名不合适，或者遇到这里没有收录的内容，请留言，我会以更快的速度更新。

目前只更新了比较常用的部分，以后会持续更新…

相关文章：

ECharts教程(详细)

ECharts教程(详细) 非常全面的ECharts教程&#xff0c;非常全面的ECharts教程&#xff0c;目前线条/节点颜色、线条粗细、线条样式、线条阴影、线条平滑、线条节点大小、线条节点阴影、线条节点边框、线条节点边框阴影、工具提醒、工具提醒样式、工具自定义提醒、工具提醒背景…...

编程日记 2023/3/2 10:05:46

pinia

目录一、介绍二、快速上手1.安装2.基本使用与state3.actions的使用4.getters的使用5.storeToRefs的使用6.pinia模块化三、数据持久化1.安装2.使用插件3.模块开启持久化4.按需缓存模块的数据一、介绍 pinia从使用角度和之前Vuex几乎是一样的&#xff0c;比Vuex更简单了。 在Vu…...

编程日记 2023/3/2 10:04:42

mysql中insert语句的五种用法

文章目录前言一、values参数后单行插入二、values参数后多行插入三、搭配select插入数据四、复制旧表的信息到新表五、搭配set插入数据总结前言 insert语句是标准sql中的语法&#xff0c;是插入数据的意思。在实际应用中&#xff0c;它也演变了很多种用法来实现特殊的功能&…...

编程日记 2023/3/2 10:03:39

YOLOV7模型调试记录

先前的YOLOv7模型是pytorch重构的&#xff0c;并非官方提供的源码&#xff0c;而在博主使用自己的数据集进行实验时发现效果并不理想&#xff0c;因此生怕是由于源码重构导致该问题&#xff0c;此外还需进行对比实验&#xff0c;因此便从官网上下载了源码&#xff0c;进行调试运…...

编程日记 2023/3/2 10:02:34

模拟光伏不确定性——拉丁超立方抽样生成及缩减场景（Matlab全代码）

光伏出力的不确定性主要源于预测误差，而研究表明预测误差（e）服从正态分布且大概为预测出力的10%。本代码采用拉丁超立方抽样实现场景生成[1,2]、基于概率距离的快速前代消除法实现场景缩减[3]，以此模拟了光伏出力的不确定性。与风电不确定性模拟不同之处在于——光伏存在0出…...

编程日记 2023/3/2 10:01:22

Elasticsearch聚合查询速览

Es 数据分析工具 - Elasticsearch Aggregations &#xff08;聚合查询&#xff09; 官方文档 Aggregations | Elasticsearch Guide [7.15] | Elastic 1. Bucket aggregations 桶聚合 that group documents into buckets, also called bins, based on field values, ranges, o…...

编程日记 2023/3/2 10:00:15

CEC2017:鱼鹰优化算法（Osprey optimization algorithm，OOA）求解cec2017（提供MATLAB代码）

一、鱼鹰优化算法简介 鱼鹰优化算法&#xff08;Osprey optimization algorithm&#xff0c;OOA&#xff09;由Mohammad Dehghani 和 Pavel Trojovsk于2023年提出&#xff0c;其模拟鱼鹰的捕食行为。 鱼鹰是鹰形目、鹗科、鹗属的仅有的一种中型猛禽。雌雄相似。体长51-64厘米…...

编程日记 2023/3/2 9:59:08

Vue3 企业级项目实战：通关 Vue3 企业级项目开发，升职加薪快人一步

Vue3 企业级项目实战 - 程序员十三 - 掘金小册Vue3 Element Plus Spring Boot 企业级项目开发&#xff0c;升职加薪&#xff0c;快人一步。。「Vue3 企业级项目实战」由程序员十三撰写&#xff0c;2744人购买https://s.juejin.cn/ds/S2RkR9F/ 课程介绍 很高兴为大家介绍这个…...

编程日记 2023/3/2 9:58:02

vue样式绑定（v-if）

文章目录一.第一次用vue框架二.要求:1.定义两种样式&#xff0c;一种描述正确的状态&#xff0c;一种描述错误的状态。2.在结构代码中定义一个块&#xff0c;实现绑定正确的样式状态。3.定义一个按钮&#xff0c;实现正确和错误两种状态的class切换。三.源代码四.效果一.第一次…...

编程日记 2023/3/2 9:56:53

无需公网IP，安全稳定实现U8C异地访问

用友是全球领先的企业云服务与软件提供商&#xff0c;在财务、人力、供应链、采购、制造、营销、研发、项目、资产、协同等领域为客户提供数字化、智能化、社会化的企业云服务产品与解决方案。 U8C是用友针对成长型、创新型企业&#xff0c;提供企业级ERP整体解决方案。在系统…...

编程日记 2023/3/2 9:55:46

Graph Neural Network(GNN)图神经网络

Graph Neural Network(GNN)图神经网络&#xff0c;是一种旨在对图结构数据就行操作的深度学习算法。它可以很自然地表示现实世界中的很多问题&#xff0c;包括社交网络&#xff0c;分子结构和交通网络等。GNN旨在处理此类图结构数据&#xff0c;并对图中的节点和边进行预测或执…...

编程日记 2023/3/2 9:54:34

JSTL核心库的简单使用

JSTL核心库的简单使用 7.1考试重点 7.1.1c:out输出数据 考试重点就是c的相关的 jar包下载地址:Apache Tomcat - Apache Taglibs Downloads 看会典型应用就可以<% page contentType"text/html;charsetUTF-8" language"java" %> <% taglib uri"…...

编程日记 2023/3/2 9:53:29

ffmpeg.dll丢失怎么办，有什么修复ffmpeg.dll的方法

如果你在运行某些音视频软件或游戏时遇到了“ffmpeg.dll丢失”的错误消息&#xff0c;这意味着你的Windows系统中缺少了ffmpeg.dll文件&#xff0c;这是一个必要的动态链接库&#xff08;DLL&#xff09;文件&#xff0c;用于支持许多音视频软件和游戏的运行。在这篇文章中&…...

编程日记 2023/3/2 9:52:20

【学习笔记】NOIP爆零赛9

这场考炸了&#xff0c;不过也还好&#xff0c;正好给自己警醒的作用 t1t1t1应该是想到正解了&#xff0c;就是最后边界那个地方还是没有想清楚&#xff0c;哎这种交互题卡询问次数还是挺难受的&#xff0c;并且似乎我对于这种细节并不能很好把握。然后就少了50pts50pts50pts是…...

编程日记 2023/3/2 9:51:14

SpringMVC的常用组件和工作流程及部分注解解析

一丶SpringMVC常用的组件 1.前端控制器DispatcherServlet 作用&#xff1a;统一处理请求和响应。除此之外还是整个流程控制的中心&#xff0c;由 DispatcherServlet 来调用其他组件&#xff0c;处理用户的请求 接收请求&#xff0c;响应结果&#xff0c;相当于转发器&#xff…...

编程日记 2023/3/2 9:48:58

创建Firebase项目并接入Firebase推送： Firebase Cloud Messaging (FCM)

1.FCM简介&#xff1a;Firebase Cloud Messaging (FCM) 是一种跨平台消息传递解决方案&#xff0c;可供您可靠地传递消息&#xff0c;而且还是免费的服务。支持 Android&#xff0c;IOS,Web,Flutter,Unity.消息类型可以使用 FCM 向客户端发送两种类型的消息&#xff1a;通知消息…...

编程日记 2023/3/2 9:47:49

MyBatis的简单使用

MyBatis是一个优秀的持久型框架用于简化JDBC开发&#xff0c;JDBC的原生写法普遍都很麻烦&#xff0c;还要写原汁原味的sql语句&#xff0c;mybatis将很多东西都放到了配置文件里面然后用少量代码简化了免除了几乎所有的JDBC代码以及设定参数和获取结果集的工作。MyBatis 可以通…...

编程日记 2023/3/2 9:46:44

最新的Windows docker安装方法

什么是Docker&#xff1f;关于Docker的相关概述&#xff0c;请看&#xff1a;Docker_面向架构编程的博客-CSDN博客在Windows10 or Windows11中安装docker主要就两步&#xff1a;1.安装wsl22. 安装docker一、安装WSL2安装wslwsl --install然后重启一下电脑在cmd窗口可以查看自己…...

编程日记 2023/3/2 9:45:39

2023软件测试工程师涨薪攻略，3年如何达到30K

1.软件测试如何实现涨薪 首先涨薪并不是从8000涨到9000这种涨薪&#xff0c;而是从8000涨到15K加到25K的涨薪。基本上三年之内就可以实现。 如果我们只是普通的有应届毕业生或者是普通本科那我们就只能从小公司开始慢慢往上走。 有些同学想去做测试&#xff0c;是希望能够日…...

编程日记 2023/3/2 9:44:32

【算法题】1927. 求和游戏

题目&#xff1a; Alice 和 Bob 玩一个游戏&#xff0c;两人轮流行动&#xff0c;Alice 先手 。 给你一个 偶数长度 的字符串 num &#xff0c;每一个字符为数字字符或者 ‘?’ 。每一次操作中&#xff0c;如果 num 中至少有一个 ‘?’ &#xff0c;那么玩家可以执行以下操…...

编程日记 2023/3/2 9:43:24

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2026/1/20 19:54:35

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/12/16 18:04:55

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2026/2/6 3:24:58

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2026/1/26 13:29:47

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

编程新知 2025/11/5 10:19:24

游戏开发中常见的战斗数值英文缩写对照表

游戏开发中常见的战斗数值英文缩写对照表 基础属性&#xff08;Basic Attributes&#xff09; 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...

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

【Qt】控件 QWidget

控件 QWidget 一. 控件概述二. QWidget 的核心属性可用状态&#xff1a;enabled几何&#xff1a;geometrywindows frame 窗口框架的影响 窗口标题&#xff1a;windowTitle窗口图标&#xff1a;windowIconqrc 机制 窗口不透明度&#xff1a;windowOpacity光标&#xff1a;cursor…...

编程新知 2026/2/4 22:53:39