基于Echarts+HTML5可视化数据大屏展示-白茶大数据溯源平台V2

效果展示:
在这里插入图片描述
代码结构:
在这里插入图片描述

主要代码实现
index.html布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="static/css/bootstrap-3.3.4.css"><link rel="stylesheet" type="text/css" media="all" href="static/css/daterangepicker.css" /><link rel="stylesheet" href="static/css/css.css"><link rel="stylesheet" href="static/css/index2.css"><link rel="stylesheet" href="static/css/daterangepicker.css"><title>福鼎白茶大数据溯源平台</title><style>@font-face {font-family: 'DINPro';src: url(/fonts/DINPro.woff.ttf);}</style>
</head>
<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: 'd016a95780d3e7402b8d354d2556337b', //密钥}
</script>
<script type="text/javascript"src="static/js/dc94675363994d37877d674545fccad6.js"></script><body><div class="content" onclick="fun(event)"><div class="header"><div class="header_l"><ul><li class="sel_li"><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/header-3.png" alt=""><span>首页</span></a></li><li class=""><a href="https://gitee.com/iGaoWei/big-data-view"><span>应用介绍</span></a></li><li class=""><a href="https://gitee.com/iGaoWei/big-data-view"><span>产业介绍</span></a></li></ul></div><div class="header_m"><h1>福鼎白茶大数据溯源平台</h1></div><div class="header_r"><ul><li class=""><a href="https://gitee.com/iGaoWei/big-data-view"><span>产量产值</span></a></li><li class=""><a href="https://gitee.com/iGaoWei/big-data-view"><span>业务系统</span></a></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/header-1.png" alt=""><span>退出</span></a></li></ul></div></div><div class="main"><div class="main_l"><div class="item mainl1"><div class="title"><h2>交易产量</h2><p><span class="span_c day1_cl"></span><span class="month1_cl"></span><spanclass="year1_cl"></span></p><button id="date1"></button></div><div class="con"><div class="con_t"><p>当日茶青交易产量:<span class="jyl_1" data-ride="numberGrow21" data-value="150.9" data-time="3"data-digit="2">150.9</span><b>公斤</b></p></div><div class="con_f bar1"></div></div></div><div class="item mainl2"><div class="title"><h2>交易产量</h2><p><span class="span_c day2_cl"></span><span class="month2_cl"></span><spanclass="year2_cl"></span></p><button id="date2"></button></div><div class="con"><div class="con_t"><p>当日毛茶交易产量:<span class="jyl_2" data-ride="numberGrow22" data-value="150.9" data-time="3"data-digit="2">150.9</span><b>公斤</b></p></div><div class="con_f bar2"></div></div></div><!-- <img src="static/picture/dot.png" alt=""> --></div><!-- <div class="point"><img src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">福鼎市</span></div> --><!-- <div class="main_m"> --><div class="eject_bigbox"><div class="close2"></div><h2>产业介绍</h2><div class="con_box"><video src="/images/video.mp4" controls></video><div class="textbox"><p>福鼎是中国白茶发源地和核心产区,也是唯一由国家部委授予的“中国白茶之乡”,素有“世界白茶在中国,中国白茶在福鼎”之美誉。这里三面环山一面临海,以花岗岩地貌、微酸性砂砾土壤为主,千百年来,独特的地理气候条件孕育出福鼎大白茶、福鼎大毫茶两大国家级茶树良种。福鼎白茶运用传统独特工艺,最大限度地保留了茶叶中的营养和活性,造就了福鼎白茶“毫香蜜韵、历久弥香、自然健康”的特质。新茶有甜爽之美,老茶有甘醇之韵,广为世人所推崇。</p><p>福鼎市大力实施基地化生态茶园建设,推行茶园不使用化学农药全覆盖,始终坚持做老百姓喝得起的放心茶、健康茶。福鼎白茶大数据溯源系统于2021年3月10日正式启用,必将更好地维护消费者的权益,确保每一份福鼎白茶都来自福鼎正宗原产地。</p><p>福鼎白茶,让世界更美好!</p></div></div></div><div class="main_m"><div class="main_m_t"><div class="item1"><p data-ride="numberGrow25" data-value="6551" data-time="3" data-digit="2">6551</p><span>茶农 (户)</span><p data-ride="numberGrow25" data-value="150.6" data-time="3" data-digit="2">150.6</p><span>经纪人(家)</span></div><div class="item1"><p data-ride="numberGrow25" data-value="85" data-time="3" data-digit="2">85</p><span>茶企 (家)</span><p data-ride="numberGrow25" data-value="65.8" data-time="3" data-digit="2">65.8</p><span>加工点(家)</span></div><div class="item1"><p data-ride="numberGrow25" data-value="14374.64" data-time="3" data-digit="2">14,374.64</p><span>茶园总面积 (万亩)</span><p data-ride="numberGrow25" data-value="35.40" data-time="3" data-digit="2">35.40</p><span>交易额 (亿元)</span></div><div class="item1"><p data-ride="numberGrow25" data-value="338029.51" data-time="3" data-digit="2">338,029.51</p><span>交易产量 (万吨)</span><p data-ride="numberGrow25" data-value="2.4576" data-time="3" data-digit="2">2.4576</p><span>溯源码量 (个)</span></div></div></div><div class="eject control"><div class="close"></div><div class="infor"><h2><img src="static/picture/address.png" alt=""><span class="areaname">地区名称</span></h2><div class="con_text"><p>茶农(户):<span>152</span></p><p>茶企(家):<span>152</span></p><p>茶园面积(千克):<span>152</span></p><p>预测产量(户):<span>152</span></p><p>当年实际产量(千克):<span>152</span></p><p>当年溯源产量(千克):<span>152</span></p><p>茶叶产值</p></div></div><div class="line5"></div><!-- <div class="con "></div> --></div><div class="main_m_f"><ul><li class="active"><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-4.png" alt=""> <img src="static/picture/mainm-4h.png" alt=""></a><span>数字溯源</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-5.png" alt=""> <img src="static/picture/mainm-5h.png" alt=""></a><span>病虫害测报</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-6.png" alt=""> <img src="static/picture/mainm-6h.png" alt=""></a><span>非化学农药监管</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-7.png" alt=""> <img src="static/picture/mainm-7h.png" alt=""></a><span>茶山地貌</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-8.png" alt=""> <img src="static/picture/mainm-8h.png" alt=""></a><span>数字交易</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-9.png" alt=""> <img src="static/picture/mainm-9h.png" alt=""></a><span>数字加工</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-10.png" alt=""> <img src="static/picture/mainm-10h.png" alt=""></a><span>白茶文旅</span></li><li><a href="https://gitee.com/iGaoWei/big-data-view"><img src="static/picture/mainm-11.png" alt=""> <img src="static/picture/mainm-11h.png" alt=""></a><span>茶文化</span></li></ul></div><!-- </div> --><div class="main_r"><div class="item mainr1"><div class="title"><h2>交易额</h2><p><span class="span_c day3_cl"></span><span class="month3_cl"></span><spanclass="year3_cl"></span></p><button id="date3"></button></div><div class="con"><div class="con_t"><p>当月茶青交易额:<span class="jyl_3" data-ride="numberGrow23" data-value="150.9" data-time="3"data-digit="2">150.9</span><b>万元</b></p></div><div class="con_f bar3"></div></div></div><div class="item mainr2"><div class="title"><h2>交易额</h2><p><span class="span_c day4_cl"></span><span class="month4_cl"></span><spanclass="year4_cl"></span></p><button id="date4"></button></div><div class="con"><div class="con_t"><p>当月毛茶交易额:<span class="jyl_4" data-ride="numberGrow24" data-value="150.9" data-time="3"data-digit="2">150.9</span><b>公斤</b></p></div><div class="con_f bar4"></div></div></div></div><div class="map3" id="map3"></div></div></div><div class="container"><div class="well configurator" style="display: none;"><form><div class="row"><div class="col-md-4"><div class="form-group"><label for="parentEl">parentEl</label><input type="text" class="form-control" id="parentEl" value="" placeholder="body"></div><div class="form-group"><label for="startDate">startDate</label><input type="text" class="form-control" id="startDate" value="07/01/2015"></div><div class="form-group"><label for="endDate">endDate</label><input type="text" class="form-control" id="endDate" value="07/15/2015"></div><div class="form-group"><label for="minDate">minDate</label><input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY"></div><div class="form-group"><label for="maxDate">maxDate</label><input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY"></div></div><div class="col-md-4"><div class="checkbox"><label><input type="checkbox" id="autoApply"> autoApply</label></div><div class="checkbox"><label><input type="checkbox" id="singleDatePicker"> singleDatePicker</label></div><div class="checkbox"><label><input type="checkbox" id="showDropdowns"> showDropdowns</label></div><div class="checkbox"><label><input type="checkbox" id="showWeekNumbers"> showWeekNumbers</label></div><div class="checkbox"><label><input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers</label></div><div class="checkbox"><label><input type="checkbox" id="timePicker"> timePicker</label></div><div class="checkbox"><label><input type="checkbox" id="timePicker24Hour"> timePicker24Hour</label></div><div class="form-group"><label for="timePickerIncrement">timePickerIncrement (in minutes)</label><input type="text" class="form-control" id="timePickerIncrement" value="1"></div><div class="checkbox"><label><input type="checkbox" id="timePickerSeconds"> timePickerSeconds</label></div><div class="checkbox"><label><input type="checkbox" id="dateLimit"> dateLimit (with example date range span)</label></div><div class="checkbox"><label><input type="checkbox" id="ranges"> ranges (with example predefined ranges)</label></div><div class="checkbox"><label><input type="checkbox" id="locale"> locale (with example settings)</label><label id="rtl-wrap"><input type="checkbox" id="rtl"> RTL (right-to-left)</label></div><div class="checkbox"><label><input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars</label></div></div><div class="col-md-4"><div class="checkbox"><label><input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars</label></div><div class="checkbox"><label><input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput</label></div><div class="checkbox"><label><input type="checkbox" id="showCustomRangeLabel" checked="checked"> showCustomRangeLabel</label></div><div class="form-group"><label for="opens">opens</label><select id="opens" class="form-control"><option value="right" selected>right</option><option value="left">left</option><option value="center">center</option></select></div><div class="form-group"><label for="drops">drops</label><select id="drops" class="form-control"><option value="down" selected>down</option><option value="up">up</option></select></div><div class="form-group"><label for="buttonClasses">buttonClasses</label><input type="text" class="form-control" id="buttonClasses" value="btn btn-sm"></div><div class="form-group"><label for="applyClass">applyClass</label><input type="text" class="form-control" id="applyClass" value="btn-success"></div><div class="form-group"><label for="cancelClass">cancelClass</label><input type="text" class="form-control" id="cancelClass" value="btn-default"></div></div></div></form></div></div><style type="text/css">.demo {position: relative;}.demo i {position: absolute;bottom: 10px;right: 24px;top: auto;cursor: pointer;}footer {text-align: center;font-size: .1rem;color: #4B7EFE;}</style><script src="static/js/main.js"></script><script src="static/js/jquery-1.10.2.js"></script><script src="static/js/bootstrap-3.3.4.js"></script><script src="static/js/echarts.min.js"></script><script src="static/js/flexible.js"></script><script src="static/js/jquery.js"></script><script src="static/js/moment.js"></script><script src="static/js/moment.min.js"></script><script src="static/js/daterangepicker.js"></script><script src="static/js/date.js"></script><script src="static/js/echarts-gl.min.js"></script><script src="static/js/index2.js"></script><script src="static/js/echarts-amap.min.js"></script><script src="static/js/scrolllazyinit.js"></script><!-- <script src="static/js/vue.min.js"></script> --><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: 'd016a95780d3e7402b8d354d2556337b', //密钥}</script><script type="text/javascript"src="static/js/c704ac907ae64ebe95b77033f819f0dd.js"></script><script language="javascript">var options = {subdistrict: 0,extensions: 'all',level: 'district'};var district = new AMap.DistrictSearch(options);//查询福鼎市区域console.log(district);district.search('福鼎市', function (status, result) {// var bounds = result.districtList[0]['boundaries'];console.log(status);console.log(result);var bounds = result.districtList[0]['boundaries'];var mask = [];for (var i = 0; i < bounds.length; i++) {mask.push([bounds[i]]);}//实例化地图var map = new AMap.Map('map3', {mask: mask,zoom: 10, //设置当前显示级别expandZoomRange: true, //开启显示范围设置zooms: [7, 16], //最小显示级别为7,最大显示级别为20center: [120.219761, 27.218884],viewMode: '3D', //这里特别注意,设置为3D则其它地区不显示zoomEnable: true, //是否可以缩放地图resizeEnable: true,features: ['bg'],layers: [new AMap.TileLayer.Satellite()],// mapStyle: "amap://styles/light"});console.log(mask, 'mask');//添加描边for (var i = 0; i < bounds.length; i++) {new AMap.Polyline({path: bounds[i],strokeColor: '#3078AC',strokeWeight: 2,map: map})}// var map = new AMap.Map('container', {//     center: [116.397428, 39.90923],//     layers: [new AMap.TileLayer.Satellite()],//     zoom: 13// });var marker1 = new AMap.Marker({position: new AMap.LngLat(120.17931, 27.18487), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="白琳镇"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">白琳镇</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker2 = new AMap.Marker({position: new AMap.LngLat(120.18986, 27.23783), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="点头镇"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">点头镇</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker3 = new AMap.Marker({position: new AMap.LngLat(120.33273, 27.16229), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="店下镇" style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">店下镇</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker4 = new AMap.Marker({position: new AMap.LngLat(120.10877, 27.39024), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="叠石乡" style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">叠石乡</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker5 = new AMap.Marker({position: new AMap.LngLat(120.04024, 27.25816), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="管阳镇"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">管阳镇</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker6 = new AMap.Marker({position: new AMap.LngLat(120.23642, 27.39734), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="贯岭镇"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">贯岭镇</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker7 = new AMap.Marker({position: new AMap.LngLat(120.36065, 27.28290), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="佳阳乡"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">佳阳乡</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker8 = new AMap.Marker({position: new AMap.LngLat(120.37194, 27.19149), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="龙安开发区"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">龙安开发区</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker9 = new AMap.Marker({position: new AMap.LngLat(120.12456, 27.16098), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="磻溪镇"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">磻溪镇</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker10 = new AMap.Marker({position: new AMap.LngLat(120.32633, 27.31061), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="前岐镇"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">前岐镇</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker11 = new AMap.Marker({position: new AMap.LngLat(120.42714, 27.16607), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="沙埕镇"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">沙埕镇</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker12 = new AMap.Marker({position: new AMap.LngLat(120.22933, 27.33183), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="山前街道"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">山前街道</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker13 = new AMap.Marker({position: new AMap.LngLat(120.25803, 27.10589), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="太姥山镇"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">太姥山镇</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker14 = new AMap.Marker({position: new AMap.LngLat(120.22068, 27.33119), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img"  data-name="桐山街道" style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">桐山街道</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker15 = new AMap.Marker({position: new AMap.LngLat(120.21741, 27.33213), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img"  data-name="桐城街道" style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">桐城街道</span></div>`,offset: new AMap.Pixel(15, -20),});var marker16 = new AMap.Marker({position: new AMap.LngLat(120.23491, 27.03605), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="硖门畲族乡"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">硖门畲族乡</span></div>`,offset: new AMap.Pixel(-15, -20),});var marker17 = new AMap.Marker({position: new AMap.LngLat(120.33378, 26.96008), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]content: `<div class="point"><img class="point_child_img" data-name="嵛山镇"  style="display:block;margin-left:10px;width:31px;height:45px;" src="static/picture/dot.png" alt=""><span class="point_child" style="color: white;font-size: 14px;white-space: nowrap;margin-top: -10px;">嵛山镇</span></div>`,offset: new AMap.Pixel(-15, -20),});var markerList = [marker1, marker2, marker3, marker4, marker5, marker6, marker7, marker8, marker9, marker10, marker11, marker12, marker13, marker14, marker15, marker16, marker17]// console.log(marker1);// console.log(markerList);map.add(markerList);});</script><script>var eject1 = document.getElementsByClassName('eject')[0]var eject2 = document.getElementsByClassName('eject_bigbox')[0]eject1.onclick = function () {eject1.classList.add("control")}eject2.onclick = function () {eject2.classList.add("eject_bigbox_control")}function fun(e) {var tar = e.targetconsole.log(tar)if (tar.classList[0] == 'point_child') {// tar.innerHTMLeject1.classList.remove("control")eject1.children[1].children[0].children[1].innerHTML = tar.innerHTML;} else if (tar.classList[0] == 'point_child_img') {eject1.classList.remove("control")eject1.children[1].children[0].children[1].innerHTML = tar.dataset.name;} else {eject1.classList.add("control")}}$('.content .main .main_m_f ul li').click(function () {$(this).addClass('active').siblings().removeClass('active')})</script>
</body></html>

