vue3项目页面实现echarts图表渐变色的动态配置

 完整代码可点击vue3项目页面实现echarts图表渐变色的动态配置-星林社区
https://www.jl1mall.com/forum/PostDetail?postId=202410151031000091552查看

一、背景

在开发可配置业务平台时，需要实现让用户对项目内echarts图表的动态配置，让用户脱离代码也能实现简单的图表样式配置。颜色作为图表样式的重要组成部分，其配置方式是项目要解决的重点问题。

二、难点整理

1.可以支持渐变的颜色选择器。

2.渐变色选择器取值结果与echarts图表配置要求的转换

3.图表配置资源存储与更新机制

4.渐变取色器位置配置导致取色器选中的色值发生变化触发事件change频繁被调用，引起最近选取颜色列表更新速率过快和图表刷新过快造成的资源浪费问题等。

三、解决方法

1.渐变取色器

因为开发时间问题，这里直接选用了TDesign的颜色选择器，具体可以参考TDesign官网

<div style="display: inline-block;vertical-align: middle;margin-right: 1rem;" ><t-color-pickerv-model="lineColor"defaultValue="#409cff":show-primary-color-preview="false":recent-colors="recentcolorsList"@change="changeLineColorThrottle"/>
</div>

2.渐变色值类型转换

tdesign取色器获取到的渐变色值为形如：linear-gradient(90deg,rgba(0, 0, 0, 1) 0%,rgb(73, 106, 220) 100%) 的css渐变色写法

echarts图表配置渐变色写法为：

"color":{"colorStops":[{"offset":0,"color":"#2378f7"},{"offset":0.5,"color":"#2378f7"},{"offset":1,"color":"#83bff6"}],"x":0,"y":0,"x2":1,"y2":0.5,"type":"linear","global":false
}

因此需要对两种类型进行转换。

1) rgb与hex色值表达转换
function hexToRgb(hex){let str = hex.replace("#", "");if (str.length % 3) {return "hex格式不正确！";}//获取截取的字符长度let count = str.length / 3;//根据字符串的长度判断是否需要 进行幂次方let power = 6 / str.length;let r = parseInt("0x" + str.substring(0 * count, 1 * count)) ** power;let g = parseInt("0x" + str.substring(1 * count, 2 * count)) ** power;let b = parseInt("0x" + str.substring(2 * count)) ** power;return `rgb(${r}, ${g}, ${b})`;
}
function rgbToHex(rgb){let arr = rgb.replace("rgb", "").replace("(", "").replace(")", "").split(",");// 转十六进制let h = parseInt(arr[0]).toString(16);let e = parseInt(arr[1]).toString(16);let x = parseInt(arr[2]).toString(16);if(h.length<2){h = '0' + h }if(e.length<2){e = '0' + e }if(x.length<2){x = '0' + x }return "#" + h + e + x;
}
2）角度与坐标参数x,x2,y,y2的转化

css中角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。【注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。】

linear-gradient() 函数会绘制出一系列与渐变线垂直的彩色线，每条线都匹配与渐变线相交点的颜色。这条渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点、终点，以及两者之间的可选的中间点（中间点可以有多个）。起点是渐变线上代表起始颜色值的点。终点是渐变线上代表最终颜色值的点。这两个点都是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的。

echarts图表实际上是基于canvas画布展示的，因此需要将起点和终点转换在canvas坐标系中。

角度与坐标参数转化

css渐变角度与canvas坐标参数转换过程

需要注意的是，渐变线与矩形的交点可能落在水平线上，也可能落在垂直线上，所以需要分情况进行计算，实现代码如下：

