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

在Vue3中使用Echarts的示例

news 来源：原创 2025/8/10 7:28:33

1.常用-引用ts文件方式

1.1 导出ts文件-一个简单的柱状图

export const baseBarChart = (xdata: string[], data: number[][], legendData: string[]) => {if (data.length === 0) {return noData;}// 定义颜色数组const color = ['#00CCCC','#FF9900','#1677DC','#FF6666','#B366FF','#6666FF','#3366CC','#0099CC','#00CC66','#98CB19','#FFCC00','#666699',];const maxDataValue = Math.max(...data.flat()); // 计算数据中的最大值const yAxisMax = Math.ceil(maxDataValue / 5) * 5; //  将最大值向上取整到最接近的5的倍数// 使用循环动态添加series,根据数组数目自动生成柱状图数量const seriseData = data.map((item, index) => {return {name: legendData[index],data: item,type: 'bar',// barWidth: 30,barMaxWidth: 30,xAxisIndex: 0,color: color[index], // 循环使用颜色数组label: {show: true, // 显示数值position: 'top', // 数值显示在柱子的顶部fontSize: 14, // 字体大小color: '#333333', // 字体颜色fontWeight: 'bold', // 字体加粗},};});// 完整的配置项let option: any = {tooltip: {trigger: 'axis',textStyle: {fontSize: 14,color: '#9A9A9A',},},grid: {containLabel: true,bottom: '15%',top: '10%',left: '2%',right: '2%',},xAxis: {type: 'category',data: xdata,axisLabel: {color: '#9a9a9a',fontSize: 12,interval: 'auto', // 自动隐藏部分标签（可根据需要调整为具体值）formatter: function (value: any) {// 截断过长的标签，并添加省略号return value.length > 2 ? value.slice(0, 2) + '...' : value;},},},yAxis: {type: 'value',min: 0,max: yAxisMax, // 动态设置最大值interval: yAxisMax / 5, // 根据最大值动态设置刻度间隔axisLabel: {color: '#9a9a9a',fontSize: 14,},},legend: {left: 'center',type: 'scroll',bottom: '2%',textStyle: {fontSize: 14,color: '#9A9A9A',},itemWidth: 16,itemHeight: 10,},series: seriseData,};return option;
};

1.2 vue文件-部分

   <div id="chartContainerBarTwo" ref="chartContainerBarTwo" class="chartContainerBarTwo"></div>

import { baseBarChart, baseLineChart, baseCircleChart } from '../../../echarts';
import { onMounted, ref, Ref, computed } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import * as echarts from 'echarts';
onMounted(() => {init();
});
function init() {initDeviceCountChartTwo();}const chartContainerBarTwo = ref<HTMLDivElement | null>(null);

第一种

const initDeviceCountChartTwo = async () => {// 初始化图表并获取实例const { setOptions, getInstance } = useECharts(chartContainerBarTwo as Ref<HTMLDivElement>);try {let legend: any = ['智能仪表'];let xdata: any = ['天津分公司', '深圳分公司', '海南分公司', '湛江分公司', '上海分公司'];let data: any = [[46224, 13021, 3791, 9072, 4557]];setOptions(baseBarChart(xdata, data, legend));// 获取图表实例并保存（如果需要）const currentChartInstance = getInstance();console.log('当前图表实例已保存：', currentChartInstance);loading1.value = false;} catch (error) {setOptions(baseBarChart([], [], []));loading1.value = false;}
};

第二种

const initDeviceCountChartTwo = async () => {const chart = echarts.init(chartContainerBarTwo.value);try {let legend: any = ['智能仪表'];let xdata: any = ['天津分公司', '深圳分公司', '海南分公司', '湛江分公司', '上海分公司'];let data: any = [[46224, 13021, 3791, 9072, 4557]];chart.setOption(baseBarChart(xdata, data, legend));loading1.value = false;} catch (error) {setOptions(baseBarChart([], [], []));loading1.value = false;}
};

PS：与之对应的还有图表resize函数，详情见博客解决 ECharts 切换图表时的 Resize 问题-CSDN博客