作品来自于网络收集、侵权立删

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

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

相关文章

Linux 系统网络配置及 IP 地址相关知识汇总

Linux 系统网络配置及 IP 地址相关知识汇总 一、IP地址基础 IP地址&#xff1a;在计算机网络中用来唯一标识一台设备的一组数字。 二、IPv4相关知识 1. IPv4的表示方法 采用点分十进制表示&#xff0c;即由4个0-255的十进制数通过点分隔组成&#xff08;如192.168.1.1&#xff…

百度股价突破120美元创年内新高,AI云成为增长新引擎

美东时间9月16日&#xff0c;百度&#xff08;NASDAQ: BIDU&#xff09;美股大涨近8%&#xff0c;收盘价突破120美元&#xff0c;站上124美元高位&#xff0c;创2023年10月以来新高。北京时间9月17日港股开盘&#xff0c;百度&#xff08;09888.HK&#xff09;港股再次暴涨&…

《彩虹六号:围攻》“Siege X”发布会3月14日举行!

使用jQuery的常用方法与返回值分析 jQuery是一个轻量级的JavaScript库&#xff0c;旨在简化HTML文档遍历和操作、事件处理以及动画效果的创建。本文将介绍一些常用的jQuery方法及其返回值&#xff0c;帮助开发者更好地理解和运用这一强大的库。 1. 选择器方法 jQuery提供了多种…