function calculateGradientCoordinate(width,height,angle = 180,) {if (angle >= 360) angle = angle - 360;if (angle < 0) angle = angle + 360;angle = Math.round(angle);// 当渐变轴垂直于矩形水平边上的两种结果if (angle === 0) {return {x0: Math.round(width / 2),y0: height,x1: Math.round(width / 2),y1: 0,};}if (angle === 180) {return {x0: Math.round(width / 2),y0: 0,x1: Math.round(width / 2),y1: height,};}// 当渐变轴垂直于矩形垂直边上的两种结果if (angle === 90) {return {x0: 0,y0: Math.round(height / 2),x1: width,y1: Math.round(height / 2),};}if (angle === 270) {return {x0: width,y0: Math.round(height / 2),x1: 0,y1: Math.round(height / 2),};}// 从矩形左下角至右上角的对角线的角度const alpha = Math.round((Math.asin(width / Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))) *180) /Math.PI,);// 当渐变轴分别于矩形的两条对角线重合情况下的四种结果if (angle === alpha) {return {x0: 0,y0: height,x1: width,y1: 0,};}if (angle === 180 - alpha) {return {x0: 0,y0: 0,x1: width,y1: height,};}if (angle === 180 + alpha) {return {x0: width,y0: 0,x1: 0,y1: height,};}if (angle === 360 - alpha) {return {x0: width,y0: height,x1: 0,y1: 0,};}// 以矩形的中点为坐标原点，向上为Y轴正方向，向右为X轴正方向建立直角坐标系let x0 = 0,y0 = 0,x1 = 0,y1 = 0;// 当渐变轴与矩形的交点落在水平线上if (angle < alpha || // 处于第一象限(angle > 180 - alpha && angle < 180) || // 处于第二象限(angle > 180 && angle < 180 + alpha) || // 处于第三象限angle > 360 - alpha // 处于第四象限) {// 将角度乘以（PI/180）即可转换为弧度const radian = (angle * Math.PI) / 180;// 当在第一或第四象限，y是height / 2，否则y是-height / 2const y = angle < alpha || angle > 360 - alpha ? height / 2 : -height / 2;const x = Math.tan(radian) * y;// 当在第一或第二象限，l是width / 2 - x，否则l是-width / 2 - xconst l =angle < alpha || (angle > 180 - alpha && angle < 180)? width / 2 - x: -width / 2 - x;const n = Math.pow(Math.sin(radian), 2) * l;x1 = x + n;y1 = y + n / Math.tan(radian);x0 = -x1;y0 = -y1;}// 当渐变轴与矩形的交点落在垂直线上if ((angle > alpha && angle < 90) || // 处于第一象限(angle > 90 && angle < 180 - alpha) || // 处于第二象限(angle > 180 + alpha && angle < 270) || // 处于第三象限(angle > 270 && angle < 360 - alpha) // 处于第四象限) {// 将角度乘以（PI/180）即可转换为弧度const radian = ((90 - angle) * Math.PI) / 180;// 当在第一或第二象限，x是width / 2，否则x是-width / 2const x =(angle > alpha && angle < 90) || (angle > 90 && angle < 180 - alpha)? width / 2: -width / 2;const y = Math.tan(radian) * x;// 当在第一或第四象限，l是height / 2 - y，否则l是-height / 2 - yconst l =(angle > alpha && angle < 90) || (angle > 270 && angle < 360 - alpha)? height / 2 - y: -height / 2 - y;const n = Math.pow(Math.sin(radian), 2) * l;x1 = x + n / Math.tan(radian);y1 = y + n;x0 = -x1;y0 = -y1;}// 坐标系更改为canvas标准，Y轴向下为正方向x0 = Math.round(x0 + width / 2);y0 = Math.round(height / 2 - y0);x1 = Math.round(x1 + width / 2);y1 = Math.round(height / 2 - y1);return { x0, y0, x1, y1 };
}

echarts坐标参数取值范围为0~1，在传参时可以直接将width和height设置为1。

坐标参数转换回角度时，需要注意角度所在象限区域进行分情况讨论。

x=0.5 y=0, x2=0.5, y2=1 从上到下 

x=1 y=0.5, x2=0.5, y2=0 从下到上 

x=0 y=0.5, x2=1, y2=0.5 从左到右 

x=1 y=0.5, x2=0, y2=0.5 从右到左

实现代码如下：

function getDeg(x1,y1,x2,y2){var x = Math.abs(x1 - x2);var y = Math.abs(y1 - y2);var tan = x / y;var radina = Math.atan(tan); //用反三角函数求弧度var deg = Math.floor(180 / (Math.PI / radina)) || 0; //将弧度转换成角度/*** 根据目标点判断象限（注意是笛卡尔坐标）* 一： +，+* 二： -，+* 三： -，+* 一： +，-*///  * 二、三象限要加 180°if (x2 < 0 && y2 >= 0) {deg = 180 + deg;}if (x2 < 0 && y2 < 0) {deg = 180 + deg;}// 一、二象限 === 0 就是 180°if (deg === 0) {if ((x2 >= 0 && y2 > 0) || (x2 <= 0 && y2 > 0)) {deg = 180 + deg;}}if ((x2 <= 0 && y2 > 0)) {deg = 180 + deg;}if ((x2 >= 0 && y2 > 0) ) {deg = - (180 + deg);}return deg;
}

