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.rhkb.cn/news/455354.html

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

相关文章

2024下半年软考机考模拟系统已开放！小伙伴们速速练起来

2024下半年软考机考模拟系统已开放！小伙伴们速速练起来

千呼万唤使出来&#xff0c;软考机考的模拟练习系统已于10月23号正式开放&#xff01; 今年报名计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试&#xff08;软考&#xff09;的小伙伴们千万不要忘记哦&#xff01; 01、开放时间 据中国计算机技术职业资格网发…
阅读更多...
基于AI识别数据的Vue.js图像框选标注

基于AI识别数据的Vue.js图像框选标注

在数字化时代&#xff0c;图像识别技术的应用越来越广泛&#xff0c;尤其是在车牌识别、人脸识别等领域。本文将介绍如何使用Vue.js框架和JavaScript创建一个交互式组件&#xff0c;该组件不仅允许用户在图片上绘制多个区域&#xff0c;加载文字&#xff0c;还提供了清空功能。…
阅读更多...
外包干了2个月，技术明显退步

外包干了2个月，技术明显退步

回望过去&#xff0c;我是一名普通的本科生&#xff0c;于2019年通过校招有幸加入了南京某知名软件公司。那时的我&#xff0c;满怀着对未来的憧憬和热情&#xff0c;投入到了功能测试的岗位中。日复一日&#xff0c;年复一年&#xff0c;转眼间&#xff0c;我已经在这个岗位上…
阅读更多...
常用shell指令

常用shell指令

这些指令通常在adb shell环境中使用&#xff0c;或者通过其他方式&#xff08;如SSH&#xff09;直接在设备的shell中使用。 文件操作命令 ls&#xff1a;列出目录的内容 ls /sdcard cd&#xff1a;改变目录 cd /sdcard/Download pwd&#xff1a;打印当前工作目录 pwd cat&…
阅读更多...
CV2通过一组轮廓点扣取图片

CV2通过一组轮廓点扣取图片

代码如下&#xff1a; import cv2 import numpy as np# 读取原始图像 original_image cv2.imread(img.png)# 定义一组轮廓点&#xff08;这里只是示例&#xff0c;你需要根据实际情况替换&#xff09; points np.array([[50, 100], [100, 200], [200, 150], [200, 50], [160…
阅读更多...
负载均衡服务器攻击怎么解决最有效？

负载均衡服务器攻击怎么解决最有效？

负载均衡服务器攻击怎么解决最有效&#xff1f;常见的有效解决方法包括&#xff1a;使用SYNCookie机制、限制ICMP包速率、基于源IP的连接速率限制、检测并丢弃异常IP包、配置访问控制列表&#xff08;ACL&#xff09;、设置虚拟服务器/服务器连接数量限制、设置HTTP并发请求限制…
阅读更多...
【景观生态学实验】实验二 景观类型分类

【景观生态学实验】实验二 景观类型分类

实验目的 1.掌握ArcGIS软件的基本操作&#xff1a;通过课堂理论学习与实验课的实际动手操作&#xff0c;学习并熟练掌握如何利用ArcGIS软件对遥感影像进行一些较为基础的数据处理与分析工作&#xff0c;具体包括波段合成、图像镶嵌、图像裁剪与图像分类等&#xff1b; 2.熟悉…
阅读更多...
基于STM32设计的养殖场环境监测系统(华为云IOT)

基于STM32设计的养殖场环境监测系统(华为云IOT)

文章目录 一、前言1.1 项目介绍【1】项目开发背景【2】设计实现的功能【3】项目硬件模块组成【4】需求总结 1.2 设计思路1.3 系统功能总结1.4 开发工具的选择【1】设备端开发【2】上位机开发 二、部署华为云物联网平台2.1 物联网平台介绍2.2 开通物联网服务2.3 创建产品&#x…
阅读更多...
微信小程序-获取头像和昵称

微信小程序-获取头像和昵称

一.获取头像 1.将button组件open-type的值设置为chooseAvatar 2.通过bindchooseavatar事件回调获取到头像信息的临时路径 wxml文件代码&#xff1a; <view> <button class"btn" open-type"chooseAvatar" bindchooseavatar"chooseavatar&qu…
阅读更多...
生成式人工智能

生成式人工智能

这个接龙的生成就是概率式的&#xff0c;下一个接龙的字是有概率的 本身就是在做文字接龙的游戏&#xff0c;不会搜索网上的资料
阅读更多...
Zig语言通用代码生成器：逻辑，冒烟测试版发布

Zig语言通用代码生成器：逻辑，冒烟测试版发布

#1024程序员节 | 征文# Zig语言通用代码生成器&#xff1a;逻辑&#xff0c;冒烟测试版发布 Zig语言是一种新的系统编程语言&#xff0c;其生态位类同与C&#xff0c;是前一段时间大热的rust语言的竞品。它某种意义上的确非常像rust&#xff0c;尤其是在开发过程中无穷无尽抛错…
阅读更多...
【哈工大_操作系统理论】L282930 生磁盘的使用从生磁盘到文件文件使用磁盘的实现

