16-Echarts简化系列之:平行坐标系 parallel 和 parallelAxis 坐标轴
parallel:
可视化高维数据的图表,特点在于可同时展示多个变量之间的关系,并且可以通过调整轴的顺序和缩放来探索不同的数据视角。帮助探索数据之间的关系和趋势
parallelAxis:
平行坐标系中的坐标轴。
parallel 和 parallelAxis 和直角坐标系和直角坐标X、Y轴关系一致,一样的使用。
文章最后提供完整实例代码,标注注释
注意事项:
axisLabel, 坐标轴刻度标签样式配置 show:false,隐藏的时候,只隐藏没有和下一个轴连接线的数据标签。
inside 坐标轴标签朝向配置视乎无效
线条样式: 如果你想控制各轴之间的连接线条的样式,请在 series 中的 lineStyle 属性中配置
一、配置代码
平行坐标系的配置 parallel
// 平行坐标系的配置
option={parallel:{id:'2', // 组件IDz:'2', // 图层优先级zlevel:'1', // 图形绘制优先级left:'20%', // 距离容器左侧偏移right:'10%', // 距离容器右侧偏移top:'10%', // 距离容器顶部偏移bottom:'10%', // 距离容器底部的偏移width:'100%', // 组件的宽度height:'100%', // 组件的高度layout:'horizontal', // 坐标轴布局方式axisExpandable:true, // 是否允许点击折叠axisExpandCenter:50, // 以哪个轴为中心展开axisExpandCount:5, // 初始化哪些轴处于展开状态axisExpandWidth:50, // 展开状态轴间距axisExpandTriggerOn:'click', // 如何出发展开状态,是点击还是悬浮的时候//坐标轴样式配置parallelAxisDefault:{type:'value', // 轴类型name:'name', // 坐标轴名称nameLocation:'end', // 坐标轴名称显示位置nameGap:20, // 坐标轴名称和轴线之间距离nameRotate:90, // 坐标轴名称旋转角度inverse:true, // 是否反向坐标轴boundaryGap:['20%','20%'], // 坐标轴两边留白min:0, // 坐标轴刻度最小值max:100, // 坐标轴刻度最大值scale:true, // 坐标轴是否脱离0刻度splitNumber:5, // 坐标轴分割段数minInterval:5, // 自动计算坐标轴最小间隔大小maxInterval:5, // 自动计算坐标轴最大间隔大小interval:5, // 强制设置坐标轴分割间隔logBase:10, // 对数轴的底数silent:true, // 坐标轴是否静态无法交互triggerEvent:true, // 坐标轴标签是否响应和触发鼠标事件animation:true, // 是否开启动画animationThreshold:200, // 开启动画阈值animationDuration:100, // 初始动画的时长animationEasing:'cubicOut', // 初始动画的缓动效果animationDelay:100, // 初始动画延迟animationDurationUpdate:100, // 数据更新动画时长animationEasingUpdate:100, // 数据更新动画缓动效果animationDelayUpdata:100, // 数据更新动画的延迟// 坐标轴名称样式nameTextStyle:{ color:'red', // 字体颜色fontStyle:'normal', // 文字字体风格fontWeight:'bold', // 文字字体粗细fontFamily:'serif', // 字体系列fontSize:12, // 字体大小align:'left', // 字体水平对齐方式verticalAlign:'top', // 文字垂直对齐方式lineHeight:56, // 行高backgroundColor:'red', // 文字块背景颜色borderColor:'red', // 文字块边框颜色borderWidth:20, // 文字边框宽度borderType:'solid', // 文字块边框描边类型borderDashOffset:10, // 虚线的偏移量borderRadius:40, // 文字块的圆角padding:[2,2,2,2], // 文字块内边距shadowColor:'red', // 文字块的背景阴影颜色shadowBlur:10, // 文字块的背景阴影长度shadowOffsetX:10, // 阴影水平偏移量shadowOffsetY:10, // 阴影垂直偏移量width:120, // 文本显示宽度height:120, // 文本显示高度textBorderColor:'red', // 文字本身的描边颜色textBorderWidth:20, // 文字本身的描边宽度textBorderType:'solid', // 文字的描边类型textBorderDashOffset:20, // 虚线的偏移量textShadowColor:'red', // 文字阴影颜色textShadowBlur:10, // 文字阴影长度textShadowOffsetX:10, // 文字阴影水平偏移量textShadowOffsetY:10, // 文字阴影垂直偏移量overflow:'none', // 文字超出宽度时,是截断还是换行ellipsis:'···', // 文字截断时,末尾显示内容 // 富文本rich:{a:{color:'red',lineHeight:10, } } },// 坐标轴线的样式axisLine:{show:true, // 是否显示坐标轴轴线symbol:'none', // 轴线两边箭头symbolSize:[10,15], // 轴线两边箭头大小symbolOffset:[0,0], // 轴线两边的箭头偏移// 轴线样式lineStyle:{color:'red', // 轴线颜色width:5, // 轴线宽度 type:'solid', // 轴线类型dashOffset:10, // 轴线为虚线时的偏移量cap:'butt', // 轴线末端形状join:'bevel', // 线段相连部分的图形miterLimit:10, // join 为 miter 时,斜截面比例shadowBlur:10, // 轴线阴影模糊大小shadowColor:'red', // 轴线阴影颜色shadowOffsetX:10, // 轴线阴影水平偏移量shadowOffsetY:10, // 轴线阴影垂直偏移量opacity:0.5, // 轴线透明度 } },// 坐标轴刻度的样式axisTick:{show:true, // 是否显示坐标轴刻度alignWithLabel:true, // boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐 interval:1, // 坐标轴刻度显示间隔inside:true, // 坐标轴刻度是否朝内length:10, // 坐标轴刻度的长度// 刻度线的样式lineStyle:{// ··· 与上方的 axisLine 中 lineStyle 内容一张 }},// 坐标轴次刻度线的样式minorTick:{show:false, // 是否显示次刻度线splitNumber:5, // 次刻度分割数,默认为 5段length:3, // 次刻度的长度// 次刻度线的样式lineStyle:{// ··· 与上方的 axisLine 中 lineStyle 内容一张 }, },// 坐标轴刻度标签样式axisLabel:{show:true, // 是否显示刻度标签interval:'auto', // 坐标轴刻度标签显示间隔inside:true, // 刻度标签是否朝内rotate:-90, // 刻度标签旋转角度margin:10, // 刻度标签与轴线之间的距离formatter:'{value}', // 刻度标签内容格式器showMinLabel:true, // 是否显示最小的 labelshowMaxLabel:true, // 是否显示最大的 labelhideOverlap:true, // 是否隐藏重叠的标签color:'red', // 字体颜色fontStyle:'normal', // 文字字体风格fontWeight:'bold', // 文字字体粗细fontFamily:'serif', // 字体系列fontSize:12, // 字体大小align:'left', // 字体水平对齐方式verticalAlign:'top', // 文字垂直对齐方式lineHeight:56, // 行高backgroundColor:'red', // 文字块背景颜色borderColor:'red', // 文字块边框颜色borderWidth:20, // 文字边框宽度borderType:'solid', // 文字块边框描边类型borderDashOffset:10, // 虚线的偏移量borderRadius:40, // 文字块的圆角padding:[2,2,2,2], // 文字块内边距shadowColor:'red', // 文字块的背景阴影颜色shadowBlur:10, // 文字块的背景阴影长度shadowOffsetX:10, // 阴影水平偏移量shadowOffsetY:10, // 阴影垂直偏移量width:120, // 文本显示宽度height:120, // 文本显示高度textBorderColor:'red', // 文字本身的描边颜色textBorderWidth:20, // 文字本身的描边宽度textBorderType:'solid', // 文字的描边类型textBorderDashOffset:20, // 虚线的偏移量textShadowColor:'red', // 文字阴影颜色textShadowBlur:10, // 文字阴影长度textShadowOffsetX:10, // 文字阴影水平偏移量textShadowOffsetY:10, // 文字阴影垂直偏移量overflow:'none', // 文字超出宽度时,是截断还是换行ellipsis:'···', // 文字截断时,末尾显示内容 // 富文本rich:{a:{color:'red',lineHeight:10, }, }, },// 类目数据data:[{value:'name', // 数据类目名称textStyle:{// ··· 与坐标轴名称样式 nameTextStyle 的内容配置一致} } ] }, }}
平行坐标系坐标轴配置 parallelAxis
// parallelAxis 配置
option={parallelAxis:{id:'5', // 组件的IDdim:10, // 坐标轴的维度序号parallelIndex:0, // 坐标轴对应的坐标系realtime:true, // 是否开启坐标轴刷选type:'value', // 轴类型name:'name', // 坐标轴名称nameLocation:'end', // 坐标轴名称显示位置nameGap:20, // 坐标轴名称和轴线之间距离nameRotate:90, // 坐标轴名称旋转角度inverse:true, // 是否反向坐标轴boundaryGap:['20%','20%'], // 坐标轴两边留白min:0, // 坐标轴刻度最小值max:100, // 坐标轴刻度最大值scale:true, // 坐标轴是否脱离0刻度splitNumber:5, // 坐标轴分割段数minInterval:5, // 自动计算坐标轴最小间隔大小maxInterval:5, // 自动计算坐标轴最大间隔大小interval:5, // 强制设置坐标轴分割间隔logBase:10, // 对数轴的底数silent:true, // 坐标轴是否静态无法交互triggerEvent:true, // 坐标轴标签是否响应和触发鼠标事件animation:true, // 是否开启动画animationThreshold:200, // 开启动画阈值animationDuration:100, // 初始动画的时长animationEasing:'cubicOut', // 初始动画的缓动效果animationDelay:100, // 初始动画延迟animationDurationUpdate:100, // 数据更新动画时长animationEasingUpdate:100, // 数据更新动画缓动效果animationDelayUpdata:100, // 数据更新动画的延迟// 坐标轴上的刷选样式areaSelectStyle:{width:20, // 选框宽度borderColor:'red', // 选框的边框颜色borderWidth:10, // 选框的边框宽度color:'red', // 选框的填充颜色opacity:0.8, // 选框的透明度 }// 坐标轴名称样式nameTextStyle:{ color:'red', // 字体颜色fontStyle:'normal', // 文字字体风格fontWeight:'bold', // 文字字体粗细fontFamily:'serif', // 字体系列fontSize:12, // 字体大小align:'left', // 字体水平对齐方式verticalAlign:'top', // 文字垂直对齐方式lineHeight:56, // 行高backgroundColor:'red', // 文字块背景颜色borderColor:'red', // 文字块边框颜色borderWidth:20, // 文字边框宽度borderType:'solid', // 文字块边框描边类型borderDashOffset:10, // 虚线的偏移量borderRadius:40, // 文字块的圆角padding:[2,2,2,2], // 文字块内边距shadowColor:'red', // 文字块的背景阴影颜色shadowBlur:10, // 文字块的背景阴影长度shadowOffsetX:10, // 阴影水平偏移量shadowOffsetY:10, // 阴影垂直偏移量width:120, // 文本显示宽度height:120, // 文本显示高度textBorderColor:'red', // 文字本身的描边颜色textBorderWidth:20, // 文字本身的描边宽度textBorderType:'solid', // 文字的描边类型textBorderDashOffset:20, // 虚线的偏移量textShadowColor:'red', // 文字阴影颜色textShadowBlur:10, // 文字阴影长度textShadowOffsetX:10, // 文字阴影水平偏移量textShadowOffsetY:10, // 文字阴影垂直偏移量overflow:'none', // 文字超出宽度时,是截断还是换行ellipsis:'···', // 文字截断时,末尾显示内容 // 富文本rich:{a:{color:'red',lineHeight:10, } } },// 坐标轴线的样式axisLine:{show:true, // 是否显示坐标轴轴线symbol:'none', // 轴线两边箭头symbolSize:[10,15], // 轴线两边箭头大小symbolOffset:[0,0], // 轴线两边的箭头偏移// 轴线样式lineStyle:{color:'red', // 轴线颜色width:5, // 轴线宽度 type:'solid', // 轴线类型dashOffset:10, // 轴线为虚线时的偏移量cap:'butt', // 轴线末端形状join:'bevel', // 线段相连部分的图形miterLimit:10, // join 为 miter 时,斜截面比例shadowBlur:10, // 轴线阴影模糊大小shadowColor:'red', // 轴线阴影颜色shadowOffsetX:10, // 轴线阴影水平偏移量shadowOffsetY:10, // 轴线阴影垂直偏移量opacity:0.5, // 轴线透明度 } },// 坐标轴刻度的样式axisTick:{show:true, // 是否显示坐标轴刻度alignWithLabel:true, // boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐 interval:1, // 坐标轴刻度显示间隔inside:true, // 坐标轴刻度是否朝内length:10, // 坐标轴刻度的长度// 刻度线的样式lineStyle:{// ··· 与上方的 axisLine 中 lineStyle 内容一张 }},// 坐标轴次刻度线的样式minorTick:{show:false, // 是否显示次刻度线splitNumber:5, // 次刻度分割数,默认为 5段length:3, // 次刻度的长度// 次刻度线的样式lineStyle:{// ··· 与上方的 axisLine 中 lineStyle 内容一张 }, },// 坐标轴刻度标签样式axisLabel:{show:true, // 是否显示刻度标签interval:'auto', // 坐标轴刻度标签显示间隔inside:true, // 刻度标签是否朝内rotate:-90, // 刻度标签旋转角度margin:10, // 刻度标签与轴线之间的距离formatter:'{value}', // 刻度标签内容格式器showMinLabel:true, // 是否显示最小的 labelshowMaxLabel:true, // 是否显示最大的 labelhideOverlap:true, // 是否隐藏重叠的标签color:'red', // 字体颜色fontStyle:'normal', // 文字字体风格fontWeight:'bold', // 文字字体粗细fontFamily:'serif', // 字体系列fontSize:12, // 字体大小align:'left', // 字体水平对齐方式verticalAlign:'top', // 文字垂直对齐方式lineHeight:56, // 行高backgroundColor:'red', // 文字块背景颜色borderColor:'red', // 文字块边框颜色borderWidth:20, // 文字边框宽度borderType:'solid', // 文字块边框描边类型borderDashOffset:10, // 虚线的偏移量borderRadius:40, // 文字块的圆角padding:[2,2,2,2], // 文字块内边距shadowColor:'red', // 文字块的背景阴影颜色shadowBlur:10, // 文字块的背景阴影长度shadowOffsetX:10, // 阴影水平偏移量shadowOffsetY:10, // 阴影垂直偏移量width:120, // 文本显示宽度height:120, // 文本显示高度textBorderColor:'red', // 文字本身的描边颜色textBorderWidth:20, // 文字本身的描边宽度textBorderType:'solid', // 文字的描边类型textBorderDashOffset:20, // 虚线的偏移量textShadowColor:'red', // 文字阴影颜色textShadowBlur:10, // 文字阴影长度textShadowOffsetX:10, // 文字阴影水平偏移量textShadowOffsetY:10, // 文字阴影垂直偏移量overflow:'none', // 文字超出宽度时,是截断还是换行ellipsis:'···', // 文字截断时,末尾显示内容 // 富文本rich:{a:{color:'red',lineHeight:10, }, }, },// 类目数据data:[{value:'name', // 数据类目名称textStyle:{// ··· 与坐标轴名称样式 nameTextStyle 的内容配置一致} } ] }
}
二、解剖图

三、 实例配置代码
使用:

option 配置代码
var dataBJ = [[1, 55, 9, 56, 0.46, 18, 6, '良'],[2, 25, 11, 21, 0.65, 34, 9, '优'],[3, 56, 7, 63, 0.3, 14, 5, '良'],[4, 33, 7, 29, 0.33, 16, 6, '优'],[5, 42, 24, 44, 0.76, 40, 16, '优'],[6, 82, 58, 90, 1.77, 68, 33, '良'],[7, 74, 49, 77, 1.46, 48, 27, '良'],[8, 78, 55, 80, 1.29, 59, 29, '良'],[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],[20, 22, 8, 17, 0.48, 23, 10, '优'],[21, 39, 15, 36, 0.61, 29, 13, '优'],[22, 94, 69, 114, 2.08, 73, 39, '良'],[23, 99, 73, 110, 2.43, 76, 48, '良'],[24, 31, 12, 30, 0.5, 32, 16, '优'],[25, 42, 27, 43, 1, 53, 22, '优'],[26, 154, 117, 157, 3.05, 92, 58, '中度污染'],[27, 234, 185, 230, 4.09, 123, 69, '重度污染'],[28, 160, 120, 186, 2.77, 91, 50, '中度污染'],[29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],[30, 52, 24, 60, 1.03, 50, 21, '良'],[31, 46, 5, 49, 0.28, 10, 6, '优']
];
var dataGZ = [[1, 26, 37, 27, 1.163, 27, 13, '优'],[2, 85, 62, 71, 1.195, 60, 8, '良'],[3, 78, 38, 74, 1.363, 37, 7, '良'],[4, 21, 21, 36, 0.634, 40, 9, '优'],[5, 41, 42, 46, 0.915, 81, 13, '优'],[6, 56, 52, 69, 1.067, 92, 16, '良'],[7, 64, 30, 28, 0.924, 51, 2, '良'],[8, 55, 48, 74, 1.236, 75, 26, '良'],[9, 76, 85, 113, 1.237, 114, 27, '良'],[10, 91, 81, 104, 1.041, 56, 40, '良'],[22, 84, 94, 140, 2.238, 68, 18, '良'],[23, 93, 77, 104, 1.165, 53, 7, '良'],[24, 99, 130, 227, 3.97, 55, 15, '良'],[25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],[26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],[27, 81, 48, 62, 1.619, 26, 3, '良'],[28, 56, 48, 68, 1.336, 37, 9, '良'],[29, 82, 92, 174, 3.29, 0, 13, '良'],[30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],[31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
];
var dataSH = [[1, 91, 45, 125, 0.82, 34, 23, '良'],[2, 65, 27, 78, 0.86, 45, 29, '良'],[3, 83, 60, 84, 1.09, 73, 27, '良'],[4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],[5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],[6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],[7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],[8, 89, 65, 78, 0.86, 51, 26, '良'],[9, 53, 33, 47, 0.64, 50, 17, '良'],[10, 80, 55, 80, 1.01, 75, 24, '良'],[11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],[12, 99, 71, 142, 1.1, 62, 42, '良'],[13, 95, 69, 130, 1.28, 74, 50, '良'],[14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],[15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],[16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],[17, 79, 43, 107, 1.05, 59, 37, '良'],[18, 71, 46, 89, 0.86, 64, 25, '良'],[26, 39, 24, 38, 0.61, 47, 17, '优'],[27, 39, 24, 39, 0.59, 50, 19, '优'],[28, 93, 68, 96, 1.05, 79, 29, '良'],[29, 188, 143, 197, 1.66, 99, 51, '中度污染'],[30, 174, 131, 174, 1.55, 108, 50, '中度污染'],[31, 187, 143, 201, 1.39, 89, 53, '中度污染']
];var schema = [{ name: 'date', index: 0, text: '日期' },{ name: 'AQIindex', index: 1, text: 'AQI' },{ name: 'PM25', index: 2, text: 'PM2.5' },{ name: 'PM10', index: 3, text: 'PM10' },{ name: 'CO', index: 4, text: ' CO' },{ name: 'NO2', index: 5, text: 'NO2' },{ name: 'SO2', index: 6, text: 'SO2' },{ name: '等级', index: 7, text: '等级' }
];
// 线条样式
var lineStyle = {normal: {width: 1.5,opacity: 0.5}
};
option = {// 调色板color: ['#c23531', '#91c7ae', '#dd8668'],legend: {data: ['北京', '上海', '广州'],itemGap: 20},// 平行坐标系配置parallel: [{left: '2%',right: '13%',width:'40%',height:'40%',top: '12%',// 该坐标系中坐标轴的样式parallelAxisDefault: {type: 'value',name: 'AQI指数',nameLocation: 'end',nameGap: 20,nameTextStyle: {fontSize: 12},// 坐标轴的标签配置axisLabel:{show:true,color:'red',fontSize:14},}},{left: '52%',width:'40%',height:'40%',top: '12%',parallelAxisDefault: {type: 'value',name: 'AQI指数',nameLocation: 'end',nameGap: 20,axisLabel:{show:true,fontSize:12,color:'green',},nameTextStyle: {fontSize: 12}}},{left: 'center',width:'60%',height:'35%',bottom: '2%',parallelAxisDefault: {type: 'value',name: 'AQI指数',nameLocation: 'end',nameGap: 20,nameTextStyle: {fontSize: 12},// 显示次刻度线minorTick:{show:true,},axisLabel:{show:true,fontSize:14},}},],// 平行坐标系 坐标轴配置parallelAxis: [// 第一个平行坐标系的轴配置,北京{dim: 0,name: schema[0].text,inverse: true,max: 31,nameLocation: 'start'},{ dim: 1, name: schema[1].text },{ dim: 2, name: schema[2].text },{ dim: 3, name: schema[3].text },{ dim: 4, name: schema[4].text },{ dim: 5, name: schema[5].text },{ dim: 6, name: schema[6].text },{dim: 7,name: schema[7].text,type: 'category',data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']},// 第二个平行坐标系的轴配置,上海{dim: 0,name: schema[0].text,parallelIndex:1,inverse: true,max: 31,nameLocation: 'start'},{ dim: 1, parallelIndex:1, name: schema[1].text },{ dim: 2, parallelIndex:1, name: schema[2].text },{ dim: 3, parallelIndex:1, name: schema[3].text },{ dim: 4, parallelIndex:1, name: schema[4].text },{ dim: 5, parallelIndex:1, name: schema[5].text },{ dim: 6, parallelIndex:1, name: schema[6].text },{dim: 7,name: schema[7].text,parallelIndex:1,type: 'category',data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']},// 第三个平行坐标系的轴配置,广州{dim: 0,name: schema[0].text,parallelIndex:2,inverse: true,max: 31,nameLocation: 'start'},{ dim: 1, parallelIndex:2, name: schema[1].text },{ dim: 2, parallelIndex:2, name: schema[2].text },{ dim: 3, parallelIndex:2, name: schema[3].text },{ dim: 4, parallelIndex:2, name: schema[4].text },{ dim: 5, parallelIndex:2, name: schema[5].text },{ dim: 6, parallelIndex:2, name: schema[6].text },{dim: 7,name: schema[7].text,parallelIndex:2,type: 'category',data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']}],series: [{// 默认绑定至第一个平行坐标系中name: '北京',type: 'parallel',lineStyle: lineStyle,data: dataBJ},{name: '上海',type: 'parallel',lineStyle: lineStyle,// 绑定至第二个平行坐标系中parallelIndex:1,data: dataSH},{name: '广州',type: 'parallel',// 绑定至第三个平行坐标系中parallelIndex:2,lineStyle: lineStyle,data: dataGZ}]
};
相关文章:
16-Echarts简化系列之:平行坐标系 parallel 和 parallelAxis 坐标轴
parallel: 可视化高维数据的图表,特点在于可同时展示多个变量之间的关系,并且可以通过调整轴的顺序和缩放来探索不同的数据视角。帮助探索数据之间的关系和趋势 parallelAxis: 平行坐标系中的坐标轴。 parallel 和 parallelAx…...
SqlServer内存使用情况
-- 查询执行中sql语句 SELECT TOP 500 [session_id], [request_id], [start_time] AS 开始时间, getdate() as 当前时间, [status] AS 状态, [command] AS 命令, dest.[text] AS sql语句, DB_NAME([database_id]) AS 数据库名, [blocking_session_id] AS 正在阻塞其他会话的会话…...
谈谈我的三次考研经历
阿七经历过三次考研。 第一次,大四毕业那年,大三开始有紧迫感,因为大学几年什么也没学会,毕业考试成绩从第二个学期开始就一路下滑,每次都是考前一周突击,最后擦着及格线通过。 大三就开始和几个同学组队…...
红队打靶练习:SAR: 1
目录 信息收集 1、arp 2、netdiscover 3、nmap 4、nikto 5、whatweb 小结 目录探测 1、gobuster 2、dirsearch WEB CMS 1、cms漏洞探索 2、RCE漏洞利用 提权 get user.txt 本地提权 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface:…...
WSL 与真实 linux 环境区别有多大?
随着 Windows 系统的不断发展和完善,WSL(Windows Subsystem for Linux)作为 Windows 10 的一个功能,为 Windows 用户提供了一个可以在 Windows 环境下运行 Linux 二进制可执行文件的环境。然而,尽管 WSL 为用户提供了一…...
Springboot和Spring有什么区别
SpringBoot和Spring的关系 不是:从马车到汽车那种交通出行的颠覆,从燃油车到纯电动车那种能源利用的变革,从人工驾驶到AI智能那种驾驶方式的升级。总之,不是产品的升级换代,不是谁要替换谁。而是:汽车从手…...
创建Qt项目
项目工程名称一般不要有特殊符号,不要有中文 项目工程保存路径可修改的,但路径不要带中文 构建系统,有3种,这里使用qmake qmake和cmake区别 构建过程不同,项目管理不同。 1、构建过程,qmake是Qt框架自带的…...
钢铁企业电力设计手册(上下册)总目录
《钢铁企业电力设计手册》总目录 上册 第1章 高压供配电系统 第2章 负荷计算 第3章 供电系统中的有功和无功冲击负荷 第4章 短路电流计算 第5章 电压偏差和电压波动 第6章 电技术节能 第7章 自备电厂及柴油机组发电 第8章 电弧炉供电 第9章 能源管理系统(电力部分&a…...
Activemq存储KahaDb详解
引言 ActiveMQ在不提供持久化的情况下,数据保存在内存中,一旦应用崩溃或者重启之后,数据都将会丢失,这显然在大部分情况下是我们所不希望的。对此ActiveMQ提供了两种持久化方式以供选择。 kahaDB kahaDB是一个基于文件…...
嵌入式C语言--ROMRAM相关概念(RO-data、RW-data、ZI-data的解释)
嵌入式C语言–ROMRAM相关概念(RO-data、RW-data、ZI-data的解释) ROMRAM相关概念(RO-data、RW-data、ZI-data的解释) 嵌入式C语言--ROMRAM相关概念(RO-data、RW-data、ZI-data的解释)一. ROM(Re…...
用友GRP-U8 ufgovbank.class XXE漏洞复现
0x01 产品简介 用友GRP-U8R10行政事业财务管理软件是用友公司专注于国家电子政务事业,基于云计算技术所推出的新一代产品,是我国行政事业财务领域最专业的政府财务管理软件。 0x02 漏洞概述 用友GRP-U8R10 ufgovbank.class 存在XML实体注入漏洞,攻击者可利用xxe漏洞获取服…...
Vue2 - computed 和 method 的原理区别
目录 1,简单对比2,原理的不同1,method 的处理2,computed 的处理实现缓存触发更新 3,触发更新时的问题 1,简单对比 computed 当做属性使用,method 当做方法使用。computed 可以提供 getter 和 s…...
Python开发环境搭建
Python程序设计语言是解释型语言,其广泛应用于运维开发领域、数据分析领域、人工智能领域,本文主要描述Python开发环境的搭建。 www.python.org 如上所示,从官方网站下载Python最新的稳定版本3.12.1 如上所示,在本地的开发环境安…...
使用Go语言的HTTP客户端进行并发请求
Go语言是一种高性能、简洁的编程语言,它非常适合用于构建并发密集型的网络应用。在Go中,标准库提供了强大的HTTP客户端和服务器功能,使得并发HTTP请求变得简单而高效。 首先,让我们了解为什么需要并发HTTP请求。在许多应用场景中…...
吴恩达深度学习l2week2编程作业—Optimization Methods(最新中文跑通版)
到目前为止,您一直使用渐变下降来更新参数并将成本降至最低。在本笔记本中,您将获得一些更先进的优化方法的技能,这些方法可以加快学习速度,甚至可能使您获得更好的成本函数最终值。拥有一个好的优化算法可能是等待几天与只需几个…...
每日一题——LeetCode1089.复写0
方法一 splice: 通过数组的slice方法,碰到 0就在后面加一个0,最后截取原数组的长度,舍弃后面部分。 但这样做是违反了题目的要求,不要在超过该数组长度的位置写入元素。 var duplicateZeros function(arr) {var le…...
IPv6和IPv4在技术层面的区别
随着互联网的不断发展,IPv4地址资源已经逐渐枯竭,而IPv6地址的使用逐渐成为趋势。IPv6和IPv4作为互联网协议的两个版本,在技术层面存在许多区别。本文将从地址空间、地址表示方法、路由协议、安全性、移动性以及网络性能等方面对IPv6和IPv4进…...
如何充值GPT会员账号?
详情点击链接:如何充值GPT会员账号? 一OpenAI 1.最新大模型GPT-4 Turbo 2.最新发布的高级数据分析,AI画图,图像识别,文档API 3.GPT Store 4.从0到1创建自己的GPT应用 5. 模型Gemini以及大模型Claude2二定制自己的…...
设计模式:单例模式
文章目录 1、概念2、实现方式1、懒汉式2、饿汉式3、双检锁/双重校验锁4、登记式/静态内部类5、枚举6、容器实现单例 1、概念 单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创…...
启动 Mac 时显示闪烁的问号
启动 Mac 时显示闪烁的问号 如果启动时在 Mac 屏幕上看到闪烁的问号,这意味着你的 Mac 无法找到自身的系统软件。 如果 Mac 启动时出现闪烁的问号且无法继续启动,请尝试以下步骤。 1.通过按住其电源按钮几秒钟来关闭 Mac。 2.按一下电源按钮…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
GruntJS-前端自动化任务运行器从入门到实战
Grunt 完全指南:从入门到实战 一、Grunt 是什么? Grunt是一个基于 Node.js 的前端自动化任务运行器,主要用于自动化执行项目开发中重复性高的任务,例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...
【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
鸿蒙(HarmonyOS5)实现跳一跳小游戏
下面我将介绍如何使用鸿蒙的ArkUI框架,实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...
leetcode_69.x的平方根
题目如下 : 看到题 ,我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历,我们是整数的平方根,所以我们分两…...