[从青铜到王者] Spring Boot+Redis+Kafka电商场景面试全解析

互联网大厂Java开发岗技术面试实录&#xff1a;严肃面试官VS搞笑程序员谢飞机 文章内容 第一轮&#xff1a;基础框架与并发控制&#xff08;电商系统基础能力&#xff09; 面试官&#xff08;严肃&#xff09;&#xff1a;欢迎进入面试环节&#xff0c;首先请用3句话总结Spring…

【DMA】DMA架构解析

目录 1 DMA架构 1. 芯片架构图一览 2. AHB总线矩阵挂载 3. AHB1/APB1的桥和AHB1/APB2的桥 4. DMA1 和 DMA2 的区别 2 AHB总线矩阵 1 DMA架构 1. 芯片架构图一览 2. AHB总线矩阵挂载 stm32F411 芯片的 AHB 总线矩阵上共挂载了 6 主 5 从 六主&#xff1a; Icode-bus、D…

GPS 定位器:精准追踪的“隐形守护者”

GPS 定位器&#xff1a;精准追踪的“隐形守护者” 一、什么是 GPS 定位器&#xff1f; GPS 定位器是一种基于 全球定位系统&#xff08;Global Positioning System, GPS&#xff09; 的智能追踪设备。 通过接收卫星信号并结合通信模块&#xff08;如 4G、NB-IoT&#xff09;&am…

