React+Echarts实现数据排名+自动滚动+Y轴自定义toolTip文字提示

1、效果

2、环境准备

1、react18

2、antd 4+

 3、代码实现

原理：自动滚动通过创建定时器动态更新echar的dataZoom属性startValue、endValue，自定义tooltip通过监听echar的鼠标移入移出事件，判断tooltTip元素的显隐以及位置。

1、导入所需组件：在你的代码文件中导入所需的组件

import ReactECharts from 'echarts-for-react';

2、创建一个定时器，处理当前图表滚动至第几个数据，用于实现自动滚动

 // 开启定时器const initialScroll = (dataLen: number, myChart: any) => {const option = myChart.getOption();// 只有当大于10条数据的时候 才会看起来滚动let time = setInterval(() => {if (data.length <= 8) {return;}if (option?.dataZoom[0].endValue >= dataLen - 1) {option.dataZoom[0].endValue = 7;option.dataZoom[0].startValue = 0;} else {option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;}myChart.setOption(option);myChart.setOption({dataZoom: [{type: 'slider',startValue: option.dataZoom[0].startValue,endValue: option.dataZoom[0].endValue,},],});}, Number(rollTime));timer = time;};

3、在useEffect中添加自动滚动的定时器

  useEffect(() => {const myChart = chartRef?.current?.getEchartsInstance();let chartDom = chartRef.current?.getEchartsInstance()?.getDom();if (data.length > 8) {initialScroll(data.length, myChart);// 鼠标离开开启定时器chartDom?.addEventListener('mouseout', () => {if (timer) return;initialScroll(data.length, myChart);});}return () => {clearInterval(timer);timer = null;};}, [data]); // 检测数组内变量 如果为空 则监控全局

4、配置echars的属性,核心要配置dataZoom，控制数据从第几个开始展示，从第几个结束

export const getOption = (result) => {return {tooltip: {...},},grid: {...},xAxis: [{...},],yAxis: [{triggerEvent: true,data: result.map((item) => item.projectName),axisLabel: {...formatter: (value) => {const valueNew =value.length > 4 ? `${value.slice(0, 4)}...` : value;const index = result.findIndex((item) => item.projectName === value,);if (index < 3) {return `{icon${index + 1}|${index + 1}} {a|${valueNew}}`;} else {return `{icon0|${index + 1}} {a|${valueNew}}`;}}}],dataZoom: [{yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始show: false, // 是否显示滑动条，不影响使用type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件startValue: 0, // 从头开始。endValue: 7, // 展示到第几个。},],};
};

4、echarts Y轴的title超出会显示省略，但是看不全体验不好，于是给Y轴加了一个自定义的tooltTip，翻看的echarts所有属性，纵向坐标系，Y轴没有相关属性定义tooltTip

  <ReactEChartsref={chartRef}option={getOption(data)}className={clsx(['h-full w-full'])}style={{ width: '100%', height: '100%' }}/><div className="axis-tip"> </div>

于是在echarts同层节点添加一个toolTip节点，<div className="axis-tip"> </div> 就是ReactECharts的同层节点，通过监听echartsDom的鼠标移入移出控制toolTip的显示位置以及是否显示

  useEffect(() => {const myChart = chartRef?.current?.getEchartsInstance();let chartDom = chartRef.current?.getEchartsInstance()?.getDom();// 移入chartDom?.addEventListener('mouseover', () => {clearInterval(timer);timer = undefined;removeAxisTip();});// yAxis鼠标移入监听myChart?.on?.('mouseover', 'yAxis.category', function (e: any) {let axisTip: any = document.querySelector('.axis-tip');if (axisTip) {axisTip.innerText = e.value;axisTip.style.left = (Number(e?.event?.event?.screenX) || 0) + 'px';axisTip.style.top = (Number(e?.event?.event?.screenY) || 0) + 'px';axisTip.style.display = 'block';}});return () => {myChart?.off('mouseover', () => {});chartDom?.removeEventListener('mouseout', () => {});chartDom?.removeEventListener('mouseover', () => {});timer = null;};}, [data]); // 检测数组内变量 如果为空 则监控全局

 5、完整代码如下：

/*** 收集完成率排名 图表*/
import clsx from 'clsx';
import ReactECharts from 'echarts-for-react';
import { useEffect, useRef } from 'react';
import '../index.less';
import { getOption } from './constants';interface ProjectBarConfig {data: any;rollTime?: number;
}const LineECharts = (props: ProjectBarConfig) => {const { rollTime = 5000, data } = props;const chartRef = useRef<ReactECharts>(null);let timer: any = null;// 开启定时器const initialScroll = (dataLen: number, myChart: any) => {const option = myChart.getOption();// 只有当大于10条数据的时候 才会看起来滚动let time = setInterval(() => {if (data.length <= 8) {return;}if (option?.dataZoom[0].endValue >= dataLen - 1) {option.dataZoom[0].endValue = 7;option.dataZoom[0].startValue = 0;} else {option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;}myChart.setOption(option);myChart.setOption({dataZoom: [{type: 'slider',startValue: option.dataZoom[0].startValue,endValue: option.dataZoom[0].endValue,},],});}, Number(rollTime));timer = time;};// 移除y轴tipconst removeAxisTip = () => {let axisTip: any = document.querySelector('.axis-tip');if (axisTip) {axisTip.innerText = '';axisTip.style.display = 'none';}};useEffect(() => {const myChart = chartRef?.current?.getEchartsInstance();let chartDom = chartRef.current?.getEchartsInstance()?.getDom();if (data.length > 8) {initialScroll(data.length, myChart);// 鼠标离开开启定时器chartDom?.addEventListener('mouseout', () => {if (timer) return;initialScroll(data.length, myChart);});}// 移入chartDom?.addEventListener('mouseover', () => {clearInterval(timer);timer = undefined;removeAxisTip();});// yAxis鼠标移入监听myChart?.on?.('mouseover', 'yAxis.category', function (e: any) {let axisTip: any = document.querySelector('.axis-tip');if (axisTip) {axisTip.innerText = e.value;axisTip.style.left = (Number(e?.event?.event?.screenX) || 0) + 'px';axisTip.style.top = (Number(e?.event?.event?.screenY) || 0) + 'px';axisTip.style.display = 'block';}});// });return () => {clearInterval(timer);myChart?.off('mouseover', () => {});chartDom?.removeEventListener('mouseout', () => {});chartDom?.removeEventListener('mouseover', () => {});timer = null;};}, [data]); // 检测数组内变量 如果为空 则监控全局const heightRate = Math.min((data.length || 1) / 8, 1) * 100;return (<divclassName={clsx(['w-full h-full', 'flex flex-row'])}onMouseLeave={() => {removeAxisTip();}}><divclassName={clsx(['flex-auto', 'h-full'])}style={{height: `${heightRate}%`,maxHeight: '100%',minHeight: '20%',}}><ReactEChartsref={chartRef}option={getOption(data)}className={clsx(['h-full w-full'])}style={{ width: '100%', height: '100%' }}/><div className="axis-tip"> </div></div></div>);
};export default LineECharts;

 echar属性配置：

const ranKIconList = ['data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI4IDIwIiBmaWxsPSJub25lIj4NCiAgPHBhdGggZD0iTTAgMEgyMEwyOCAxMC41TDIwIDIwSDBWMFoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8yNDIxM183MDA4KSIvPg0KICA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMjQyMTNfNzAwOCIgeDE9IjE0IiB5MT0iMCIgeDI9IjE0IiB5Mj0iMjAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRkQxMkUiLz4NCiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZGQjgwMCIvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogIDwvZGVmcz4NCjwvc3ZnPg==','data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDI4IDIxIiBmaWxsPSJub25lIj4NCiAgPHBhdGggZD0iTTAgMC4yODU2NDVIMjBMMjggMTAuNzg1NkwyMCAyMC4yODU2SDBWMC4yODU2NDVaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMjQyMTNfNzAxMSkiLz4NCiAgPGRlZnM+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzI0MjEzXzcwMTEiIHgxPSIxNCIgeTE9IjAuMjg1NjQ1IiB4Mj0iMTQiIHkyPSIyMC4yODU2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjQThDRkYwIi8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM4N0I4RTEiLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICA8L2RlZnM+DQo8L3N2Zz4=','data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDI4IDIxIiBmaWxsPSJub25lIj4NCiAgPHBhdGggZD0iTTAgMC41NzEyODlIMjBMMjggMTEuMDcxM0wyMCAyMC41NzEzSDBWMC41NzEyODlaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMjQyMTNfNzAxNCkiLz4NCiAgPGRlZnM+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzI0MjEzXzcwMTQiIHgxPSIxNCIgeTE9IjAuNTcxMjg5IiB4Mj0iMTQiIHkyPSIyMC41NzEzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkFDNjgxIi8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGNTkzMzgiLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICA8L2RlZnM+DQo8L3N2Zz4=','data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDI4IDIxIiBmaWxsPSJub25lIj4NCiAgPHBhdGggZD0iTTAgMC44NTY5MzRIMjBMMjggMTEuMzU2OUwyMCAyMC44NTY5SDBWMC44NTY5MzRaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfMjQyMTNfNzAxNykiLz4NCiAgPGRlZnM+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzI0MjEzXzcwMTciIHgxPSIxNCIgeTE9IjAuODU2OTM0IiB4Mj0iMTQiIHkyPSIyMC44NTY5IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMEM0MjdDIi8+DQogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwODM1NjYiLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICA8L2RlZnM+DQo8L3N2Zz4=',
];
// 配置调色板
export const colorPalette = [['#2EF2FF', '#2EB3FF'],['#FFD12E', '#FFB82E'],['#8EED15', '#00CF61'],['#CFCFCF', '#999'],['#FF7D54', '#FF2E2E'],['#00F3E5', '#00D4D6'],
].map(([startColor, endColor]) => ({type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: startColor, // 0% 处的颜色},{offset: 1,color: endColor, // 100% 处的颜色},],global: false, // 缺省为 false
}));export const getOption = (result) => {return {//   color: '2379FF',//   backgroundColor: '#000416',color: colorPalette,tooltip: {show: true,trigger: 'axis',padding: [8, 15],backgroundColor: 'rgba(1, 15, 29, 80%)',fontWeight: 700,borderColor: 'rgba(46, 179, 255, 50%)',textStyle: {color: 'rgba(255, 255, 255, 1)',},},legend: {show: false,},grid: {left: '100',right: '52',top: '0',bottom: '4',},xAxis: [{splitLine: {show: false,},type: 'value',show: false,axisLine: {show: false,},},],yAxis: [{triggerEvent: true,splitLine: {show: false,},axisLine: {show: false,},// type: 'category',axisTick: {show: false,},inverse: true,// offset: 10,data: result.map((item) => item.projectName),axisLabel: {color: '#fff',fontSize: 12,// marginLeft: 12,overflow: 'truncate',ellipsis: '...',margin: 110,align: 'left',formatter: (value) => {const valueNew =value.length > 4 ? `${value.slice(0, 4)}...` : value;const index = result.findIndex((item) => item.projectName === value,);if (index < 3) {return `{icon${index + 1}|${index + 1}} {a|${valueNew}}`;} else {return `{icon0|${index + 1}} {a|${valueNew}}`;}},rich: {icon0: {width: 28,height: 18,fontSize: 12,align: 'center',verticalAlign: 'middle',color: '#fff',padding: [3, 4], //[上, 右, 下, 左]fontWeight: 400,backgroundColor: {image: ranKIconList[3],},},icon1: {width: 28,height: 18,fontSize: 12,align: 'center',verticalAlign: 'middle',padding: [3, 4], //[上, 右, 下, 左]backgroundColor: {image: ranKIconList[0],},},icon2: {fontSize: 12,align: 'center',verticalAlign: 'middle',padding: [3, 4], //[上, 右, 下, 左]width: 28,height: 18,backgroundColor: {// image: bg,image: ranKIconList[1],},},icon3: {width: 28,height: 18,fontSize: 12,verticalAlign: 'middle',padding: [3, 4], //[上, 右, 下, 左]align: 'center',backgroundColor: {image: ranKIconList[2],},},a: {fontSize: '12px',color: '#B8D3F1',align: 'center',},z: {width: 6,height: 6,},},},},],series: [{type: 'bar',label: {show: true,position: 'right',// distance: 0,textStyle: {fontSize: 12,color: '#2EB3FF', // 值文字颜色},formatter: (value) => {return `{a|${value?.data}%}`;},rich: {a: {fontSize: 12,fontWeight: 500,color: '#2EB3FF', // 值文字颜色fontStyle: 'normal',fontFamily: 'Arial',padding: [0, 8, 0, 8], //[上, 右, 下, 左]},b: {fontSize: 14,},},},itemStyle: {normal: {fontWeight: 400,// color: function(params) {//   return barShadowColor[params.dataIndex]// },opacity: 0.8,},},barWidth: 8,data: result.map((item) => item.value),// barGap:2,z: 2,},{name: '背景',type: 'bar',tooltip: { show: false },barWidth: 12,barHeight: 20,barGap: '-100%',// z: -1},],dataZoom: [{yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始show: false, // 是否显示滑动条，不影响使用type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件startValue: 0, // 从头开始。endValue: 7, // 展示到第几个。},],};
};

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

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

相关文章

CSS太极动态图

CSS太极动态图

CSS太极动态图 1. 案例效果 我们今天学习用HTML和CSS实现动态的太极&#xff0c;看一下效果。 2. 分析思路 太极图是由两个旋转的圆组成&#xff0c;一个是黑圆&#xff0c;一个是白圆。实现现原理是使用CSS的动画和渐变背景属性。 首先&#xff0c;为所有元素设置默认值为0…
阅读更多...
uniapp 本地存储的方式

uniapp 本地存储的方式

1. uniapp 本地存储的方式 在uniapp开发中&#xff0c;本地存储是一个常见的需求。本地存储可以帮助我们在客户端保存和管理数据&#xff0c;以便在应用程序中进行持久化存储。本文将介绍uniapp中本地存储的几种方式&#xff0c;以及相关的代码示例。 1.1. 介绍 在移动应用开发…
阅读更多...
【成品论文】2024美赛B题完整成品论文23页+3小问matlab代码+数据集汇总

【成品论文】2024美赛B题完整成品论文23页+3小问matlab代码+数据集汇总

2024 年美国大学生数学建模竞赛&#xff08;2024 美赛&#xff09;B 题&#xff1a; 2024 MCM 问题 B: 搜寻潜水艇 题目翻译&#xff1a; Maritime Cruises Mini-Submarines (MCMS)是一家总部位于希腊的公司&#xff0c;专门制造能够携 带人类到达海洋最深处的潜水艇。潜水艇是…
阅读更多...
git小白进阶之路

git小白进阶之路

git是最常用的版本控制工具&#xff0c;我对其进行了整理后续补充&#xff0c;这个文档欢迎大家来讨论&#xff0c;当前我的视频梳理&#xff1a; git小白进阶之路_哔哩哔哩_bilibili&#xff0c;非常希望大佬们能够批评指正&#xff0c;并多多交流。 目录 初始配置 配置账号…
阅读更多...
多维时序 | MATLAB实现基于CNN-LSSVM卷积神经网络-最小二乘支持向量机多变量时间序列预测

多维时序 | MATLAB实现基于CNN-LSSVM卷积神经网络-最小二乘支持向量机多变量时间序列预测

多维时序 | MATLAB实现基于CNN-LSSVM卷积神经网络-最小二乘支持向量机多变量时间序列预测 目录 多维时序 | MATLAB实现基于CNN-LSSVM卷积神经网络-最小二乘支持向量机多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于CNN-LSSVM卷积神经…
阅读更多...
python二维数组初始化的一个极其隐蔽的bug（浅拷贝）

python二维数组初始化的一个极其隐蔽的bug（浅拷贝）

初始化一个三行三列的矩阵 m n 3初始化方式1 a [[0 for i in range(m)] for j in range(n)]初始化方式2 b [] row [0 for i in range(0,m)] for i in range(0,n):b.append(row)分别输出两个初始化的结果 for row in a:print(row) for row in b:print(row)当前的输出为…
阅读更多...
大华 DSS 数字监控系统 attachment_getAttList.action SQL 注入漏洞复现

大华 DSS 数字监控系统 attachment_getAttList.action SQL 注入漏洞复现

0x01 产品简介 大华 DSS 数字监控系统是大华开发的一款安防视频监控系统，拥有实时监视、云台操作、录像回放、报警处理、设备管理等功能。 0x02 漏洞概述 大华 DSS存在SQL注入漏洞，攻击者 /portal/attachment_getAttList.action 路由发送特殊构造的数据包，利用报错注入获…
阅读更多...
2024-02-06（Sqoop）

2024-02-06（Sqoop）

1.Sqoop Apache Sqoop是Hadoop生态体系和RDBMS&#xff08;关系型数据库&#xff09;体系之间传递数据的一种工具。 Sqoop工作机制是将导入或者导出命令翻译成MapReduce程序来实现。在翻译出的MapReduce中主要是对inputformat和outputformat进行定制。 Hadoop生态包括&#…
阅读更多...
MATLAB环境下生成对抗网络系列（11种）

MATLAB环境下生成对抗网络系列（11种）

为了构建有效的图像深度学习模型&#xff0c;数据增强是一个非常行之有效的方法。图像的数据增强是一套使用有限数据来提高训练数据集质量和规模的数据空间解决方案。广义的图像数据增强算法包括&#xff1a;几何变换、颜色空间增强、核滤波器、混合图像、随机擦除、特征空间增…
阅读更多...
告别mPDF迎来TCPDF和中文打印遇到的问题

告别mPDF迎来TCPDF和中文打印遇到的问题

mPDF是一个用PHP编写的开源PDF生成库。它最初由Claus Holler创建&#xff0c;于2004年发布。原来用开源软件打印中文没有问题&#xff0c;最近发现新的软件包中mPDF被TCPDF代替了&#xff0c;当然如果只用西文的PDF是没有发现问题&#xff0c;但要打印中文就有点抓瞎了如图1&am…
阅读更多...
选择大语言模型：2024 年开源 LLM 入门指南

选择大语言模型：2024 年开源 LLM 入门指南

作者&#xff1a;来自 Elastic Aditya Tripathi 如果说人工智能在 2023 年起飞&#xff0c;这绝对是轻描淡写的说法。数千种新的人工智能工具被推出&#xff0c;人工智能功能被添加到现有的应用程序中&#xff0c;好莱坞因对这项技术的担忧而戛然而止。 甚至还有一个人工智能工…
阅读更多...
【计算机网络】Socket的SO_TIMEOUT与连接超时时间

【计算机网络】Socket的SO_TIMEOUT与连接超时时间

SO_TIMEOUT选项是Socket的一个选项&#xff0c;用于设置读取数据的超时时间。它指定了在读取数据时等待的最长时间&#xff0c;如果在指定的时间内没有数据可读取&#xff0c;将抛出SocketTimeoutException异常。 SO_TIMEOUT的设置 默认情况下&#xff0c;SO_TIMEOUT选项的值…
阅读更多...
vue3项目中使用mapv

vue3项目中使用mapv

vue3项目中使用mapv mapv是百度地图官方提供的地图数据可视化开源项目&#xff0c;提供了很多效果酷炫的绘图api mapv地址在这里&#xff0c;示例图在这里 先解释为什么要用mapv echarts画的地图&#xff0c;都是行政区划&#xff0c;就算是geo地图&#xff0c;也只能在行政…
阅读更多...
神经网络 | 常见的激活函数

神经网络 | 常见的激活函数

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本文主要介绍神经网络中必要的激活函数的定义、分类、作用以及常见的激活函数的功能。 目录 一、激活函数定义 二、激活函数分类 三、常见的几种激活函数 1. Sigmoid 函数 &#xff08;1&#xff09;公式 &#xff08;2&a…
阅读更多...
【DevOps】产品需求文档（PRD）与常见原型软件

【DevOps】产品需求文档（PRD）与常见原型软件

文章目录 1、PRD介绍1.1、概述1.2、前提条件1.3、主要目的1.4、关键内容1.5、表述方式1.6、需求评审人员1.7、一般内容结构 2、需求流程3、常见原型软件3.1、Word3.2、Axure3.2.1、详细介绍3.2.2、应用分类3.2.3、优缺点 3.3、摹客RP3.4、蓝湖3.5、GUI Design Studio 1、PRD介绍…
阅读更多...
[VulnHub靶机渗透] dpwwn: 1

[VulnHub靶机渗透] dpwwn: 1

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…
阅读更多...
HTML -- 常用标签

HTML -- 常用标签

目录 HTML 标签 单标签 双标签 常见标签的使用 标题和段落 换行、分隔、超链接 列表标签 表单标签 属性 属性的使用 HTML HTML&#xff08;Hyper Text Markup Language&#xff09;&#xff0c;超文本标记语言&#xff0c;是一门标记语言&#xff0c;不是编程语言&am…
阅读更多...
微信小程序（三十七）选项点击高亮效果

微信小程序（三十七）选项点击高亮效果

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.选择性渲染类 2.以数字为需渲染内容&#xff08;数量&#xff09; 源码&#xff1a; index.wxml <view class"Area"><!-- {{activeNumindex?Active:}}是选择性添加类名进行渲染 -->&l…
阅读更多...
VC++添加菜单学习

VC++添加菜单学习

新建一个单文档工程&#xff1b; 完成以后看一下有没有出现如下图的 资源视图 的tab&#xff1b;如果没有&#xff0c;在文件列表中找到xxx.rc2文件&#xff1b; 点击 资源视图 的tab&#xff0c;或者双击 .rc2 文件名&#xff0c;就会转到如下图的资源视图&#xff1b;然后展…
阅读更多...
Redis（十三）缓存双写一致性策略

Redis（十三）缓存双写一致性策略

文章目录 概述示例 缓存双写一致性缓存按照操作来分&#xff0c;细分2种读写缓存&#xff1a;同步直写策略读写缓存&#xff1a;异步缓写策略双检加锁策略 数据库和缓存一致性更新策略先更新数据库&#xff0c;再更新缓存先更新缓存&#xff0c;再更新数据库先删除缓存&#xf…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023