2.封装-ref作为传参

这是一个环形图ts文件，效果如下，中间可放图片，内外圈颜色不一样，可设置题目

import * as echarts from 'echarts';
import { type ECharts, init } from 'echarts';
import type { Ref } from 'vue';
import imagePath from '../views/index/instrumentDevice/img/circle-center.png';
/*** 初始化 ECharts 图表的通用函数* @param chartRef - Vue 的 ref，指向 DOM 元素* @param data - 图表数据* @param colors - 渐变颜色外圈数组* @param colorse - 渐变颜色内圈数组* @param title - 图表标题（可选）* @returns ECharts 实例*/
function initEcharts(chartRef: Ref<HTMLDivElement | null>,data: any[],colors: string[][],colorse: string[][],title?: string,
): ECharts | null {// 检查 ref 是否有效if (!chartRef.value) {console.error('ECharts ref is not valid');return null;}// 创建 ECharts 实例const myChart = init(chartRef.value);// 计算总计const total = data.reduce((acc, item) => acc + Number(item.value), 0);// 图表配置const chartData = {title: {text: title,left: 'left',top: '5%',textStyle: {fontSize: 18,fontWeight: 'bold',color: '#ffffff',},},legend: {top: '90%',left: 'center',itemWidth: 16,itemHeight: 10,textStyle: {color: '#ffffff',},},tooltip: {show: false,formatter: (params: any) => {const percent = ((params.value / total) * 100).toFixed(1);return `总计: ${params.value} (${percent}%)`;},trigger: 'item',confine: true,backgroundColor: '#1E2857',borderColor: '#1E2857',color: '#fff',textStyle: {color: '#fff',},axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985',},},},grid: {top: '0%',left: '0%',right: '0%',bottom: '0%',},graphic: [{type: 'image',style: {image: imagePath,width: 150,height: 150,},left: 'center',top: 'center',},{type: 'text', // 添加文本元素style: {text: `总计: ${total}`, // 显示总计信息fontSize: 16,fontWeight: 'bold',fill: '#ffffff', // 文本颜色},left: 'center', // 水平居中top: '85%', // 距离底部 5%},],series: [// 外圈{type: 'pie',radius: ['50%', '60%'],avoidLabelOverlap: true,z: 11,label: {show: true, // 外圈显示标签position: 'outside',formatter: (params: any) => {const percent = ((params.value / total) * 100).toFixed(1);return `${params.name} ${percent}%`;},fontSize: 14,color: '#ffffff',},labelLine: {show: true,length: 10,length2: 20,position: 'outside',lineStyle: {color: '#ffffff',},},data: data.map((item, index) => ({...item,itemStyle: {color: new echarts.graphic.RadialGradient(0, 0, 1, [{ offset: 0, color: colors[index][0] },{ offset: 1, color: colors[index][1] },]),},label: {show: item.value > 0, // 当值大于 0 时显示标签},labelLine: {show: item.value > 0, // 当值大于 0 时显示引导线},})),},// 内圈阴影{type: 'pie',radius: ['40%', '60%'],avoidLabelOverlap: true,z: 10,itemStyle: {borderRadius: 2,borderWidth: 1,shadowBlur: 20,shadowColor: '#1569ff',shadowOffsetX: 0,shadowOffsetY: 0,},label: {show: false, // 内圈不显示标签},labelLine: {show: false, // 内圈不显示引导线},data: data.map((item, index) => ({...item,itemStyle: {color: new echarts.graphic.RadialGradient(0, 0, 1, [{ offset: 0, color: `${colors[index][0]}4D` }, //渐变色透明度{ offset: 1, color: `${colors[index][0]}4D` },]),},})),},],animation: false,};// 设置图表配置myChart.setOption(chartData, true);return myChart;
}
export default initEcharts;

vue文件-部分