前端拖拽排序实现

1. 使用 HTML5 事件 触发时机 核心任务 dragstart 开始拖拽时 准备数据&#xff0c;贴上标签 dragover 经过目标上方时 必须 preventDefault()&#xff0c;发出“允许放置”的信号 dragleave 离开目标上方时 清理高亮等临时视觉效果 drop 在目标上松手时 接收数据…

arm coresight

这是一个arm设计的调试基础架构&#xff0c;我们常用的debug基本都包含在内。比如ETM、PTM、ITM、HTM、ETB等。 注意ETM、PTM、ITM、HTM、ETB是coresight的子集。这些工具相比普通debug的断点调试&#xff0c;需要更高的专业水平&#xff0c;因此也用于复杂软件故障定位、性能…

《华为基本法》 —— 企业发展的导航仪

当一家企业从 “小作坊” 向 “规模化组织” 跨越时&#xff0c;最需要的是什么&#xff1f;华为的答案&#xff0c;藏在 1998 年出台的《华为基本法》里。1998 年&#xff0c;《华为基本法》正式颁布&#xff0c;这部凝结华为早期经营智慧的纲领性文件&#xff0c;不仅为华为从…

【完整源码+数据集+部署教程】传统韩文化元素分割系统: yolov8-seg-GFPN