此外还需要对色值RGB和HEX进行转换，代码如下：

function hexToRgb(hex){let str = hex.replace("#", "");if (str.length % 3) {return "hex格式不正确！";}//获取截取的字符长度let count = str.length / 3;//根据字符串的长度判断是否需要 进行幂次方let power = 6 / str.length;let r = parseInt("0x" + str.substring(0 * count, 1 * count)) ** power;let g = parseInt("0x" + str.substring(1 * count, 2 * count)) ** power;let b = parseInt("0x" + str.substring(2 * count)) ** power;return `rgb(${r}, ${g}, ${b})`;
}
function rgbToHex(rgb){let arr = rgb.replace("rgb", "").replace("(", "").replace(")", "").split(",");// 转十六进制let h = parseInt(arr[0]).toString(16);let e = parseInt(arr[1]).toString(16);let x = parseInt(arr[2]).toString(16);if(h.length<2){h = '0' + h }if(e.length<2){e = '0' + e }if(x.length<2){x = '0' + x }return "#" + h + e + x;
}

以上就是css线性渐变格式与echarts线性渐变格式最为关键的转换过程。

3.图表配置资源存储与更新机制

图表的整体配置资源项目通过store进行存储，在页面挂载时进行读取解析。因为onMounted生命周期内，chart配置数据可能还未存储至store中，在此阶段进行初始化可能造成属性值不存在等报错。由于配置组件在配置时已经记录配置值，如果对chartOption进行持续监听会造成冲突，导致取色器异常。因此需要设置flag值判断页面是否为初始化。初始化代码如下：

watch(()=>chartOption,()=>{//chartOption的反复修改和监听导致的冲突if(pageUpdateFlag.value){if('lineStyle' in chartOption.value['series'][0]){if('type' in chartOption.value['series'][0]['lineStyle'] ){lineType.value = chartOption.value['series'][0]['lineStyle']['type']}if('width' in chartOption.value['series'][0]['lineStyle'] ){lineWidth.value = chartOption.value['series'][0]['lineStyle']['width']}if('color' in chartOption.value['series'][0]['lineStyle'] ){let color = chartOption.value['series'][0]['lineStyle']['color']if(typeof color !== 'string' && 'type' in color){let x = color.xlet y = color.ylet x1 = color.x2let y1 = color.y2let deg = 90deg = getDeg(x-0.5,y-0.5,x1-0.5,y1-0.5)let colorStr = ''//渐变颜色选择器里的color要用rgb形式for(let i =0 ; i < color.colorStops.length;i++){let curColor = color.colorStops[i].colorif( color.colorStops[i].color[0] == '#'){curColor = hexToRgb(color.colorStops[i].color[0])}colorStr = colorStr + ',' + color.colorStops[i].color + ' ' + color.colorStops[i].offset*100 + '%'}let str = "linear-gradient("+deg+'deg'+colorStr+')'lineColor.value = str}else{lineColor.value = color}}}if('showBackground' in chartOption.value['series'][0]){isArea.value = trueif('color' in chartOption.value['series'][0]['areaStyle']){let color = chartOption.value['series'][0]['areaStyle']['color']if(typeof color !== 'string' && 'type' in color){let x = color.xlet y = color.ylet x1 = color.x2let y1 = color.y2let deg = 90deg = getDeg(x-0.5,y-0.5,x1-0.5,y1-0.5)let colorStr = ''//渐变颜色选择器里的color要用rgb形式for(let i =0 ; i < color.colorStops.length;i++){let curColor = color.colorStops[i].colorif( color.colorStops[i].color[0] == '#'){curColor = hexToRgb(color.colorStops[i].color[0])}colorStr = colorStr + ',' + color.colorStops[i].color + ' ' + color.colorStops[i].offset*100 + '%'}let str = "linear-gradient("+deg+'deg'+colorStr+')'areaColor.value = str}else{areaColor.value = color}}}else {isArea.value = false}pageUpdateFlag.value = false} 
},{deep:true})

