Echarts - 多个页面内有N个 echarts 图表，封装组件 CommonEcharts 快捷实现

目录

  • 子组件
  • 父组件使用
    • 注意
  • option 文件
  • 效果展示
  • 相关数据处理（代码备份 - 可不看）
    • 数据处理后页面展示

子组件

CommonEcharts.vue

<template><div><div v-for="id in domId" :id="id" :key="id" class="echarts" /></div>
</template><script>
export default {name: 'CommonEcharts',components: {},props: {info: {type: Object,required: true},domId: {type: Array,required: true},optionsObj: {type: Object,required: true}},data() {return {EchartsObj: {}}},computed: {},watch: {info() {this.init()}},mounted() {window.addEventListener('resize', () => {this.domId.forEach((id) => {if (document.getElementById(id)) {this.EchartsObj[id] = this.$echarts.init(document.getElementById(id))this.EchartsObj[id].resize()}})})this.init()},created() {},methods: {init() {this.domId.forEach((id) => {if (this.EchartsObj[id]) {this.EchartsObj[id].dispose()}const dom = document.getElementById(id)if (!dom) returnthis.EchartsObj[id] = this.$echarts.init(dom)this.EchartsObj[id].setOption(this.optionsObj[id])})}}
}
</script><style lang='scss' scoped>
.echarts {height: 400px;
}
</style>

父组件使用

<template><CommonEcharts :info="info" :dom-id="domId" :options-obj="optionsObj" />
</template><script>
import { lineEcharts, scatterEcharts, barEcharts } from './echarts-options'
import CommonEcharts from './CommonEcharts.vue'export default {name: 'JdcTimeEcharts',components: {CommonEcharts},props: {info: {type: Object,required: true}},data() {return {domId: ['JdcTimeEcharts1', 'JdcTimeEcharts2', 'JdcTimeEcharts3']}},computed: {optionsObj() {return {JdcTimeEcharts1: lineEcharts(),JdcTimeEcharts2: scatterEcharts(),JdcTimeEcharts3: barEcharts()}}}
}
</script><style lang='scss' scoped>
</style>

注意

  • domId 中数据 要与 optionsObj 中数据一一对应

option 文件

echarts-options.js

