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.mzph.cn/news/671496.shtml

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

相关文章

《五彩斑斓》-------如何用C语言easyx图形库做出一个彩色矩阵

《五彩斑斓》-------如何用C语言easyx图形库做出一个彩色矩阵

用于初始化随机数生成器种子，以确保每次运行程序时生成的随机数序列不同。 然后，程序进入main()函数，首先调用creatNum()函数生成一个随机数，并使用printf()函数将其输出到控制台。接着，程序调用initgraph()函数初始化图形窗口，并设置背景颜色为白色。 接下来，程序使用两…
阅读更多...
Linux安全技术与iptables防火墙

Linux安全技术与iptables防火墙

一.安全技术&#xff1a; 入侵检测系统&#xff08;Intrusion Detection Systems&#xff09;&#xff1a;特点是不阻断任何网络访问&#xff0c;量化、定位来自内外网络的威胁情况&#xff0c;主要以提供报警和事后监督为主&#xff0c;提供有针对性的指导措施和安全决策依据,…
阅读更多...
IDEA上传Gitee出错

IDEA上传Gitee出错

问题 今天想通过 IDEA 更下新 gitee 上的代码是发生了这个错误。 解决 在 IDEA 终端输入 git config --system --unset credential.helper原因 在一个大佬那里找到了原因 大概意思是-远端仓库的账号和密码错误&#xff0c;你本地有过账号密码登录记录&#xff0c;但不知道…
阅读更多...
Java SE入门及基础（26）

Java SE入门及基础（26）

方法重载&#xff08;Overloading&#xff09; 1. 概念 在同一个类中&#xff0c;方法名相同&#xff0c;参数列表不同的多个方法构成方法重载 2.示例 public class Calculator { public int sum ( int a , int b ){ return a b ; } public int sum ( int…
阅读更多...
【LeetCode】78. 子集（中等）——代码随想录算法训练营Day28

【LeetCode】78. 子集（中等）——代码随想录算法训练营Day28

题目链接&#xff1a;78. 子集 题目描述 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1&#xff1a; 输入&#xff1a;nums [1,2…
阅读更多...
Docker面试题2024

Docker面试题2024

目录 什么是Docker&#xff1f; Docker的应用场景有哪些&#xff1f; Docker的优点有哪些&#xff1f; Docker与虚拟机的区别是什么&#xff1f; Docker的三大核心是什么&#xff1f; 如何快速安装Docker&#xff1f; 如何修改Docker的存储位置&#xff1f; Docker镜像常用管理…
阅读更多...
Leetcode—60. 排列序列【困难】

Leetcode—60. 排列序列【困难】

2024每日刷题&#xff08;113&#xff09; Leetcode—60. 排列序列 算法思想 实现代码 class Solution { public:string getPermutation(int n, int k) {vector<int> nums(n);// f[i] i!vector<int> f(n 1, 1); string ans;iota(nums.begin(), nums.end(), 1…
阅读更多...
搜索与图论（一）（深搜，广搜，树与图的存储遍历，拓扑排序）

搜索与图论（一）（深搜，广搜，树与图的存储遍历，拓扑排序）

一、DFS 往深里搜&#xff0c;搜到叶子结点那里&#xff0c;回溯&#xff0c;到可以继续到叶子结点深搜的位置。 1、回溯一定要恢复现场 2、定义一个与当前递归层数有关的终止条件&#xff08;题目要求的东西&#xff09; 3、每层都用循环判断是否存在可以dfs的路 输出数字…
阅读更多...
架构学习(五)：scrapy实现自定义代理中间件

架构学习(五)：scrapy实现自定义代理中间件

scrapy实现自定义代理中间件 前言关卡&#xff1a;实现自定义代理中间件代理中间件源码解析代理池自定义代理中间件 结束 前言 ip检测是比较常规的反爬手段&#xff0c;一般站点会限制ip的访问频率&#xff0c;或者根据ip的访问规律和频率来识别异常访问&#xff0c;从而点对点…
阅读更多...
【数据结构】二叉树的顺序结构及实现（堆）

【数据结构】二叉树的顺序结构及实现（堆）

1.二叉树的顺序结构 普通的二叉树是不适合用数组来存储的&#xff0c;因为可能会存在大量的空间浪费。而完全二叉树更适合使用顺序结 构存储。现实中我们通常把堆(一种二叉树)使用顺序结构的数组来存储&#xff0c;需要注意的是这里的堆和操作系统 虚拟进程地址空间中的堆是两…
阅读更多...
腾讯云游戏联机服务器配置价格表，4核16G/8核32G/4核32G/16核64G

腾讯云游戏联机服务器配置价格表，4核16G/8核32G/4核32G/16核64G