【哈工大_操作系统理论】L282930 生磁盘的使用从生磁盘到文件文件使用磁盘的实现

L4.3 生磁盘的使用 1、认识磁盘 选择磁道旋转扇区数据读写 哪一个柱面 C哪一个磁头 H哪一个扇区 S 2、第一层抽象&#xff1a;盘块号block 发送盘块号block&#xff0c;磁盘驱动根据 block 计算出 cyl、head、sec&#xff08;CHS&#xff09; 磁盘访问时间主要是寻道时间…
阅读更多...
精准布局：探索CSS中的盒子固定定位的魅力

精准布局：探索CSS中的盒子固定定位的魅力

一、概念 固定定位使元素相对于浏览器窗口进行定位&#xff0c;无论网页如何滚动&#xff0c;固定定位的元素也会保持在相同的位置&#xff0c;设置固定定位的元素脱离文档流。 二、语法结构 <style>选择器{/* fixed 固定定位 */position: fixed;}</style> 与绝…
阅读更多...
LeetCode练习-删除链表的第n个结节

LeetCode练习-删除链表的第n个结节

大家好&#xff0c;依旧是你们的萧萧啊。 今天我们来练习一个经典的链表问题&#xff1a;删除链表的第n个节点。在这篇文章中&#xff0c;我们将深入分析这个问题&#xff0c;并给出一个有效的解决方案。 问题描述 给定一个链表&#xff0c;要求删除链表的倒数第n个节点&…
阅读更多...
WRB Hidden Gap，WRB隐藏缺口，MetaTrader 免费公式！（指标教程）

WRB Hidden Gap，WRB隐藏缺口，MetaTrader 免费公式！（指标教程）

WRB Hidden Gap MetaTrader 指标用于检测和标记宽范围的柱体&#xff08;非常长的柱体&#xff09;或宽范围的烛身&#xff08;具有非常长实体的阴阳烛&#xff09;。此指标可以识别WRB中的隐藏跳空&#xff0c;并区分显示已填补和未填补的隐藏跳空&#xff0c;方便用户一眼识别…
阅读更多...
GEE数据集：1984-2022 年间加拿大 6.5 亿公顷森林生态系统的年度优势树种（也称主要树种）地图

GEE数据集：1984-2022 年间加拿大 6.5 亿公顷森林生态系统的年度优势树种（也称主要树种）地图

目录 简介 数据集说明 空间信息 变量 代码 代码链接 下载链接 引用 许可 网址推荐 0代码在线构建地图应用 机器学习 简介 加拿大长期树种&#xff08;1984-2022 年&#xff09;∥在该数据集中&#xff0c;我们利用空间分辨率为 30 米的 Landsat 时间序列图像&…
阅读更多...
etl-查询错误log日志和oracle删除数据表空间

etl-查询错误log日志和oracle删除数据表空间

查看weblogic日志的目录 建立连接ssh root192.168.30.1xx 密码hygd123 找到下面路径中的文件 cd /home/weblogic/Oracle/Middleware/user_projects/domains/base_domain/bapp-logs 查看log日志 tail -f -n 400 Adminservers.log oracle删除表空间&#xff08;切换到dba用户…
阅读更多...
家庭宽带的ip地址是固定的吗？宽带ip地址怎么修改‌

家庭宽带的ip地址是固定的吗？宽带ip地址怎么修改‌

在家庭网络环境中&#xff0c;IP地址的分配和管理是用户常关注的问题。本文将探讨家庭宽带IP地址的固定性&#xff0c;并介绍如何修改宽带IP地址&#xff0c;以满足用户的不同需求。 一、家庭宽带的IP地址是否固定? 关于家庭宽带的IP地址是否固定&#xff0c;答案并非一概而论…
阅读更多...
【深入学习Redis丨第八篇】详解Redis数据持久化机制

【深入学习Redis丨第八篇】详解Redis数据持久化机制

前言 Redis支持两种数据持久化方式&#xff1a;RDB方式和AOF方式。前者会根据配置的规则定时将内存中的数据持久化到硬盘上&#xff0c;后者则是在每次执行写命令之后将命令记录下来。两种持久化方式可以单独使用&#xff0c;但是通常会将两者结合使用。 一、持久化 1.1、什么…
阅读更多...
【Android】使用 Compose 自定义 View 实现从 0 ~ 1 仿 EChat 柱状图

【Android】使用 Compose 自定义 View 实现从 0 ~ 1 仿 EChat 柱状图

目录 前言DrawScopeDrawScope Api 绘制柱状图绘制 X 轴绘制 Y 轴绘制柱状背景绘制柱状前景完整代码最终效果 存在的问题 前言 本文讲的是使用 compose 去自定义 View &#xff0c;如果您未曾通过继承 View 的方式去实现自定义 View&#xff0c;那么&#xff0c;我建议在观看本…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023