xzzn/SIPAIIS_WMS_JSSW
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8cc0555d1f7bac0dcbf91960328ba20272f6d312
SIPAIIS_WMS_JSSW/src/main/webapp/jsp/bigScreen2.jsp

882 lines
28 KiB
Plaintext
Raw Normal View History

官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
UI、logo
2026-02-02 14:44:36 +08:00
<html>
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
<head>
<meta charset="UTF-8" />
UI、logo
2026-02-02 14:44:36 +08:00
<title>区域管线大屏展示</title>
git
2026-02-02 23:52:49 +08:00
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/echarts3.0.js"></script>
管道GIS展示
2026-03-12 01:43:29 +08:00
<!-- 天地图 API -->
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=f423193014cde7bf44b224c6ab2b1210"></script>
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
<!-- <script
type="text/javascript"
src="../../node_modules/jquery/dist/jquery.min.js"
></script> -->
大屏静态数据
2026-02-06 16:30:47 +08:00
<!-- <script type="text/javascript" src="../../JS/echarts3.0.js"></script> -->
UI、logo
2026-02-02 14:44:36 +08:00
<style>
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto; /* Allow scrolling if window is smaller */
background-color: #030829;
}
.screen-container {
width: 6500px;
height: 1800px;
/* background-image: url("../../IMG/screen2.png"); */
background-image: url('<%=request.getContextPath()%>/IMG/screen2.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.stat-card {
position: absolute;
top: 257px;
/* left: 1910px; */
width: 200px;
height: 71px;
color: rgba(255, 255, 255, 1);
font-family: Gilroy;
font-weight: 500;
font-size: 60px;
}
.card-1 {
left: 1910px;
}
.card-2 {
left: 2832px;
}
.card-3 {
left: 3754px;
}
.ring-chart-wrapper {
position: absolute;
top: 563px;
left: 1880px;
width: 662px;
height: 455px;
}
.pie-chart-wrapper-2 {
position: absolute;
top: 563px;
left: 2572px;
width: 662px;
height: 455px;
}
.gauge-chart-wrapper-3 {
position: absolute;
top: 563px;
left: 3264px;
width: 662px;
height: 455px;
}
.gauge-chart-wrapper-4 {
position: absolute;
top: 563px;
left: 3956px;
width: 662px;
height: 455px;
}
.bar-chart-wrapper-5 {
position: absolute;
top: 1158px;
left: 1881px;
width: 1353px;
height: 592px;
}
.bar-chart-wrapper-6 {
position: absolute;
top: 1158px;
left: 3265px;
width: 1353px;
height: 592px;
}
.ring-chart-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
mix-blend-mode: normal;
/* border: 1px solid rgba(27, 126, 242, 1); */
box-sizing: border-box;
/* background: rgba(27, 126, 242, 0.6); */
}
#ring-chart-content,
#pie-chart-content-2,
#gauge-chart-content-3,
#gauge-chart-content-4,
#bar-chart-content-5,
#bar-chart-content-6 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
/* 全屏提示遮罩 */
.fullscreen-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
cursor: pointer;
}
.fullscreen-overlay .tip-content {
text-align: center;
color: #fff;
}
.fullscreen-overlay .tip-content h2 {
font-size: 48px;
margin-bottom: 20px;
color: #46F2FF;
}
.fullscreen-overlay .tip-content p {
font-size: 24px;
color: #7ef3ff;
}
.fullscreen-overlay .tip-content .icon {
font-size: 80px;
margin-bottom: 20px;
}
UI、logo
2026-02-02 14:44:36 +08:00
</style>
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
</head>
<body>
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
<!-- 全屏提示遮罩 -->
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
<%-- <div class="fullscreen-overlay" id="fullscreenOverlay" onclick="enterFullscreen()">--%>
<%-- <div class="tip-content">--%>
<%-- <div class="icon">🖥️</div>--%>
<%-- <h2>点击进入全屏展示</h2>--%>
<%-- <p>按 ESC 键可退出全屏</p>--%>
<%-- </div>--%>
<%-- </div>--%>
UI、logo
2026-02-02 14:44:36 +08:00
<div class="screen-container">
管道GIS展示
2026-03-12 01:43:29 +08:00
<div id="map-container" style="position: absolute; top: 280px; left: 70px; width: 1760px; height: 1470px; background-color: white;"></div>
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
<div class="stat-card card-1">53829.5</div>
<div class="stat-card card-2">2495</div>
<div class="stat-card card-3">2460</div>
<div class="ring-chart-wrapper">
<div class="ring-chart-bg"></div>
<div id="ring-chart-content"></div>
</div>
<div class="pie-chart-wrapper-2">
<div class="ring-chart-bg"></div>
<div id="pie-chart-content-2"></div>
</div>
<div class="gauge-chart-wrapper-3">
<div class="ring-chart-bg"></div>
<div id="gauge-chart-content-3"></div>
</div>
<div class="gauge-chart-wrapper-4">
<div class="ring-chart-bg"></div>
<div id="gauge-chart-content-4"></div>
</div>
<div class="bar-chart-wrapper-5">
<div class="ring-chart-bg"></div>
<div id="bar-chart-content-5"></div>
</div>
<div class="bar-chart-wrapper-6">
<div class="ring-chart-bg"></div>
<div id="bar-chart-content-6"></div>
</div>
UI、logo
2026-02-02 14:44:36 +08:00
</div>
git
2026-02-02 23:52:49 +08:00
<script>
管道GIS展示
2026-03-12 01:43:29 +08:00
// ==================== 天地图初始化 ====================
var contextPath = "<%=request.getContextPath()%>";
var map = null;
var pipelineOverlays = [];
// 初始化天地图
function initTiandituMap() {
// 创建地图实例
map = new T.Map("map-container");
// 放大地图级别 (15比13更放大)
map.centerAndZoom(new T.LngLat(121.34, 30.74), 15);
map.enableScrollWheelZoom();
// 设置暗色主题 - 切换为卫星影像底图
map.setMapType(TMAP_SATELLITE_MAP);
// 添加控件
var scale = new T.Control.Scale();
map.addControl(scale);
var zoom = new T.Control.Zoom();
map.addControl(zoom);
// 隐藏地图类型切换控件，保持暗色主题
setTimeout(function() {
var mapTypeCtrl = document.querySelector(".TMAP_maptype");
if (mapTypeCtrl) {
mapTypeCtrl.style.display = "none";
}
}, 500);
console.log("[天地图] 初始化完成 - 暗色主题，缩放级别15");
// 加载管道数据
loadPipelineData();
}
// 加载管道数据
function loadPipelineData() {
$.ajax({
url: contextPath + '/jsp/z_bigScreen/geo.json',
type: 'GET',
dataType: 'json',
success: function(data) {
if (data && data.features) {
var pipelines = data.features.map(function(feature) {
var attr = feature.attributes || {};
var geom = feature.geometry || {};
var paths = geom.paths || null;
var lengthM = attr.Shape_Leng ? (attr.Shape_Leng * 111000).toFixed(2) : '-';
return {
id: attr.FID,
name: '管线-' + attr.FID,
length: lengthM,
elevation: attr.Elevation || 0,
color: attr.Color || 6,
layer: attr.Layer || 'WS_LINE',
paths: paths
};
});
renderPipelines(pipelines);
console.log("[管道数据] 加载完成，共", pipelines.length, "条");
}
},
error: function(xhr, status, error) {
console.error("[管道数据] 加载失败:", error);
}
});
}
// 渲染管道到地图
function renderPipelines(pipelines) {
// 先清除之前的管线
clearPipelines();
pipelines.forEach(function(item) {
if (!item.paths || !item.paths.length) return;
var pathsArray = item.paths;
// 如果 paths 的第一个元素不是数组，说明是单路径格式，需要包装
if (!Array.isArray(pathsArray[0]) || !Array.isArray(pathsArray[0][0])) {
pathsArray = [pathsArray];
}
// 按颜色区分管线 (Color === 6 为深蓝色，其他为深红色)
var lineColor = item.color === 6 ? '#0066cc' : '#0ea6c1';
// 渲染每条路径
pathsArray.forEach(function(pathCoords) {
if (!pathCoords || pathCoords.length < 2) return;
var points = pathCoords.map(function(p) {
return new T.LngLat(p[0], p[1]);
});
var polyline = new T.Polyline(points, {
color: lineColor,
weight: 8,
opacity: 1
});
map.addOverLay(polyline);
pipelineOverlays.push(polyline);
// 信息窗口
var infoHtml = '<div style="font-size:13px;line-height:1.5;">' +
'<strong style="color:#007bff;">管线 #' + item.id + '</strong><br>' +
'名称: ' + (item.name || '-') + '<br>' +
'管长: ' + (item.length || '-') + ' m<br>' +
'高程: ' + (item.elevation || 0).toFixed(2) + ' m' +
'</div>';
var infoWindow = new T.InfoWindow(infoHtml, { offset: new T.Point(0, 0) });
polyline.addEventListener('click', function(e) {
map.openInfoWindow(infoWindow, e.lnglat);
});
});
});
console.log("[管线渲染] 完成，共渲染", pipelineOverlays.length, "条管线段");
}
// 清除管道覆盖物
function clearPipelines() {
pipelineOverlays.forEach(function(overlay) {
map.removeOverLay(overlay);
});
pipelineOverlays = [];
}
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// ==================== 数据统一管理 ====================
var pageData = {
// 统计卡片数据
statCards: {
card1: 100,
card2: 200,
card3: 400,
},
// 饼图1数据 - 管线类型统计
pieChart1: [
{ value: 335, name: "II级钢筋混凝土管 承插接口" },
{ value: 310, name: "焊接钢管 焊接接口" },
{ value: 274, name: "高密度聚乙烯双壁波纹管" },
{ value: 235, name: "聚乙烯PE管" },
{ value: 200, name: "II级钢筋混凝土管" },
{ value: 180, name: "高密度聚乙烯缠绕管" },
{ value: 150, name: "焊接钢管 焊接连接" },
{ value: 140, name: "高密度聚乙烯中空壁缠绕管" },
{ value: 130, name: "钢筋混凝土管" },
{ value: 110, name: "球墨铸铁管" },
{ value: 100, name: "预应力钢筒混凝土管" }
],
// 饼图2数据 - 管线类型统计2
pieChart2: [
{ value: 335, name: "II级钢筋混凝土管 承插接口" },
{ value: 310, name: "焊接钢管 焊接接口" },
{ value: 274, name: "高密度聚乙烯双壁波纹管" },
{ value: 235, name: "聚乙烯PE管" },
{ value: 200, name: "II级钢筋混凝土管" },
{ value: 180, name: "高密度聚乙烯缠绕管" },
{ value: 150, name: "焊接钢管 焊接连接" },
{ value: 140, name: "高密度聚乙烯中空壁缠绕管" },
{ value: 130, name: "钢筋混凝土管" },
{ value: 110, name: "球墨铸铁管" },
{ value: 100, name: "预应力钢筒混凝土管" }
],
// 仪表盘数据
gaugeCharts: {
gauge3: 53829.5,
gauge4: 12345.6
},
// 柱状图数据
barCharts: {
bar5: [
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// 3000, 4500, 1500, 5000, 23000, 1500, 15000, 3000, 4000, 5000, 2000,
// 1000, 500, 2563, 4000
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
],
bar6: [
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// 2000, 3000, 1000, 4000, 18000, 1000, 12000, 2000, 3000, 4000, 1500,
// 800, 400, 2000, 3000
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
]
},
// 柱状图X轴数据
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
barXAxis: [
// "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15"
]
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
};
// 更新统计卡片显示
function updateStatCards() {
$(".card-1").text(pageData.statCards.card1);
$(".card-2").text(pageData.statCards.card2);
$(".card-3").text(pageData.statCards.card3);
}
// 从接口获取数据并更新页面（示例方法，供后期调用）
function fetchDataFromApi(apiUrl) {
$.ajax({
url: apiUrl,
type: "GET",
dataType: "json",
success: function(response) {
// 假设接口返回的数据格式如下：
// {
// statCards: { card1: xxx, card2: xxx, card3: xxx },
// pieChart1: [...],
// pieChart2: [...],
// gaugeCharts: { gauge3: xxx, gauge4: xxx },
// barCharts: { bar5: [...], bar6: [...] }
// }
if (response) {
// 更新数据
if (response.statCards) pageData.statCards = response.statCards;
if (response.pieChart1) pageData.pieChart1 = response.pieChart1;
if (response.pieChart2) pageData.pieChart2 = response.pieChart2;
if (response.gaugeCharts) pageData.gaugeCharts = response.gaugeCharts;
if (response.barCharts) pageData.barCharts = response.barCharts;
if (response.barXAxis) pageData.barXAxis = response.barXAxis;
// 刷新页面
refreshPage();
}
},
error: function(xhr, status, error) {
console.error("获取数据失败:", error);
}
});
}
// 刷新页面所有图表
function refreshPage() {
updateStatCards();
initPieChart();
initPieChart2();
initGaugeChart("gauge-chart-content-3", pageData.gaugeCharts.gauge3);
initGaugeChart("gauge-chart-content-4", pageData.gaugeCharts.gauge4);
initBarChart("bar-chart-content-5", pageData.barCharts.bar5);
initBarChart("bar-chart-content-6", pageData.barCharts.bar6);
}
大屏更新、源头管理
2026-03-05 03:08:24 +08:00
// 进入全屏函数
function enterFullscreen() {
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
document.getElementById('fullscreenOverlay').style.display = 'none';
}
// 监听全屏状态变化
document.addEventListener('fullscreenchange', function() {
var overlay = document.getElementById('fullscreenOverlay');
if (!document.fullscreenElement) {
overlay.style.display = 'flex';
}
});
document.addEventListener('webkitfullscreenchange', function() {
var overlay = document.getElementById('fullscreenOverlay');
if (!document.webkitFullscreenElement) {
overlay.style.display = 'flex';
}
});
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// 获取管道统计数据
function fetchPipelineStats() {
$.ajax({
url: "<%=request.getContextPath()%>/pipeline/pipelineData/getStatistics.do",
type: "GET",
dataType: "json",
success: function(response) {
console.log("管道统计数据:", response);
if (response && response.success) {
// 更新统计卡片
$(".card-1").text(response.totalLength || 0);
$(".card-2").text(response.totalCount || 0);
$(".card-3").text(response.totalCount || 0);
// 更新仪表盘数据
pageData.gaugeCharts.gauge3 = response.totalLength || 0;
pageData.gaugeCharts.gauge4 = response.totalLength || 0;
// 更新饼图数据 - 材质长度比例
if (response.materialLengthRatio && response.materialLengthRatio.length > 0) {
pageData.pieChart1 = response.materialLengthRatio.map(function(item) {
return {
name: item.material,
value: item.length
};
});
}
// 更新饼图数据 - 材质数量比例
if (response.materialCountRatio && response.materialCountRatio.length > 0) {
pageData.pieChart2 = response.materialCountRatio.map(function(item) {
return {
name: item.material,
value: item.count
};
});
}
// 更新柱状图数据 - 管径长度分布
if (response.diameterLengthRatio && response.diameterLengthRatio.length > 0) {
// 取前15个数据
var topData = response.diameterLengthRatio.slice(0, 15);
pageData.barCharts.bar5 = topData.map(function(item) {
return item.length;
});
pageData.barXAxis = topData.map(function(item) {
return item.diameter;
});
}
// 更新柱状图数据 - 管径数量分布
if (response.diameterCountRatio && response.diameterCountRatio.length > 0) {
var topData = response.diameterCountRatio.slice(0, 15);
pageData.barCharts.bar6 = topData.map(function(item) {
return item.count;
});
}
// 重新渲染图表
initPieChart();
initPieChart2();
initGaugeChart("gauge-chart-content-3", pageData.gaugeCharts.gauge3);
initGaugeChart("gauge-chart-content-4", pageData.gaugeCharts.gauge4);
initBarChart("bar-chart-content-5", pageData.barCharts.bar5);
initBarChart("bar-chart-content-6", pageData.barCharts.bar6);
}
},
error: function(xhr, status, error) {
console.error("获取管道统计数据失败:", error);
}
});
}
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
$(document).ready(function () {
管道GIS展示
2026-03-12 01:43:29 +08:00
// 初始化天地图
initTiandituMap();
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
// 初始化统计数据
updateStatCards();
// 初始化图表
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
initPieChart();
initPieChart2();
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
initGaugeChart("gauge-chart-content-3", pageData.gaugeCharts.gauge3);
initGaugeChart("gauge-chart-content-4", pageData.gaugeCharts.gauge4);
initBarChart("bar-chart-content-5", pageData.barCharts.bar5);
initBarChart("bar-chart-content-6", pageData.barCharts.bar6);
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// 获取管道统计数据
fetchPipelineStats();
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
// Double click to toggle fullscreen
$("body").on("dblclick", function () {
launchIntoFullscreen(document.documentElement);
大屏数据展示
2026-02-04 23:46:37 +08:00
});
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
});
git
2026-02-02 23:52:49 +08:00
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
function initPieChart() {
var chartDom = document.getElementById("ring-chart-content");
var myChart = echarts.init(chartDom);
var option = {
color: [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#00d4ff",
"#ffb700",
"#2bff89",
"#915eff",
"#ff7f00",
],
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
tooltip: {
trigger: "item",
formatter: "{b}: {c}m ({d}%)"
},
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
series: [
{
name: "管线类型统计",
type: "pie",
radius: "55%",
center: ["50%", "50%"],
avoidLabelOverlap: true,
label: {
show: true,
position: "outside",
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
formatter: "{b}\n{d}%",
fontSize: 32,
lineHeight: 40,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
align: "left",
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
color: "#fff",
fontWeight: "bold",
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
labelLine: {
show: true,
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
length: 30,
length2: 40,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
lineStyle: {
type: "solid",
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
width: 2,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
},
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
data: pageData.pieChart1,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
],
};
myChart.setOption(option);
}
function initPieChart2() {
var chartDom = document.getElementById("pie-chart-content-2");
var myChart = echarts.init(chartDom);
var option = {
color: [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#00d4ff",
"#ffb700",
"#2bff89",
"#915eff",
"#ff7f00",
],
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
tooltip: {
trigger: "item",
formatter: "{b}: {c}条 ({d}%)"
},
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
series: [
{
name: "管线类型统计2",
type: "pie",
radius: "55%",
center: ["50%", "50%"],
avoidLabelOverlap: true,
label: {
show: true,
position: "outside",
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
formatter: "{b}\n{d}%",
fontSize: 32,
lineHeight: 40,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
align: "left",
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
color: "#fff",
fontWeight: "bold",
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
labelLine: {
show: true,
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
length: 30,
length2: 40,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
lineStyle: {
type: "solid",
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
width: 2,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
},
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
data: pageData.pieChart2,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
],
};
myChart.setOption(option);
}
git
2026-02-02 23:52:49 +08:00
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
function initGaugeChart(domId, value) {
var chartDom = document.getElementById(domId);
var myChart = echarts.init(chartDom);
var option = {
series: [
{
type: "gauge",
startAngle: 180,
endAngle: 0,
min: 0,
max: 300,
splitNumber: 6,
radius: "90%",
center: ["50%", "70%"],
axisLine: {
lineStyle: {
width: 40,
color: [
[
1,
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(65, 108, 243, 1)" },
{ offset: 1, color: "rgba(0, 68, 160, 1)" },
]),
],
],
},
},
pointer: {
show: true,
length: "60%",
width: 6,
itemStyle: {
color: "#00d4ff",
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
color: "#00d4ff",
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
fontSize: 20,
distance: -80,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
formatter: function (value) {
return value;
},
},
detail: {
show: true,
offsetCenter: [0, "40%"],
fontSize: 30,
color: "#fff",
formatter: "{value} m",
},
data: [
{
value: value,
name: "",
},
],
},
],
};
// Adjust value if it exceeds max for visual representation (optional)
// For now, we just set the data value as is, but if it's large like 53829.5,
// the pointer will be pegged at max.
// If the gauge is just a visual indicator and the number is what matters:
// Let's set the gauge pointer to max if value > 300
if (value > 300) {
option.series[0].data[0].value = 300; // Pointer at max
option.series[0].detail.formatter = value + " m"; // Show real value
大屏数据展示
2026-02-04 23:46:37 +08:00
}
git
2026-02-02 23:52:49 +08:00
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
myChart.setOption(option);
}
function initBarChart(domId, data) {
var chartDom = document.getElementById(domId);
var myChart = echarts.init(chartDom);
// Find max value for markPoint (example logic)
var maxVal = Math.max(...data);
var minVal = Math.min(...data);
大屏数据展示
2026-02-04 23:46:37 +08:00
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
var option = {
grid: {
top: "20%",
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
排污户大屏企业对接
2026-03-08 04:08:47 +08:00
data: pageData.barXAxis,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
axisLine: {
lineStyle: { color: "#2C3E50" },
show: true,
// lineStyle: {
// color: 'rgba(255, 255, 255, 0.3)'
// }
},
axisLabel: {
color: "#B7C9E2",
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
fontSize: 40,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
// axisTick: {
// show: false
// }
},
yAxis: {
type: "value",
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// name: "长度(m)",
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
// nameTextStyle: {
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
// color: '#B7C9E2',
// padding: [0, 0, 40, 2300],
// fontSize: 40,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
// },
splitNumber: 5,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
color: "#B7C9E2",
大屏逻辑更新、首页更新、
2026-03-12 00:17:39 +08:00
fontSize: 40,
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.15)",
type: "dashed",
},
},
},
dataZoom: [{ type: "inside" }],
series: [
{
data: data,
type: "bar",
barWidth: "40%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#46F2FF" },
{ offset: 1, color: "#0B4DB5" },
]),
shadowColor: "rgba(0, 0, 0, 0.3)",
shadowBlur: 10,
},
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#6af8ff" },
{ offset: 1, color: "#1560d6" },
]),
},
},
},
],
};
myChart.setOption(option);
}
大屏数据展示
2026-02-04 23:46:37 +08:00
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
function launchIntoFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
大屏数据展示
2026-02-04 23:46:37 +08:00
}
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
}
git
2026-02-02 23:52:49 +08:00
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
git
2026-02-02 23:52:49 +08:00
}
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
}
git
2026-02-02 23:52:49 +08:00
</script>
官网管理对接、大屏更新
2026-03-05 00:35:31 +08:00
</body>
UI、logo
2026-02-02 14:44:36 +08:00
</html>
Reference in New Issue Copy Permalink