首页分享动保门店数据大屏原型图

动保门店数据大屏原型图

来源：萌宠菠菠乐园时间：2026-02-28 22:09

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动保门店数据大屏</title>  <script src="https://webapi.amap.com/maps?v=2.0&key=您的高德地图Key"></script>  <script src="https://gcore.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <style> /* 全局样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; } body { background-color: #0a1a3b; color: #fff; overflow: hidden; padding: 20px; } .container { display: flex; flex-direction: column; height: 100vh; } /* 标题区域 */ .header { text-align: center; margin-bottom: 20px; } .header h1 { font-size: 32px; font-weight: bold; letter-spacing: 2px; background: linear-gradient(90deg, #00d2ff, #3a7bd5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 10px rgba(58, 123, 213, 0.3); } /* 主内容区 */ .dashboard { display: grid; grid-template-columns: 3fr 1fr; gap: 20px; flex: 1; } /* 地图区域 */ .map-container { background: rgba(16, 31, 63, 0.7); border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); padding: 15px; } #map { width: 100%; height: 100%; border-radius: 5px; } /* 侧边统计区域 */ .stats-container { display: flex; flex-direction: column; gap: 20px; } .stat-card { background: rgba(16, 31, 63, 0.7); border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); padding: 20px; } .card-title { font-size: 18px; color: #5cb9ff; margin-bottom: 15px; display: flex; align-items: center; } .card-title i { margin-right: 8px; font-size: 20px; } /* 数据卡片 */ .data-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px 0; } .data-value { font-size: 32px; font-weight: bold; color: #00e7ff; margin: 10px 0; } .data-label { font-size: 14px; color: #aaa; } /* 资质统计 */ .qualification-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .qualification-item { background: rgba(0, 125, 255, 0.1); border-radius: 8px; padding: 10px; text-align: center; } /* 底部区域 */ .bottom-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; height: 30%; } .chart-container { background: rgba(16, 31, 63, 0.7); border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); padding: 15px; } .chart-title { font-size: 16px; color: #5cb9ff; margin-bottom: 10px; } #monthlyChart, #reportChart { width: 100%; height: 100%; } </style> </head> <body> <div class="container"> <div class="header"> <h1>动保门店数据大屏</h1> </div> <div class="dashboard"> <div class="map-container"> <div id="map"></div> </div> <div class="stats-container">  <div class="stat-card"> <div class="card-title"> <i></i>门店统计 </div> <div class="data-card"> <div class="data-value">1,284</div> <div class="data-label">全国门店总数</div> </div> <div class="qualification-stats"> <div class="qualification-item"> <div class="data-value">328</div> <div class="data-label">广东省门店</div> </div> <div class="qualification-item"> <div class="data-value">56</div> <div class="data-label">广州市门店</div> </div> <div class="qualification-item"> <div class="data-value">12</div> <div class="data-label">越秀区门店</div> </div> </div> </div>  <div class="stat-card"> <div class="card-title">资质统计</div> <div class="qualification-stats"> <div class="qualification-item"> <div class="data-value">1,234</div> <div class="data-label">营业执照</div> </div> <div class="qualification-item"> <div class="data-value">1,105</div> <div class="data-label">GSP认证</div> </div> <div class="qualification-item"> <div class="data-value">853</div> <div class="data-label">渔医证书</div> </div> <div class="qualification-item"> <div class="data-value">2,156</div> <div class="data-label">检测报告</div> </div> </div> </div>  <div class="stat-card"> <div class="card-title"> <i></i>证书统计 </div> <div class="qualification-stats"> <div class="qualification-item"> <div class="data-value">1,105</div> <div class="data-label">GSP数量</div> </div> <div class="qualification-item"> <div class="data-value">853</div> <div class="data-label">渔医数量</div> </div> <div class="qualification-item"> <div class="data-value">2,156</div> <div class="data-label">检测报告</div> </div> <div class="qualification-item"> <div class="data-value">328</div> <div class="data-label">本月新增</div> </div> </div> </div> </div> </div> <div class="bottom-container"> <div class="chart-container"> <div class="chart-title">每月新增数据统计</div> <div id="monthlyChart"></div> </div> <div class="chart-container"> <div class="chart-title">检测报告类型分布</div> <div id="reportChart"></div> </div> </div> </div> <script> // 初始化地图 const map = new AMap.Map('map', { zoom: 5, // 中国地图初始缩放级别 center: [104.195, 35.861], // 中国中心点坐标 viewMode: '3D', mapStyle: 'amap://styles/darkblue', // 深色地图样式 showIndoorMap: false, expandZoomRange: true, zooms: [3, 18] }); // 添加下钻功能 map.on('click', function(e) { // 这里应调用AMap的行政区划查询API实现下钻功能 // 示例: 点击广东省下钻到广东省 if(e.lnglat.lat > 20 && e.lnglat.lat < 25 && e.lnglat.lng > 109 && e.lnglat.lng < 117) { map.setZoomAndCenter(8, [113.26, 23.12]); // 广东 } // 点击广州市下钻到广州市 else if(e.lnglat.lat > 22.5 && e.lnglat.lat < 24 && e.lnglat.lng > 112.5 && e.lnglat.lng < 114.5) { map.setZoomAndCenter(11, [113.27, 23.13]); // 广州 } // 点击越秀区下钻到越秀区 else if(e.lnglat.lat > 23.1 && e.lnglat.lat < 23.15 && e.lnglat.lng > 113.2 && e.lnglat.lng < 113.3) { map.setZoomAndCenter(14, [113.27, 23.13]); // 越秀区 // 添加珠江新城的标记点 addPearlRiverMarker(); } }); // 添加珠江新城标记点 function addPearlRiverMarker() { const marker = new AMap.Marker({ position: [113.321, 23.119], // 珠江新城坐标 title: '珠江新城动保门店', content: `<div style="background-color:#ff4d4f; width:20px; height:20px; border-radius:50%; border:3px solid #fff; display:flex; align-items:center; justify-content:center; font-size:12px;">店</div>`, offset: new AMap.Pixel(-10, -10) }); map.add(marker); // 添加信息窗口 const infoWindow = new AMap.InfoWindow({ content: '<div style="padding:5px;"><h3 style="margin:0 0 5px 0;color:#333;">珠江新城动保门店</h3><p style="margin:0;color:#666;">地址: 广州市越秀区珠江新城</p><p style="margin:0;color:#666;">营业时间: 9:00-18:00</p></div>', offset: new AMap.Pixel(0, -30) }); marker.on('click', function() { infoWindow.open(map, marker.getPosition()); }); } // 添加标记点（模拟数据） function addMarkers() { // 广东主要城市坐标（模拟门店位置） const cities = [ {name: '广州', lnglat: [113.27, 23.13]}, {name: '深圳', lnglat: [114.06, 22.55]}, {name: '珠海', lnglat: [113.52, 22.30]}, {name: '汕头', lnglat: [116.69, 23.39]}, {name: '佛山', lnglat: [113.12, 23.02]}, {name: '韶关', lnglat: [113.62, 24.84]}, {name: '湛江', lnglat: [110.36, 21.27]}, {name: '肇庆', lnglat: [112.47, 23.05]}, {name: '江门', lnglat: [113.08, 22.58]}, {name: '茂名', lnglat: [110.92, 21.68]}, {name: '惠州', lnglat: [114.42, 23.12]}, {name: '梅州', lnglat: [116.12, 24.29]}, {name: '汕尾', lnglat: [115.38, 22.79]}, {name: '河源', lnglat: [114.70, 23.74]}, {name: '阳江', lnglat: [111.98, 21.87]}, {name: '清远', lnglat: [113.03, 23.70]}, {name: '东莞', lnglat: [113.75, 23.04]}, {name: '中山', lnglat: [113.38, 22.52]}, {name: '潮州', lnglat: [116.62, 23.67]}, {name: '揭阳', lnglat: [116.37, 23.55]}, {name: '云浮', lnglat: [112.04, 22.93]} ]; // 创建标记点 cities.forEach(city => { const marker = new AMap.Marker({ position: city.lnglat, title: city.name + '动保门店', content: `<div style="background-color:#00b7ee; width:16px; height:16px; border-radius:50%; border:2px solid #fff;"></div>` }); map.add(marker); }); } // 初始化图表 function initCharts() { // 每月新增折线图 const monthlyChart = echarts.init(document.getElementById('monthlyChart')); const monthlyOption = { tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], axisLine: { lineStyle: { color: '#4a6da7' } }, axisLabel: { color: '#9bb3d9' } }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#4a6da7' } }, axisLabel: { color: '#9bb3d9' }, splitLine: { lineStyle: { color: 'rgba(74, 109, 167, 0.3)' } } }, series: [ { name: '门店新增', type: 'line', smooth: true, lineStyle: { width: 3, color: '#00e7ff' }, symbol: 'circle', symbolSize: 8, itemStyle: { color: '#00e7ff' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: 'rgba(0, 231, 255, 0.3)'}, {offset: 1, color: 'rgba(0, 231, 255, 0.1)'} ]) }, data: [45, 52, 48, 63, 55, 60, 78, 75, 88, 90, 105, 120] } ] }; monthlyChart.setOption(monthlyOption); // 检测报告类型饼图 const reportChart = echarts.init(document.getElementById('reportChart')); const reportOption = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', right: 10, top: 'center', textStyle: { color: '#9bb3d9' } }, series: [ { name: '检测报告类型', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#0a1a3b', borderWidth: 2 }, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '18', fontWeight: 'bold', color: '#fff' } }, labelLine: { show: false }, data: [ {value: 523, name: '水质检测'}, {value: 689, name: '病害检测'}, {value: 487, name: '饲料检测'}, {value: 324, name: '药物残留'}, {value: 133, name: '其他'} ], color: ['#00e7ff', '#00b7ee', '#0087bb', '#005e89', '#003a57'] } ] }; reportChart.setOption(reportOption); } // 页面加载完成后执行 window.onload = function() { addMarkers(); initCharts(); // 响应窗口大小变化 window.addEventListener('resize', function() { map.resize(); echarts.init(document.getElementById('monthlyChart')).resize(); echarts.init(document.getElementById('reportChart')).resize(); }); }; </script> </body> </html>

动保门店数据大屏原型图

推荐分享

缅因猫能长多大一种体型较大的猫

警惕狗贩的骗人损招星期狗的症状特征

动保门店数据大屏原型图

推荐分享

缅因猫能长多大 一种体型较大的猫

警惕狗贩的骗人损招 星期狗的症状特征

缅因猫能长多大一种体型较大的猫

警惕狗贩的骗人损招星期狗的症状特征