背景意义 研究背景与意义 随着全球化的加速&#xff0c;传统文化的保护与传承面临着前所未有的挑战。尤其是韩国的传统文化&#xff0c;作为东亚文化的重要组成部分&#xff0c;蕴含着丰富的历史、艺术和哲学内涵。然而&#xff0c;随着现代化进程的推进&#xff0c;许多传统文…

构建AI智能体:三十五、决策树的核心机制(一):刨根问底鸢尾花分类中的参数推理计算

一、初识决策树想象一个生活中的场景&#xff0c;我们去水果店买一个西瓜&#xff0c;该怎么判断一个西瓜是不是又甜又好的呢&#xff1f;我们可能会问自己一系列问题&#xff1a;首先看看它的纹路清晰吗&#xff1f;如果“是”&#xff0c;那么它可能是个好瓜。如果“否“&…

c语言中实现线程同步的操作

线程 常见问题 同步权限 在多线程 / 多进程并发时&#xff0c;为避免共享资源&#xff08;如内存变量、硬件设备、文件&#xff09;被同时修改导致的数据不一致&#xff0c;需要通过 “同步机制” 控制谁能访问资源 ——“获取同步权限” 就是线程 / 进程申请这种访问资格的过程…

一台设备管理多个 GitHub 账号:从配置到切换的完整指南