<div v-if="currentChart === 'SIS'" ref="echartsRefSIS" class="content_echarts"></div>const echartsRefSIS = ref<HTMLDivElement | null>(null);

 let ref: Ref<HTMLDivElement | null> | null = null;ref = echartsRefSIS;// 初始化 ECharts 实例const myChart = initEcharts(ref, annularList, gradientColors, gradientColorse, title);currentChartInstance = myChart; // 保存当前图表实例

在Vue3中使用Echarts的示例

1.常用-引用ts文件方式 1.1 导出ts文件-一个简单的柱状图 export const baseBarChart (xdata: string[], data: number[][], legendData: string[]) > {if (data.length 0) {return noData;}// 定义颜色数组const color [#00CCCC,#FF9900,#1677DC,#FF6666,#B366FF,#666…...

编程日记 2025/8/10 7:28:33

TCP协议的多线程应用、多线程下的网络编程

DAY13.2 Java核心基础多线程下的网络编程基于单点连接的方式，一个服务端对应一个客户端，实际运行环境中是一个服务端需要对应多个客户端创建ServerSocketNable类，多线程接收socket对象 public class ServerSocketNable implements Run…...

编程日记 2025/8/5 1:23:47

每日学习Java之一万个为什么（待补充）

Git分支操作 git branch 分支名 git branch -v git checkout -b 分支名 git checkout 分支名 git merge 分支名 git branch -d | -D 分支名Git冲突 git同名文件合并的最基本单位是行。同名文件同一行不同就会发生冲突。解决办法：及时沟通，手动更改&…...

编程日记 2025/8/5 4:47:17

设计C语言的单片机接口

一、主要内容 (一)控制引脚 1、定义管脚 // 定义管脚的结构体 struct pin{ int id; // 管脚编号 int mode; // 模式，输入为1，输出为0 int pull; // 输入电阻 int driver; // 功率 } 2、输出电平语法： void pin_output(s…...

编程日记 2025/8/5 8:00:53

博客迁移----宝塔面板一键迁移遇到问题

前景阿里云轻量级服务器到期了，又免费领了个ESC， 安转了宝塔面板。现在需要迁移数据，使用宝塔面板一键迁移功能，完成了数据的迁移，改了域名的解析，现在进入博客是显示502 bad grateway 宝塔搬家参考链接…...

编程日记 2025/8/4 4:37:39

抽象工厂模式 (Abstract Factory Pattern)

抽象工厂模式 (Abstract Factory Pattern) 是一种创建型设计模式，它提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。一、基础 1. 意图提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。 2. …...

编程日记 2025/8/10 4:49:06

LeetCode 第14~16题

目录 LeetCode 第14题：最长公共前缀 LeetCode 第15题：三数之和 LeetCode 第16题：最接近的三数之和 LeetCode 第14题：最长公共前缀题目描述编写一个函数来查找字符数组中的最长公共前缀。如果不存在公共前缀，返回字符…...

编程日记 2025/8/9 19:54:34

深入了解Linux —— git三板斧

版本控制器git 为了我们方便管理不同版本的文件，就有了版本控制器； 所谓的版本控制器，就是能够了解到一个文件的历史记录（修改记录）；简单来说就是记录每一次的改动和版本迭代的一个管理系统，同…...

编程日记 2025/8/8 14:52:03

再学：abi编码地址类型与底层调用

目录 1.内置全局变量及函数 2.abi 3.地址类型 4.transfer 1.内置全局变量及函数 2.abi data就是abi编码 abi描述：以json格式表明有什么方法 3.地址类型 4.transfer x.transfer:合约转给x call 和 delegatecall 是 Solidity 中用于底层合约调用的函数&#xff0…...

编程日记 2025/7/30 23:01:02

Redis的消息队列是怎么实现的

Redis 本身并不是一个专门的消息队列系统，但它的 List、Pub/Sub 和 Stream 数据结构可以用来实现消息队列的功能。以下是 Redis 实现消息队列的几种常见方式： 1. 基于 List 实现消息队列 Redis 的 List 是一个双向链表，支持在头部和尾部进行高效的插入和删除操作，非常适合…...

编程日记 2025/8/10 1:08:03

图论入门【数据结构基础】：什么是树？如何表示树？

图论是计算机科学和数学中的一个重要分支，研究图的结构及其性质。之前我们介绍了图的基本概念和表示：图论入门【数据结构基础】：什么是图？如何表示图？，本文将介绍树的基本概念、性质及其在计算机科学中的应…...

编程日记 2025/8/5 3:58:33

微信小程序订阅消息发送消息，点击消息进入小程序页面

1、在小程序官网订阅消息选用或创建消息模板获取模板ID可多个如图： 2、微信小程序前端页面发送请求订阅权限请求模板id的权限可以是一个可以是多个，用户同意订阅，获取code传递给后端——后端拿到code生成唯一的openid用于发送订阅消息注…...

编程日记 2025/8/6 6:19:27

基于小参数量大语言模型（Small Language Models） ---- 在制造业落地降本增效应用：可行性研究初探

文章大纲一、引言二、小参数量模型概述基本技术要求小参数量大语言模型在制造业场景中的适用性分析（一）排产优化（二）错误根因分析三、制造业小参数量大语言模型开源解决方案简介Bert 系列模型Google微软MetaMistral AI国产解决方案四、技术实现方案进行逻辑（一）模型选择…...

编程日记 2025/8/9 17:00:40

pandas中excel自定义单元格颜色

writerpd.ExcelWriter(filepathf05教师固定学生占比1月{today}.xlsx,engineopenpyxl) df.to_excel(writer,sheet_name明细) piv1.to_excel(writer,sheet_name1月分布) wswriter.book.create_sheet(口径) ws.cell(1,1).value综合占比： ws.cell(1,2).value固定学生占比…...

编程日记 2025/8/6 8:52:44

MySQL事务：确保数据一致性的关键机制

目录 1. 为什么需要事务？ 2. 什么是事务？ 3. 事务的四大特性 3.1 原子性（Atomicity） 3.2 一致性（Consistency） 3.3 隔离性（Isolation） 3.4 持久性（Durability&…...

编程日记 2025/8/5 6:31:28

图论入门【数据结构基础】：什么是图？如何表示图？

图（Graph） 是一种非线性数据结构，用于表示对象之间的关系。图由顶点（Vertex） 和边（Edge） 组成，其中顶点表示对象，边表示对象之间的关系。图广泛应用于计算机科学、数学…...

编程日记 2025/8/6 6:51:57

SpringBoot中使用AJ-Captcha实现行为验证码(滑动拼图、点选文字)

简介 AJ-Captcha行为验证码，包含滑动拼图、文字点选两种方式，UI支持弹出和嵌入两种方式。后端提供Java、Golang实现，前端提供了php、angular、html、vue、uni-app、flutter、android、ios等代码示例。点击前往AJ-Captcha代码仓库引入Maven…...

编程日记 2025/8/6 21:35:42

【国际研讨会】2025年3-5月通信、算法、电气工程、自动化等领域国际学术会议征稿开启！大型学术盛宴！

【国际研讨会】2025年3-5月通信、算法、电气工程、自动化等领域国际学术会议征稿开启！大型学术盛宴！ 【国际研讨会】2025年3-5月通信、算法、电气工程、自动化等领域国际学术会议征稿开启！大型学术盛宴！ 文章目录【国际研讨会】…...

编程日记 2025/8/6 10:45:40

AI战略家：X厂三年复盘大纲——业务与组织双视角深度拆解

一、业务负责人视角：从0到1与从1到100的核心能力模型 （一）阶段能力要求与问题预判 1. 从0到1：破局能力核心能力升级框架： 需求洞察三阶漏斗： 行业需求池：广泛收集行业内的各种需求&#xff…...

编程日记 2025/8/6 21:36:20

LuaJIT 学习（4）—— FFI 语义

文章目录 C Language SupportC Type Conversion RulesConversions from C types to Lua objects例子：访问结构体成员 Conversions from Lua objects to C typesConversions between C types例子：修改结构体成员 Conversions for vararg C function argum…...

编程日记 2025/8/6 20:38:34

剑指 Offer II 078. 合并排序链表

comments: true edit_url: https://github.com/doocs/leetcode/edit/main/lcof2/%E5%89%91%E6%8C%87%20Offer%20II%20078.%20%E5%90%88%E5%B9%B6%E6%8E%92%E5%BA%8F%E9%93%BE%E8%A1%A8/README.md 剑指 Offer II 078. 合并排序链表题目描述给定一个链表数组，每个链…...

编程日记 2025/8/7 1:49:32

go回调函数的使用

在Go语言中，回调函数可以有参数，也可以没有参数。它们的定义和使用方式略有不同，但本质上都是将函数作为参数传递给另一个函数，并在适当的时候调用它。以下是带参数和不带参数的回调函数的示例和说明。 1. 不带参数的回调函数不…...

编程日记 2025/8/9 1:12:10

CBNet：一种用于目标检测的复合骨干网架构之论文阅读

摘要现代顶级性能的目标检测器在很大程度上依赖于骨干网络，而骨干网络的进步通过探索更高效的网络结构带来了持续的性能提升。本文提出了一种新颖且灵活的骨干框架——CBNet，该框架利用现有的开源预训练骨干网络，在预训练-微调范式下构建高…...

编程日记 2025/8/8 11:02:09

k8s中PAUSE容器与init容器比较 local卷与hostpath卷比较

目录一、PAUSE容器与INIT容器比较 1. Pause 容器作用特点示例 2. Init 容器作用特点示例 3. Pause 容器 vs Init 容器 4. 总结这两个哪个先启动呢？ 详细启动顺序为什么 Pause 容器最先启动？ 示例总结二、local卷与hostpath卷…...

编程日记 2025/8/8 3:52:18

施耐德PLC仿真软件Modbus tcp通讯测试

安装仿真软件：EcoStruxure™ Control Expert - PLC 仿真器下载地址：https://www.schneider-electric.cn/zh/download/document/EIO0000001719/ 配置CPU： 切换至仿真模式，系统托盘中出现仿真器图标新建变量test，地址…...

编程日记 2025/8/6 6:14:19

TCP、UDP协议的应用、ServerSocket和Socket、DatagramSocket和DatagramPacket

DAY13.1 Java核心基础 TCP协议 TCP 协议是面向连接的运算层协议，比较复杂，应用程序在使用TCP协议之前必须建立连接，才能传输数据，数据传输完毕之后需要释放连接就好比现实生活中的打电话，首先确保电话打通了才能进…...

编程日记 2025/8/5 11:22:21

【HarmonyOS Next】常见的字节转换

【HarmonyOS Next】常见的字节转换字节转换、位运算在实际开发中具有广泛的应用价值，特别是在处理字节级数据时发挥着重要作用。例如，在网络通信中用于大小端序转换，在数据解析时进行位提取操作。这些特性使得位运算在USB通信、蓝牙&#x…...

编程日记 2025/8/5 20:11:28

Redis-锁-商品秒杀防止超卖

一、秒杀（Seckill） 1. 定义秒杀：短时间内（如1秒内）大量用户同时抢购限量低价商品的营销活动。典型场景：双11热门商品抢购、小米手机首发、演唱会门票开售。 2. 技术挑战挑战点说明后果…...

编程日记 2025/8/5 22:49:54

RHCE(RHCSA复习：npm、dnf、源码安装实验)

七、软件管理 7.1 rpm 安装 7.1.1 挂载 [rootlocalhost ~]# ll /mnt total 0 drwxr-xr-x. 2 root root 6 Oct 27 21:32 hgfs[rootlocalhost ~]# mount /dev/sr0 /mnt #挂载 mount: /mnt: WARNING: source write-protected, mounted read-only. [rootlocalhost ~]# [rootlo…...

编程日记 2025/8/6 14:55:22

KNN算法性能优化技巧与实战案例

KNN算法性能优化技巧与实战案例 K最近邻（KNN）在分类和回归任务中表现稳健，但其计算复杂度高、内存消耗大成为IT项目中的主要瓶颈。以下从算法优化、数据结构、工程实践三方面深入解析性能提升策略，并附典型应用案例。一、核心性…...

编程日记 2025/8/6 23:20:44

安装并使用anaconda(宏观版)

conda安装 windows 安装 1 官网下载-下载地址 2 配置环境 - 安装目录 bin,script 三个填入环境变量(windows “系统属性” -> “高级系统设置” -> “环境变量” ) 这些值可以被运行在操作系统上的程序使用。它是一个通用的概念，在不同的操作系统和应用程序…...

编程日记 2025/8/10 5:32:18

Qwen2.5-VL 开源视觉大模型，模型体验、下载、推理、微调、部署实战

一、Qwen2.5-VL 简介 Qwen2.5-VL，Qwen 模型家族的旗舰视觉语言模型，比 Qwen2-VL 实现了巨大的飞跃。欢迎访问 Qwen Chat （Qwen Chat）并选择 Qwen2.5-VL-72B-Instruct 进行体验。 1. 主要增强功能 1）直观地理解事物&…...

编程日记 2025/8/10 2:10:59

【sql靶场】第18-22关-htpp头部注入保姆级教程

目录【sql靶场】第18-22关-htpp头部注入保姆级教程 1.回顾知识 1.http头部 2.报错注入 2.第十八关 1.尝试 2.爆出数据库名 3.爆出表名 4.爆出字段 5.爆出账号密码 3.第十九关 4.第二十关 5.第二十一关 6.第二十二关【sql靶场】第18-22关-htpp头部注入保姆级教程…...

编程日记 2025/8/7 3:49:45

SpringBoot实现发邮件功能+邮件内容带模版

发送简单邮件模版邮件 1.pom引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mail</artifactId><version>2.5.13</version></dependency><dependency><groupId&…...

编程日记 2025/8/10 1:37:24

C# NX二次开发：矩形阵列和线性阵列等多种方法讲解

大家好，今天讲一些关于阵列相关的UFUN函数。 UF_MODL_create_linear_iset (view source)：这个函数为创建矩形阵列。 intmethodInputMethod: 0 General 1 Simple 2 Identicalchar *number_in_xInputNumber in XC direction.char *distance_xInputSpac…...

编程日记 2025/8/6 7:02:30

OpenBMC：BmcWeb添加路由1 getParameterTag

BmcWeb对于路由的设计其实是参考了Crow BMCWEB_ROUTE(app, "/upload/image/<str>").privileges({{"ConfigureComponents", "ConfigureManager"}}).methods(boost::beast::http::verb::post, boost::beast::http::verb::put)([](const cro…...

编程日记 2025/8/9 23:18:13

【Android性能】Systrace分析

1，分析工具 1，Systrace新UI网站 Perfetto UI 2，Systrace抓取可通过android sdk中自带的systrace抓取，路径一般如下，..\AppData\Local\Android\Sdk\platform-tools， 另外需要安装python2.7，…...

编程日记 2025/8/9 21:15:57

多种语言请求API接口方法

在当今的互联网世界中，应用程序编程接口（API）扮演着至关重要的角色，它们允许不同的服务和应用程序之间进行数据交换和功能共享。无论是获取天气预报、社交媒体数据还是进行支付操作，API都是背后的关键。不同的编程语言…...

编程日记 2025/8/7 23:32:41

【css酷炫效果】纯CSS实现瀑布流加载动画

【css酷炫效果】纯CSS实现瀑布流加载动画缘创作背景html结构css样式完整代码基础版进阶版(无限往复加载) 效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492012 缘创作随缘，不定时更新。创作…...

编程日记 2025/8/8 6:18:23

【第15届蓝桥杯】软件赛CB组省赛

个人主页：Guiat 归属专栏：算法竞赛真题题解文章目录 A. 握手问题（填空题）B. 小球反弹（填空题）C. 好数D. R格式E. 宝石组合F. 数字接龙G. 爬山H. 拔河正文总共8道题。 A. 握手问题（填空题&…...

编程日记 2025/8/8 19:26:20

20242817李臻《Linux⾼级编程实践》第四周

20242817李臻《Linux⾼级编程实践》第4周一、AI对学习内容的总结第5章 Linux进程管理 5.1 进程基本概念进程与程序的区别程序：静态的二进制文件（如/bin/ls），存储在磁盘中，不占用运行资源。进程：程…...

编程日记 2025/8/9 4:30:02

【AI大模型】提示词（Prompt）工程完全指南：从理论到产业级实践

【AI大模型】提示词（Prompt）工程完全指南：从理论到产业级实践一、Prompt 提示词介绍：AI的“密码本” 1. Prompt的底层定义与价值本质：Prompt是人与AI模型的“协议语言”，通过文本指令激活模型的特定推理…...

编程日记 2025/8/6 6:22:01

HTML中required与aria required区别

在HTML中，required和aria-required"true"都用于标识表单字段为必填项，但它们的作用和适用场景有所不同： 1. required 属性 • 功能属性：属于HTML5原生属性，直接控制表单验证逻辑。 • 作用： • …...

编程日记 2025/8/9 23:54:49

MySQL 锁

MySQL中最常见的锁有全局锁、表锁、行锁。全局锁全局锁用于锁住当前库中的所有实例，也就是说会将所有的表都锁住。一般用于做数据库备份的时候就需要添加全局锁，数据库备份的时候是一个表一个表备份，如果没有加锁的话在备份的时候会有其他的…...

编程日记 2025/8/4 12:39:09

halcon几何测量(一)3d_position_of_rectangle

目录一、提取目标区域，选择不和边缘相交的目标二、计算矩形工件的姿态三、显示矩形的立体结构一、提取目标区域，选择不和边缘相交的目标 1、提取目标区域：mean_image 、dyn_threshold 、fill_up 、connection 、select_shape 2、选择不和边…...

编程日记 2025/8/5 1:23:58

docker可视化之dpanel

1. 使用镜像加速 vim /etc/docker/daemon.json{ "registry-mirrors": ["https://docker.registry.cyou","https://docker-cf.registry.cyou","https://dockercf.jsdelivr.fyi","https://docker.jsdelivr.fyi","https…...

编程日记 2025/8/8 15:50:34

Swagger 从 .NET 9 中删除：有哪些替代方案

微软已经放弃了对 .NET 9 中 Swagger UI 包 Swashbuckle 的支持。他们声称该项目“不再由社区所有者积极维护”并且“问题尚未得到解决”。这意味着当您使用 .NET 9 模板创建 Web API 时，您将不再拥有 UI 来测试您的 API 端点。我们将调查是否可以在 .NET 9 中使用…...

编程日记 2025/8/6 5:11:12

Qt 绘图

一、基础概念 ‌Qt 绘图基于 QPainter（画家类）、QPaintDevice（绘图设备）和 QPaintEngine（绘图引擎）的协作实现。其中： QPainter 提供绘制图形、文本和图像的接口（如 drawLine()、d…...

编程日记 2025/8/9 20:09:56

用 Vue 3.5 TypeScript 重新开发3年前甘特图的核心组件

回顾 3年前曾经用 Vue 2.0 开发了一个甘特图组件，如今3年过去了，计划使用Vue 3.5 TypeScript 把组件重新开发，有机会的话再开发一个React版本。关于之前的组件以前文章 Vue 2.0 甘特图组件下面录屏是是用 Vue 3.5 TypeScript 开发的目前…...

编程日记 2025/8/9 9:33:58

Python使用总结之Flask构建文件服务器，通过网络地址访问本地文件

Python使用总结之Flask构建文件服务器，通过网络地址访问本地文件在 Web 开发中，静态文件（如图片、CSS、JavaScript）的管理是基础且重要的环节。Flask 提供的 send_from_directory 函数为开发者提供了灵活的文件服务解决方案。本文将详细解析其原理、用法及最佳实践。一…...

编程日记 2025/8/9 15:25:04

1.常用-引用ts文件方式

1.1 导出ts文件-一个简单的柱状图

1.2 vue文件-部分

第一种

第二种

2.封装-ref作为传参

相关文章：