2024年更新腾讯云游戏联机服务器配置价格表&#xff0c;可用于搭建幻兽帕鲁、雾锁王国等游戏服务器&#xff0c;游戏服务器配置可选4核16G12M、8核32G22M、4核32G10M、16核64G35M、4核16G14M等配置&#xff0c;可以选择轻量应用服务器和云服务器CVM内存型MA3或标准型SA2实例&am…
阅读更多...
Days 23 ElfBoard 板git版本管理工具

Days 23 ElfBoard 板git版本管理工具

一、 介绍 git 就是一个版本管理库&#xff0c;也是一个版本管理工具&#xff0c;它的作用就是帮助我们记录版本信息&#xff0c;以及修改内容。git 的结构是分布式的资源库&#xff0c;特点是没有严格的服务器概念&#xff0c;每个单体都可作为资源库。这个特点就让我们人人有…
阅读更多...
C++_多态

C++_多态

目录 1、什么是虚函数 1.1 什么是虚函数重写 1.2 虚函数的继承 1.3 协变 1.4 析构函数的重写 2、override和final 2.1 final 2.2 override 3、纯虚函数/抽象类 3.1 接口继承和实现继承 4、多态的原理 前言&#xff1a; 在C中&#xff0c;多态指的是调用同一个类的…
阅读更多...
【问题解决】微软OneNote使用笔记，onenote无法连接网络无法同步解决方法

【问题解决】微软OneNote使用笔记，onenote无法连接网络无法同步解决方法

登录OneNote时出现报错[2603]。这是一个与网络有关的报错&#xff0c;请依次尝试以下步骤。 控制面板—网络和Internet—网络和共享中心—更改适配器设置&#xff0c;右键点击当前连接的网络名称&#xff0c;点击属性&#xff0c;点击一下“Internet 协议版本4”&#xff0c;再…
阅读更多...
Windows系统安装Flink及实现MySQL之间数据同步

Windows系统安装Flink及实现MySQL之间数据同步

Apache Flink是一个框架和分布式处理引擎&#xff0c;用于对无界和有界数据流进行有状态计算。Flink的设计目标是在所有常见的集群环境中运行&#xff0c;并以内存执行速度和任意规模来执行计算。它支持高吞吐、低延迟、高性能的流处理&#xff0c;并且是一个面向流处理和批处理…
阅读更多...
re:从0开始的CSS学习之路 3. CSS三大特性

re:从0开始的CSS学习之路 3. CSS三大特性

0. 写在前面 很多的学习其实并不知道在学什么&#xff0c;学一个新东西学着学着就变成了抄代码&#xff0c;背概念。把看视频学习变成了一个赶进度的任务&#xff0c;到头来只学到了一些皮毛。 文章目录 0. 写在前面1. CSS三大特性——层叠性2. CSS三大特性——优先级3. CSS三…
阅读更多...
学习Spring的第十六天

学习Spring的第十六天

AOP底层两种生成Proxy的方式 我来解释这两种方式 1 目标类有接口 , 调用JDK的动态代理实现 2 目标类没有接口 , 用Cglib实现 , 即生成目标类的子类 , 来实现动态代理 , 所以要求目标类不能时final修饰的 . (若有接口 , 也可用Cglib方式实现 , 需要手动配置<aop: config pr…
阅读更多...
完全二叉树的结点个数

完全二叉树的结点个数

给你一棵 完全二叉树 的根节点 root &#xff0c;求出该树的节点个数。 完全二叉树 的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底层节点可能没填满外&#xff0c;其余每层节点数都达到最大值&#xff0c;并且最下面一层的节点都集中在该层最左边的若干位置。若最…
阅读更多...
java SpringBoot2.7整合Elasticsearch(ES)7 带条件分页查询与不带条件分页查询演示讲解

java SpringBoot2.7整合Elasticsearch(ES)7 带条件分页查询与不带条件分页查询演示讲解

上文 java SpringBoot2.7整合Elasticsearch(ES)7 进行文档增删查改 我们带着大家 整合了 Elasticsearch 对索引中的文档做了 各方面操作 然后 我们来说说 分页查询 这里 为了方便大家看 我加了五条数据进去 这里 我们仍然需要带个条件 这里 我们用name Mapper 接口 加一个这…
阅读更多...
【Unity】Assets/Plugins/Android(/res、/assets等)文件夹作用

【Unity】Assets/Plugins/Android(/res、/assets等)文件夹作用

Assets/Plugins/Android&#xff1a;包含 Android 平台的插件文件&#xff0c;如 jar、aar、so 等。 Asets/Plugins/Android/assets&#xff1a;包含 Android 平台的资源文件&#xff0c;如图片、音频等。 相当于src/main/assets文件夹 Assets/Plugins/Android/res&#xff1a;…
阅读更多...
最新文章

Copyright @ 2022~2023