一台设备管理多个 GitHub 账号&#xff1a;从配置到切换的完整指南 在日常开发中&#xff0c;我们经常需要在同一台电脑上使用多个 GitHub 账号&#xff08;比如个人账号和工作账号&#xff09;。但默认情况下&#xff0c;Git 会优先使用全局配置的账号&#xff0c;导致推送代…

即插即用,秒入虚拟:TouchDIVER Pro 触觉手套 赋能 AR/VR 高效交互

一、即插即用&#xff0c;零门槛开启沉浸之旅 在XR&#xff08;扩展现实&#xff09;技术高速发展的今天&#xff0c;用户对“真实感”的追求愈发迫切。Weart公司旗下旗舰产品TouchDIVER Pro触觉手套&#xff0c;凭借无需适配器、无需复杂设置的极简设计&#xff0c;打破传统触…

GitHub热榜项目 - 日榜之应用场景与未来发展趋势

一、引言GitHub热榜项目 - 日榜呈现出丰富多样的技术成果&#xff0c;这些项目蕴含着巨大的应用潜力&#xff0c;并且对未来数智化技术的发展有着重要的指示作用。深入探究其应用场景以及未来发展趋势&#xff0c;能让我们更好地把握技术发展方向&#xff0c;将这些前沿技术应用…

Linux网络:socket编程TCP

文章目录前言一&#xff0c;服务器端流程1-1 绑定协议1-2 绑定IP和端口1-3 监听客户端1-4 接收连接1-5 收发数据1-6 关闭连接1-7 服务端整体代码二&#xff0c;客户端流程2-1 指定地址和端口2-2 连接服务器2-3 发送消息2-4 客户端整体代码前言 TCP 的通信过程就像两个人打电话…

飞书智能查询机器人搭建说明文档

飞书智能查询机器人搭建说明文档 一、使用手册 1. 创建飞书机器人应用 如果仅需对接已有机器人应用则可跳过该步骤&#xff08;建议各业务部门独立使用各自的机器人应用&#xff09;。在飞书开发者后台中创建企业自建应用&#xff0c;添加机器人应用能力并申请对应的身份权限…

蓝色系列包装行业网站 适合企业站,带手机版自适应

内容目录一、详细介绍二、效果展示1.部分代码2.效果图展示三、学习资料下载一、详细介绍 蓝色通用企业网站是基于SDCMS四合一企业网站管理系统开发的模板&#xff0c;适合企业站&#xff0c;带手机版。 四网合一企业网站管理系统是一个以PHPMySQL/Sqlite进行开发的四网合一网…

【大模型:知识图谱】--6.Neo4j DeskTop安装+使用

上一期讲了图知识库的安装&#xff0c; 【图数据库】--Neo4j 安装_neo4j安装-CSDN博客 现在来看看可视化管理程序&#xff1a;Neo4j DeskTop的安装. 需要先安装java环境&#xff0c;具体看上面 目录 1.Neo4j DeskTop版下载 2.Neo4j DeskTop版安装 3.Neo4j DeskTop版使用 …

Python爬虫实战——使用NetNut网页解锁器获取亚马逊电商数据

文章目录一、电商数据的作用1.1 支撑科学决策&#xff0c;降低试错成本1.2 提升运营效率&#xff0c;实现降本增效1.3 深化用户理解&#xff0c;驱动个性化服务1.4 监测竞品动态&#xff0c;制定差异化策略1.5 驱动产品创新&#xff0c;满足用户需求二、爬取目标三、环境准备四…