import * as Echarts from 'echarts'// 折线图 - 参考示例 https://www.makeapie.cn/echarts_content/xS9Oh_JY06.html
export function lineEcharts() {return {backgroundColor: '#080b30',title: {text: '多线图',textStyle: {align: 'center',color: '#fff',fontSize: 20},top: '5%',left: 'center'},tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(0, 255, 233,0)'},{offset: 0.5,color: 'rgba(255, 255, 255,1)'},{offset: 1,color: 'rgba(0, 255, 233,0)'}],global: false}}}},grid: {top: '15%',left: '5%',right: '5%',bottom: '15%'// containLabel: true},xAxis: [{type: 'category',axisLine: {show: true},splitArea: {// show: true,color: '#f00',lineStyle: {color: '#f00'}},axisLabel: {color: '#fff'},splitLine: {show: false},boundaryGap: false,data: ['A', 'B', 'C', 'D', 'E', 'F']}],yAxis: [{type: 'value',min: 0,// max: 140,splitNumber: 4,splitLine: {show: true,lineStyle: {color: 'rgba(255,255,255,0.1)'}},axisLine: {show: false},axisLabel: {show: false,margin: 20,textStyle: {color: '#d1e6eb'}},axisTick: {show: false}}],series: [{name: '注册总量',type: 'line',smooth: true, // 是否平滑showAllSymbol: true,// symbol: 'image://./static/images/guang-circle.png',symbol: 'circle',symbolSize: 15,lineStyle: {normal: {color: '#00b3f4',shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 5,shadowOffsetX: 5}},label: {show: true,position: 'top',textStyle: {color: '#00b3f4'}},itemStyle: {color: '#00b3f4',borderColor: '#fff',borderWidth: 3,shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 2,shadowOffsetX: 2},tooltip: {show: false},areaStyle: {normal: {color: new Echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(0,179,244,0.3)'},{offset: 1,color: 'rgba(0,179,244,0)'}],false),shadowColor: 'rgba(0,179,244, 0.9)',shadowBlur: 20}},data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02]},{name: '注册总量',type: 'line',smooth: true, //是否平滑showAllSymbol: true,// symbol: 'image://./static/images/guang-circle.png',symbol: 'circle',symbolSize: 15,lineStyle: {normal: {color: '#00ca95',shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 5,shadowOffsetX: 5}},label: {show: true,position: 'top',textStyle: {color: '#00ca95'}},itemStyle: {color: '#00ca95',borderColor: '#fff',borderWidth: 3,shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 2,shadowOffsetX: 2},tooltip: {show: false},areaStyle: {normal: {color: new Echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(0,202,149,0.3)'},{offset: 1,color: 'rgba(0,202,149,0)'}],false),shadowColor: 'rgba(0,202,149, 0.9)',shadowBlur: 20}},data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14]}]}
}
// 散点图 - 参考示例 https://www.makeapie.cn/echarts_content/xZvv5T7_R6.html
export function scatterEcharts() {return {tooltip: {position: 'top'},legend: {left: 'center'},title: [],xAxis: {name: '公开年份',nameLocation: 'center',nameGap: 30,type: 'category',data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],boundaryGap: false,splitLine: {show: false},axisLine: {show: false}},yAxis: {name: 'IPC分类号',nameLocation: 'center',nameGap: 50,type: 'category',data: ['G06F', 'G06Q', 'G10L', 'G06K', 'H04L', 'G16H', 'G05B', 'G08C', 'H04N', 'H04M'],axisLabel: {margin: 20},splitLine: {show: true,lineStyle: {type: 'dashed'}},axisLine: {show: false}},series: [{name: 'G06F',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 0, 444],[1, 0, 699],[2, 0, 951],[3, 0, 1126],[4, 0, 1347],[5, 0, 1993],[6, 0, 3096],[7, 0, 5196],[8, 0, 1750],[9, 0, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'G06Q',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 1, 484],[1, 1, 239],[2, 1, 351],[3, 1, 126],[4, 1, 347],[5, 1, 993],[6, 1, 2096],[7, 1, 5196],[8, 1, 1750],[9, 1, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'G10L',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 2, 44],[1, 2, 69],[2, 2, 1951],[3, 2, 116],[4, 2, 147],[5, 2, 993],[6, 2, 3096],[7, 2, 596],[8, 0, 1750],[9, 2, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'G06K',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 3, 1444],[1, 3, 1699],[2, 3, 1951],[3, 3, 1126],[4, 3, 147],[5, 3, 1993],[6, 3, 396],[7, 3, 5196],[8, 3, 150],[9, 3, 2212]],animationDelay: (idx) => {return idx * 5}},{name: 'H04L',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 4, 444],[1, 4, 699],[2, 4, 951],[3, 4, 1126],[4, 4, 1347],[5, 4, 1993],[6, 4, 3096],[7, 4, 5196],[8, 4, 1750],[9, 4, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'G16H',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 5, 444],[1, 5, 699],[2, 5, 951],[3, 5, 1126],[4, 5, 1347],[5, 5, 1993],[6, 5, 3096],[7, 5, 5196],[8, 5, 1750],[9, 5, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'G05B',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 6, 444],[1, 6, 699],[2, 6, 951],[3, 6, 1126],[4, 6, 1347],[5, 6, 1993],[6, 6, 3096],[7, 6, 5196],[8, 6, 1750],[9, 6, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'G08C',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 7, 444],[1, 7, 699],[2, 7, 951],[3, 7, 1126],[4, 7, 1347],[5, 7, 1993],[6, 7, 3096],[7, 7, 5196],[8, 7, 1750],[9, 7, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'H04N',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 8, 444],[1, 8, 699],[2, 8, 951],[3, 8, 1126],[4, 8, 1347],[5, 8, 1993],[6, 8, 3096],[7, 8, 5196],[8, 8, 1750],[9, 8, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'H04M',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 9, 444],[1, 9, 699],[2, 9, 951],[3, 9, 1126],[4, 9, 1347],[5, 9, 1993],[6, 9, 3096],[7, 9, 5196],[8, 9, 1750],[9, 9, 222]],animationDelay: (idx) => {return idx * 5}}]}
}
// 柱状图 - 参考示例 https://www.makeapie.cn/echarts_content/xQWEnqAtdc.html
export function barEcharts() {return {backgroundColor: '#001120',tooltip: {trigger: 'axis',axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},legend: {data: ['邮件营销', '联盟广告'],textStyle: {color: 'rgba(55,255,249,1)'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],splitLine: {show: false},axisLine: {lineStyle: {color: 'rgba(55,255,249,1)'}},axisLabel: {color: 'rgba(55,255,249,1)'}}],yAxis: [{type: 'value',splitLine: {show: false},axisLine: {lineStyle: {color: 'rgba(55,255,249,1)'}}}],series: [{name: '邮件营销',type: 'bar',barWidth: 20,itemStyle: {barBorderRadius: 20,color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(55,255,249,1)'},{offset: 1,color: 'rgba(0,222,215,0.2)'}])},data: [120, 132, 101, 134, 90, 230, 210]},{// 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20type: 'bar',barWidth: 20,barGap: '-100%',stack: '广告',itemStyle: {color: 'transparent'},data: [100, 102, 81, 114, 70, 210, 190]},{name: '联盟广告',type: 'bar',barWidth: 20,barGap: '-100%',stack: '广告',itemStyle: {barBorderRadius: 20,color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0.4,color: 'rgba(255,252,0,1)'},{offset: 1,color: 'rgba(8,228,222,0.2)'}])},data: [220, 182, 191, 234, 290, 330, 310]}]}
}

效果展示

在这里插入图片描述

相关数据处理（代码备份 - 可不看）

/**** echarts 折线图、散点图 - 数据处理 ****/// 数据源
const info = {itemMap: {警告: [{total: 28,cfzl: '1',cfzlView: '警告',wfxl: '12',wfxlView: '超速行驶',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 3,cfzl: '1',cfzlView: '警告',wfxl: '17',wfxlView: '未低速通过',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 6,cfzl: '1',cfzlView: '警告',wfxl: '26',wfxlView: '违法停车',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 21,cfzl: '1',cfzlView: '警告',wfxl: '28',wfxlView: '违法装载',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 3,cfzl: '1',cfzlView: '警告',wfxl: '49',wfxlView: '其他影响安全行为',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 1,cfzl: '1',cfzlView: '警告',wfxl: '28',wfxlView: '违法装载',jtfs: 'B21',jtfsView: '中型栏板半挂车'}],罚款: [{total: 56,cfzl: '2',cfzlView: '罚款',wfxl: '12',wfxlView: '超速行驶',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 6,cfzl: '2',cfzlView: '罚款',wfxl: '17',wfxlView: '未低速通过',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 12,cfzl: '2',cfzlView: '罚款',wfxl: '26',wfxlView: '违法停车',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 42,cfzl: '2',cfzlView: '罚款',wfxl: '28',wfxlView: '违法装载',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 6,cfzl: '2',cfzlView: '罚款',wfxl: '49',wfxlView: '其他影响安全行为',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 2,cfzl: '2',cfzlView: '罚款',wfxl: '28',wfxlView: '违法装载',jtfs: 'B21',jtfsView: '中型栏板半挂车'}]},columns: [{ jtfs: 'B11', jtfsView: '重型栏板半挂车' },{ jtfs: 'B21', jtfsView: '中型栏板半挂车' }]
}// 处理代码
function optionsObj() {const xAxisData = []const yAxisData = []this.info?.columns?.forEach((item) => {!xAxisData.includes(item.jtfsView) && xAxisData.push(item.jtfsView)})const seriesNameList = Object.keys(this.info?.itemMap)const seriesList1 = []const seriesList2 = []seriesNameList.forEach((seriesName) => {const data1 = []this.info?.itemMap[seriesName].forEach((i) => {const xIndex = xAxisData.findIndex((xItem) => xItem === i.jtfsView)const yIndex = yAxisData.findIndex((yItem) => yItem === i.wfxlView)if (!yAxisData.includes(i.wfxlView)) {yAxisData.push(i.wfxlView)seriesList2.push({name: i.wfxlView,data: [[xIndex, seriesList2.length, i.total]]})} else {const seriesList2Index = seriesList2.findIndex((seriesList2Item) => seriesList2Item.name === i.wfxlView)const seriesDataIndex = seriesList2[seriesList2Index].data.findIndex((dataItem) => dataItem[0] === xIndex && dataItem[1] === yIndex)if (seriesDataIndex !== -1) {seriesList2[seriesList2Index].data[seriesDataIndex] = [xIndex,yIndex,i.total + seriesList2[seriesList2Index].data[seriesDataIndex][2]]} else {seriesList2[seriesList2Index].data.push([xIndex, yIndex, i.total])}}data1[xIndex] = (data1[xIndex] || 0) + (i.total || 0)})seriesList1.push({name: seriesName,data: data1})})console.log('xAxisData----', xAxisData)console.log('yAxisData----', yAxisData)console.log('seriesList1----', seriesList1)console.log('seriesList2----', seriesList2)return {// 折线图JdcTimeEcharts1: lineEcharts({xAxisData,seriesList: seriesList1}),// 散点图JdcTimeEcharts2: scatterEcharts({xAxisName: '车辆类型',xAxisData,yAxisData,seriesList: seriesList2})}
}// 处理结果
const xAxisData = ['重型栏板半挂车', '中型栏板半挂车']
const yAxisData = ['超速行驶', '未低速通过', '违法停车', '违法装载', '其他影响安全行为']
const seriesList1 = [{name: '警告',data: [61, 1]},{name: '罚款',data: [122, 2]}
]
const seriesList2 = [{name: '超速行驶',data: [[0, 0, 84]]},{name: '未低速通过',data: [[0, 1, 9]]},{name: '违法停车',data: [[0, 2, 18]]},{name: '违法装载',data: [[0, 3, 63], [1, 3, 3]]},{name: '其他影响安全行为',data: [[0, 4, 9]]}
]/**** echarts图表option配置项 ****/
// import * as Echarts from 'echarts'// 折线图
function lineEcharts({ xAxisData = [], seriesList = [] }) {const colorList = ['#00b3f4','#00ca95','#fce07e','#f18585','#8fcde5','#62b58e','#fd9d75','#ae80c3']const defaultColor = '#ee96d6'return {backgroundColor: '#080b30',title: {show: !xAxisData.length && !seriesList.length,text: '暂无数据',left: 'center',top: 'center',textStyle: {color: '#fff'}},tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(0, 255, 233,0)'},{offset: 0.5,color: 'rgba(255, 255, 255,1)'},{offset: 1,color: 'rgba(0, 255, 233,0)'}],global: false}}}},grid: {top: '15%',left: '5%',right: '5%',bottom: '15%'// containLabel: true},xAxis: [{type: 'category',axisLine: {show: true},splitArea: {// show: true,color: '#f00',lineStyle: {color: '#f00'}},axisLabel: {color: '#fff'},splitLine: {show: false},boundaryGap: false,// data: ['A', 'B', 'C', 'D', 'E', 'F']data: xAxisData}],yAxis: [{type: 'value',min: 0,// max: 140,splitNumber: 4,splitLine: {show: true,lineStyle: {color: 'rgba(255,255,255,0.1)'}},axisLine: {show: false},axisLabel: {show: false,margin: 20,textStyle: {color: '#d1e6eb'}},axisTick: {show: false}}],series: seriesList.map((item, index) => {return {name: item.name,type: 'line',smooth: true,showAllSymbol: true,symbol: 'circle',symbolSize: 15,lineStyle: {normal: {color: colorList[index] || defaultColor,shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 5,shadowOffsetX: 5}},label: {show: true,position: 'top',textStyle: {color: colorList[index] || defaultColor}},itemStyle: {color: colorList[index] || defaultColor,borderColor: '#fff',borderWidth: 3,shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 2,shadowOffsetX: 2},areaStyle: {normal: {color: new Echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: (colorList[index] || defaultColor) + '4d' // 30%},{offset: 1,color: (colorList[index] || defaultColor) + '00' // 0%}],false),shadowColor: (colorList[index] || defaultColor) + 'e6', // 90%shadowBlur: 20}},// data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02]data: item.data}})}
}
// 散点图
function scatterEcharts({ xAxisName = '', xAxisData = [], yAxisData = [], seriesList = [] }) {return {title: {show: !xAxisData.length && !yAxisData.length && !seriesList.length,text: '暂无数据',left: 'center',top: 'center',textStyle: {color: '#fff'}},tooltip: {position: 'top',formatter: function(params) {return (yAxisData[params.value[1]] +'<br />' +params.marker +xAxisData[params.value[0]] +'：' +params.value[2])}},legend: {show: false,left: 'center'},xAxis: {name: xAxisName,nameLocation: 'center',nameGap: 30,type: 'category',boundaryGap: false,splitLine: {show: false},axisLine: {show: false},// data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],data: xAxisData},yAxis: {name: '',nameLocation: 'center',nameGap: 50,type: 'category',axisLabel: {margin: 20},splitLine: {show: true,lineStyle: {type: 'dashed'}},axisLine: {show: false},// data: ['G06F', 'G06Q', 'G10L', 'G06K', 'H04L', 'G16H', 'G05B', 'G08C', 'H04N', 'H04M'],data: yAxisData},series: seriesList.map((item) => {return {name: item.name,type: 'scatter',symbolSize: (val) => {return val[2] % 40},animationDelay: (idx) => {return idx * 5},// data: [//   [0, 0, 444],//   [1, 0, 699],//   [2, 0, 951],//   [3, 0, 1126],//   [4, 0, 1347],//   [5, 0, 1993],//   [6, 0, 3096],//   [7, 0, 5196],//   [8, 0, 1750],//   [9, 0, 222]// ],data: item.data}})}
}

数据处理后页面展示

在这里插入图片描述

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

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

相关文章

go select

go select

select 是与 switch 相似的控制结构&#xff0c;与 switch 不同的是&#xff0c;select 中虽然也有多个 case&#xff0c;但是这些 case 中的表达式必须都是 channel 的收发操作。 select 能够让 goroutine 同时等待多个 channel 可读或者可写&#xff0c;在多个 channel 状态改…
阅读更多...
章十五、Maven —— Maven 简介、Maven 开发环境搭建、命令、打包案例

章十五、Maven —— Maven 简介、Maven 开发环境搭建、命令、打包案例

一、 Maven 简介 Maven 是 Apache 软件基金会的一个开源项目&#xff0c;是一个优秀的项目构建工具&#xff0c;它用来帮助开发者管理项目中的 jar&#xff0c;以及 jar 之间的依赖关系&#xff08;在A.jar文件中用到了B.jar&#xff09;、完成项目的编译&#xff08;.java -&g…
阅读更多...
Compose Button移除水波纹效果

Compose Button移除水波纹效果

一、背景 在使用Compose实现Button按钮时&#xff0c;设计要求移除按钮的水波纹效果&#xff0c;只保留按压效果&#xff0c;经查Compose1.4.3版本中&#xff0c;并没有直接移除水波纹的能力 二、遇到问题 经过多次尝试&#xff0c;使用Compose的Button组件始终无法实现目标效…
阅读更多...
html通过数据改变，图片跟着改变

html通过数据改变，图片跟着改变

改变前 改变后 通过数据来控制样式展示 <template><div>通过num控制图标是否更改{{num}}<div class"box"><!-- 如果num大于1则是另一种&#xff0c;样式&#xff0c;如果小时1&#xff0c;则是另一种样式 --><div class"item&qu…
阅读更多...
小阿轩yx-Shell 编程之循环语句与函数

小阿轩yx-Shell 编程之循环语句与函数

小阿轩yx-Shell 编程之循环语句与函数 for 循环语句 可以很好地解决顺序编写异常烦琐、困难重重的全部代码 &#xff08;&#xff09;{}&#xff1a;里边写的都是命令 &#xff09;&#xff1a;不能嵌套 $&#xff08;&#xff09;&#xff1a;可以嵌套&#xff0c;适合更…
阅读更多...
2-Django项目进阶--继续学生管理系统

2-Django项目进阶--继续学生管理系统

目录 项目框架: urls.py views.py modules.py class_data.html add_and_modify.html add_stu.html 笔记: 继承语法 模板继承总结&#xff1a; 班级添加 add_and_modify.html 修改添加公用一个页面即可 views.py 班级修改 views.py url.py 班级删除 views.py…
阅读更多...
boost asio异步服务器（2）实现伪闭包延长连接生命周期

boost asio异步服务器（2）实现伪闭包延长连接生命周期

闭包 在函数内部实现一个子函数&#xff0c;子函数的作用域内能访问外部函数的局部变量。闭包就是能够读取其他函数内部变量。但是由于闭包会使得函数中的变量都被保存在内存中&#xff0c;内存消耗很大&#xff0c;所以不能滥用闭包&#xff0c;否则会造成程的性能问题&#x…
阅读更多...
构造器--5.28

构造器--5.28

不用一个个属性赋值的方法&#xff1a; 知道了类的创建与使用&#xff0c;但是每次赋值都是一个个调用&#xff0c;我们可以用构造器使得方法简单一点&#xff0c;不用一个个调用属性赋值&#xff0c;直接传参就OK了&#xff1b; 点击类名然后ctrl可以查看构造器 public yanxi…
阅读更多...
C++完成特色旅游管理信息系统

C++完成特色旅游管理信息系统

背景&#xff1a; 继C完成淄博烧烤节管理系统后&#xff0c;我们来到了特色旅游管理信息系统的代码编写&#xff0c;历史链接点下方。 C完成淄博烧烤节管理系统_淄博烧烤总账管理系统的-CSDN博客 问题描述&#xff1a; 为了更好的管理各个服务小组&#xff0c;开发相应的管…
阅读更多...
民国漫画杂志《时代漫画》第30期.PDF

民国漫画杂志《时代漫画》第30期.PDF

时代漫画30.PDF: https://url03.ctfile.com/f/1779803-1248635414-87c8c8?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps: 资源来源网络!
阅读更多...
webpack打包配置项

webpack打包配置项

webpack打包配置项 在config.js 中 module.exports {publicPath: process.env.NODE_ENV production ? / : /, //静态资源目录outputDir: dist, //打包名称assetsDir: static,//静态资源&#xff0c;目录devServer: {port: port,open: false,overlay: {warnings: false,erro…
阅读更多...
SpringBoot自动装配源码

SpringBoot自动装配源码

自动装配&#xff1a; 实际上就是如何将Bean自动化装载到IOC容器中管理&#xff0c;Springboot 的自动装配时通过SPI 的方式来实现的 SPI&#xff1a;SpringBoot 定义的一套接口规范&#xff0c;这套规范规定&#xff1a;Springboot 在启动时会扫描外部引用 jar 包中的META-IN…
阅读更多...
css 渐变色边框

css 渐变色边框

效果图&#xff1a; 代码&#xff1a; <style>:root{--br-radius: 12px;}.list{position: relative;}.list_tle{margin-top: 15px;margin-bottom: 5px;}.item{position: relative;display: inline-flex;} .br1 {padding: 10px 16px;clip-path: inset(0 round 6px);borde…
阅读更多...
官宣｜HelpLook现已入驻钉钉应用市场，助力企业知识管理知识

官宣｜HelpLook现已入驻钉钉应用市场，助力企业知识管理知识

前一阵子OpenAI公司最新的GPT-4o技术震撼发布&#xff0c;人工智能的实际应用前景再次引起行业瞩目&#xff0c;或者被GPT4o的数据分析等特色功能折服。如您正寻求将AI技术融入企业知识管理&#xff0c;不要错过HelpLook&#xff01;HelpLook AI知识库已经正式入驻钉钉应用市场…
阅读更多...
基于Android的家庭理财APP的设计与实现(论文+源码)_kaic

基于Android的家庭理财APP的设计与实现(论文+源码)_kaic

摘 要 随着我国居民收入和生活水平的提高&#xff0c;家庭理财成为人们热议的焦点问题。在需求分析阶段&#xff0c;系统从用户的实际需求出发&#xff0c;确定了用户账户管理、记账、数据分析和提醒功能等几个核心需求。用户账户管理包括用户注册、登录和密码找回等基本操作…
阅读更多...
大数据技术Hbase列数据库——topic1

大数据技术Hbase列数据库——topic1

目录 搭建单机版Hbase验证方法一验证方法二 搭建单机版Hbase 验证方法一 使用 jps 命令查看 HMaster 进程是否启动 首先使用xftp 7上传hbase-2.1.0安装压缩包到虚拟机进行解压缩到某一地址&#xff0c;这里解压缩到了上传的路径即/root/software/ tar -zxvf hbase-2.1.0-bi…
阅读更多...
2025第十届美陈展

2025第十届美陈展

展位又遭疯抢&#xff01;2025第十届美陈展释放“无界之美” 美是全球通用的语言&#xff0c;人类对美的追求始终如一&#xff0c;大众审美在经历了时代的变迁后开始趋同&#xff0c;东方文明深处的美学经济开始崛起。 在如今商业迈入存量阶段&#xff0c;以品牌为突破口打造…
阅读更多...
基于 vuestic-ui 实战教程 - 登录篇

基于 vuestic-ui 实战教程 - 登录篇

1. 简介 登录做为一个系统的门面&#xff0c;也是阻挡外界的一道防线&#xff0c;那在vuestic-ui中如何做登录功能呢。在这里就之间沿用初始版本的Login页面&#xff0c;作为一个演示模板&#xff0c;后续需要改进的读者可以在此篇文章的基础上修改。 2. 登录接口相关api 与 t…
阅读更多...
python连接mysql,并整理（去哪儿网）页面数据到表

python连接mysql,并整理（去哪儿网）页面数据到表

##引入requests/pymysql模块 本地安装mysql数据库&#xff0c;安装图形化工具navicat import requests from pymysql import Connect#创建客户端连接信息 client Connect(host127.0.0.1,port3306,userroot,password, ) #创建游标 cursor client.cursor() cursor.execute(cre…
阅读更多...
17- PHP 开发-个人博客项目TP 框架路由访问安全写法历史漏 洞

17- PHP 开发-个人博客项目TP 框架路由访问安全写法历史漏 洞

常见的php框架&#xff1a;laravel和thinkphp和yii 这里以thinkphp为例 thinkphp目录访问设置 这里只找到了这个3.多的源代码&#xff0c;没找点5.的&#xff0c;凑合一下 链接&#xff1a;GitHub - top-think/thinkphp: ThinkPHP3.2 ——基于PHP5的简单快速的面向对象的PHP…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023