获取到取色值时，需要对chart配置数据更新，并发送图表配置修改信号，让更新数据同步渲染至图表中。

    let curColor = valueif(curColor.includes('linear')){//渐变色,需要解析转换let colorObj = parseLinearColor(curColor)chartOption.value['series'][0]['areaStyle']['color'] = deepcopy(colorObj)}else{chartOption.value['series'][0]['areaStyle']['color'] = curColor}store.changeChartIsChange(true,"option")
4.利用节流函数解决change事件频繁调用导致的一系列冲突问题

在使用TDesign取色器时，通过滑动条调整渐变色偏移量会导致change事件频繁调用，如果直接在change函数中获取value添加到最近使用颜色列表就会造成最近使用列表颜色刷新过快，近似值添加过多的问题。因此需要使用节流函数来避免这一问题。同时change的频繁调用也会导致图表数据更新过快，造成资源浪费等问题。因此本项目使用了节流函数对change的整体事件进行了处理。

节流函数：

import { ref } from 'vue';export default function useThrottle(fn, delay) {const canRun = ref(true);return (...args) => {if (!canRun.value) return;canRun.value = false;setTimeout(() => {fn(...args);canRun.value = true;}, delay);};
};

取色器change事件：

const changeLineColorThrottle = useThrottle(changeLineColor,400)
function changeLineColor(value,context){addRecentColor(recentcolorsList,value)//不能直接value及其值进行任何//判断取色为纯色还是渐变,注意value为rgb(115, 171, 230)或linear-gradient(90deg,rgb(241, 29, 0) 0%,rgb(73, 106, 220) 100%)console.log('判断取色为纯色还是渐变',value,lineColor.value,lineColor.value.includes('linear'));let curColor = valueif(curColor.includes('linear')){//渐变色,需要解析转换let colorObj = parseLinearColor(curColor)chartOption.value['series'][0]['lineStyle']['color'] = deepcopy(colorObj)}else{chartOption.value['series'][0]['lineStyle']['color'] = curColor}//！！注意：频繁设置状态可能紊乱，导致渐变取色器为黑色store.changeChartIsChange(true,"option")
}

添加最近使用颜色函数和格式转换函数：

function addRecentColor(recentcolorsList,color){//添加前应判断数组内是否有重复的色值，有则删除原色值for(let i =0 ; i < recentcolorsList.value.length; i++){if(recentcolorsList.value[i] == color){recentcolorsList.value.splice(i,1)}}recentcolorsList.value.unshift(color)
}
function parseLinearColor(curColor){//滑动取色时会造成颜色添加频繁let colorObj = {"colorStops": [],"x":0,"y":0,"x1":0,"y1":0,"type":"linear","global":false}let deg = curColor.split('linear-gradient(')[1].split('deg')[0]let colorList = curColor.split('deg')[1].split(',r')for(let i = 1; i < colorList.length; i++ ){let arr = colorList[i].split(") ")let color = 'r'+arr[0]+')'if(color.includes('rgba')){color = color.replace('rgba','rgb')}color = rgbToHex(color)let offset = arr[1].split("%")[0]/100colorObj.colorStops.push({"offset":offset,"color":color})}let {x0,y0,x1,y1} = calculateGradientCoordinate(1,1,deg)colorObj.x = x0colorObj.x2 = x1colorObj.y = y0colorObj.y2 = y1console.log(deg,x0,y0,x1,y1,"deg转化x0,y0,x1,y1");return colorObj
}

以上就是实现echarts图表渐变色的动态配置的关键步骤。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

计算机导论

计算机导论

概述 计算机简史 1935年代&#xff0c;英国数学家图灵(Alan Turing)提出“图灵机”&#xff0c;奠定了计算机的理论基础。 1952年&#xff0c;冯诺依曼确定了计算机由运算器、控制器、存储器、输入、输出等5部分组成&#xff08;Von Neumann 体系结构&#xff09;。 60年代…
阅读更多...
k8s备份恢复（velero）

k8s备份恢复（velero）

velero简介 velero官网&#xff1a; https://velero.io/ velero-github&#xff1a; https://github.com/vmware-tanzu/velero velero的特性 备份可以按集群资源的子集&#xff0c;按命名空间、资源类型标签选择器进行过滤&#xff0c;从而为备份和恢复的内容提供高度的灵活…
阅读更多...
【含开题报告+文档+PPT+源码】基于SSM框架的诗词吟诵知识学习系统的设计与实现

【含开题报告+文档+PPT+源码】基于SSM框架的诗词吟诵知识学习系统的设计与实现

开题报告 随着信息技术的迅猛发展和互联网的普及&#xff0c;在线教育逐渐成为现代教育的重要形式。在线学习平台以其便捷性、灵活性和个性化等特点&#xff0c;受到广大师生的青睐。特别是在线吟诵知识学习&#xff0c;已经成为许多学生提升自我修养、陶冶情操的重要途径。青…
阅读更多...
Google DeepMind推出DemoStart自主强化学习方法 利用少量示范样本实现复杂操作任务

Google DeepMind推出DemoStart自主强化学习方法 利用少量示范样本实现复杂操作任务

一直以来&#xff0c;研究人员都在试图开发出能够在现实环境中安全、高效地执行复杂任务&#xff08;如多指手操作&#xff09;的机器人技能。传统的机器人学习方法往往需要大量的实际数据&#xff0c;这不仅耗时耗力&#xff0c;还存在安全风险。因此&#xff0c;仿真环境下的…
阅读更多...
Netty简单应用

Netty简单应用

1.服务端构建 接收客户端请求&#xff0c;打印请求消息&#xff1b;消息采用内置String作为编码与解码器&#xff1b;开启信息输入监听线程&#xff0c;发送消息至客户端&#xff1b; 1.1 服务端消息处理类 import io.netty.channel.Channel; import io.netty.channel.Chann…
阅读更多...
双十一好物必买清单攻略，这几款双十一必入的宝藏好物分享

双十一好物必买清单攻略，这几款双十一必入的宝藏好物分享

随着双十一购物节的脚步日益临近&#xff0c;无数消费者都在期待着在这个年度大促中抢购到自己心仪已久的好物&#xff0c;为了帮助大家更好地规划购物计划&#xff0c;精选出真正值得入手的宝藏产品&#xff0c;我们特别整理了这份双十一好物必买清单攻略&#xff0c;无论你是…
阅读更多...
spring day1023

spring day1023

ok了家人们&#xff0c;今天继续学习spring框架&#xff0c; 七.Spring的注解开发 在开发中&#xff0c;配置文件中 Bean 标签会非常多&#xff0c;难以维护。怎么 办&#xff1f; 使用注解的形式替代 xml 配置&#xff0c;可以将一些繁杂的 spring 配置 从工程中消除掉&…
阅读更多...
业余时间试一试利用AI 人工智能赚钱

业余时间试一试利用AI 人工智能赚钱

内容创作与写作&#xff1a; 撰写文章&#xff1a;许多网站、博客和企业都需要大量的优质内容。利用 AI 工具如 ChatGPT 等&#xff0c;获取文章的思路、框架甚至初稿&#xff0c;然后根据自己的知识和经验进行修改、润色和完善。你可以在一些自由撰稿人平台、内容创作平台上承…
阅读更多...
智能园艺：Spring Boot植物健康系统

智能园艺：Spring Boot植物健康系统

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理植物健康系统的相关信息成为必然。开发合适…
阅读更多...
es索引库操作和使用RestHignLevelClient客户端操作es

es索引库操作和使用RestHignLevelClient客户端操作es

目录 es索引库操作 mapping映射操作 索引库的CURD操作 1.创建索引库和映射 ​编辑 2.查询索引库 3.删除索引库 4.修改索引库 5.总结 文档的CURD操作 1.新增文档 2.查询文档 3.删除文档 4.修改文档 全量修改 增量修改 5.总结 RestAPI 使用API例子 需要的数…
阅读更多...
一文掌握异步web框架FastAPI（五）-- 中间件（测试环境、访问速率限制、请求体解析、自定义认证、重试机制、请求频率统计、路径重写）

一文掌握异步web框架FastAPI（五）-- 中间件（测试环境、访问速率限制、请求体解析、自定义认证、重试机制、请求频率统计、路径重写）

接上篇：一文掌握异步web框架FastAPI（四）-CSDN博客 目录 七、中间件 15、测试环境中间件 16、访问速率限制中间件，即限制每个IP特定时间内的请求数（基于内存，生产上要使用数据库） 1）限制单ip访问速率 2）增加限制单ip并发（跟上面的一样，也是限制每个IP特定时间内的请…
阅读更多...
大模型算法二次开发，基本思路详细拆解

大模型算法二次开发，基本思路详细拆解

[ 导读 随着众多大模型相继问世&#xff0c;大模型二次开发、大模型微调成为一项热门技术。本文为大家总结了大模型二次开发的基本方法与思路&#xff0c;希望对大家有所帮助。 开发方法分类 1、领域知识注入&#xff1a;Continue PreTraining(增量预训练),一般垂直大模型是…
阅读更多...
（STM32笔记）十二、DMA的基础知识与用法

（STM32笔记）十二、DMA的基础知识与用法

我用的是正点的STM32F103来进行学习&#xff0c;板子和教程是野火的指南者。 之后的这个系列笔记开头未标明的话&#xff0c;用的也是这个板子和教程。 DMA的基础知识与用法 一、DMA功能框图1、DMA请求2、通道3、仲裁器 二、DMA传输设置1、数据来源与数据去向外设到存储器存储器…
阅读更多...
Lua环境安装

Lua环境安装

软考鸭微信小程序 学软考,来软考鸭! 提供软考免费软考讲解视频、题库、软考试题、软考模考、软考查分、软考咨询等服务 Lua是一种轻量级、小巧且易于嵌入应用程序的脚本语言&#xff0c;广泛用于游戏开发、Web开发、自动化脚本等领域。本文将详细介绍如何在不同操作系统上安装L…
阅读更多...
蓝桥杯注意事项

蓝桥杯注意事项

蓝桥杯注意事项 比赛注意事项 能暴力枚举就暴力枚举&#xff0c;能用简单的思路做就尽量用简单的思路做。认真审核题目的题意和输入输出的要求&#xff0c;避免因为误解题意而导致题目错误。对于提供多组测试样例或者需要对一个过程重复进行循环的代码&#xff0c;要时刻记住…
阅读更多...
六大设计原则之一——单一职责原则

六大设计原则之一——单一职责原则

单一职责原则 面向对象三大特性之一的 封装 指的就是将单一事物抽象出来组合成一个类&#xff0c;所以我们在设计类的时候每个类中处理的是单一事物而不是某些事物的集合。 设计模式中所谓的 单一职责原则(Single Responsibility Principle - SRP)&#xff0c;就是对一个类而…
阅读更多...
autMan奥特曼机器人-实时翻译的用法

autMan奥特曼机器人-实时翻译的用法

一、基本配置 访问并登录百度翻译开放平台&#xff1a;https://api.fanyi.baidu.com/ 进入开发者信息获取 APP ID和密钥&#xff0c;并开通“通用文本翻译”服务 autMan应用市场->我的->找到“实时翻译”插件安装后去点击“配参” 二、使用示例 假如你和一个俄国人聊…
阅读更多...
C程序设计语言精髓 单向链表

C程序设计语言精髓 单向链表

目录 单向链表---定义 单向链表---建立 单向链表---删除 单向链表---插入​ 单向链表---输出​ 单向链表---定义 单向链表---建立 单向链表---删除 单向链表---插入 单向链表---输出
阅读更多...
Visual Studio安装图文详解教程

Visual Studio安装图文详解教程

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 教程说明 本教程旨在详细介绍 Visual Studio 社区版的安装过程及其注意事项。 Visual Studio简介 Visual Studio 社区版功能完备且可扩展的免费 IDE&#xff0c;可用于创…
阅读更多...
【通俗理解】Neurosymbolic AI——融合神经网络与符号推理的智慧之力

【通俗理解】Neurosymbolic AI——融合神经网络与符号推理的智慧之力

【通俗理解】Neurosymbolic AI——融合神经网络与符号推理的智慧之力 关键词提炼 #Neurosymbolic AI #神经网络 #符号推理 #感知能力 #逻辑能力 #认知水平 #智慧与力量 第一节&#xff1a;Neurosymbolic AI的类比与核心概念 Neurosymbolic AI就像是给神经网络这位“大力士”…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023