996 lines
46 KiB
Plaintext
996 lines
46 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="main.aspx.cs" Inherits="FineUIPro.Web.common.main" %>
|
|||
|
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head id="Head1" runat="server">
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|||
|
|
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no" />
|
|||
|
|
<title>首页</title>
|
|||
|
|
<link href="../res/indexv1/iconfont/iconfont.css" rel="stylesheet" />
|
|||
|
|
<link href="../res/indexv1/css/video-7.15.0.min.css" rel="stylesheet" />
|
|||
|
|
<link href="../res/indexv1/css/index1.css" rel="stylesheet" />
|
|||
|
|
<style type="text/css">
|
|||
|
|
html {
|
|||
|
|
min-height: 700px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="sd-index1-body">
|
|||
|
|
<div class="sd-body">
|
|||
|
|
<div class="sd-body-left">
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">人员统计</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section1-inner">
|
|||
|
|
<div class="sd-user-calc">
|
|||
|
|
<div class="sd-user-calc-left">
|
|||
|
|
<div class="sd-user-calc-item">
|
|||
|
|
<div class="sd-user-calc-label">
|
|||
|
|
<span>管理人员</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-user-calc-value"><span class="sd-security-ratio-value--blue" runat="server" id="divGLPerson">0</span><span>个</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-user-calc-item">
|
|||
|
|
<div class="sd-user-calc-label">
|
|||
|
|
<span>作业人员</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-user-calc-value"><span class="sd-security-ratio-value--blue" runat="server" id="divZYPerson">0</span><span>个</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-user-calc-right">
|
|||
|
|
<canvas id="circleId" data-value="0" class="sd-user-calc-circle" width="110" height="110"></canvas>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">产值统计</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section2-inner">
|
|||
|
|
<div class="sd-output-box" id="outputId"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">进度统计</div>
|
|||
|
|
<div class="sd-section-content sd-section-content-scroll">
|
|||
|
|
<div class="sd-section3-inner" id='section3-inner-div'>
|
|||
|
|
<div class="el-scrollbar">
|
|||
|
|
<div class="sd-rate-list el-scrollbar__wrap">
|
|||
|
|
</div>
|
|||
|
|
<div class="el-scrollbar__bar is-vertical">
|
|||
|
|
<div class="el-scrollbar__thumb" style="transform: translateY(0%); height: 20.5682%;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="el-scrollbar__bar is-horizontal">
|
|||
|
|
<div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body-center">
|
|||
|
|
<div class="sd-body-menus">
|
|||
|
|
<div class="sd-body-menu">
|
|||
|
|
<div class="sd-body-menu-label">在建项目(个)</div>
|
|||
|
|
<div class="sd-body-menu-value sd-body-menu-value--yellow" runat="server" id="divProjectNum">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body-menu">
|
|||
|
|
<div class="sd-body-menu-label">
|
|||
|
|
<div class="sd-body-menu-label-first">年度累计</div>
|
|||
|
|
<div class="sd-body-menu-label-sec">施工计划产值(亿元)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body-menu-value" runat="server" id="divYearPlanOutPutValue">--</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body-menu">
|
|||
|
|
<div class="sd-body-menu-label">
|
|||
|
|
<div class="sd-body-menu-label-first">年度累计</div>
|
|||
|
|
<div class="sd-body-menu-label-sec">施工实际产值(亿元)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body-menu-value" runat="server" id="divYearActualOutPutValue">--</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body-menu">
|
|||
|
|
<div class="sd-body-menu-label">
|
|||
|
|
<div class="sd-body-menu-label-first">年度累计</div>
|
|||
|
|
<div class="sd-body-menu-label-sec">签订合同额(亿元)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body-menu-value" runat="server" id="divHTAmount">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body-menu">
|
|||
|
|
<div class="sd-body-menu-label">
|
|||
|
|
<div class="sd-body-menu-label-first">年度累计</div>
|
|||
|
|
<div class="sd-body-menu-label-sec">施工分包合同(个)</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body-menu-value sd-body-menu-value--yellow" runat="server" id="divHTNum">0</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body-map">
|
|||
|
|
<div class="sd-body-map-switch-btn"><span>中国地图</span><i class="iconfont icon-switch"></i></div>
|
|||
|
|
<div class="js-echarts-map">
|
|||
|
|
<div class="map">
|
|||
|
|
<div class="sd-map" style="width: 100%; height: 650px;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-body-right">
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">安全统计</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section4-inner">
|
|||
|
|
<div class="sd-security">
|
|||
|
|
<div class="sd-security-label">安全人工时</div>
|
|||
|
|
<div class="sd-security-value" runat="server" id="divSafeWorkTime">0</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-security-ratios">
|
|||
|
|
<div class="sd-security-ratio">
|
|||
|
|
<div class="sd-security-ratio-value">
|
|||
|
|
<span
|
|||
|
|
class="sd-security-ratio-value--yellow" runat="server" id="divAllRectify">0</span><span>个</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-security-ratio-label">问题总数</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-security-ratio">
|
|||
|
|
<div class="sd-security-ratio-value">
|
|||
|
|
<span
|
|||
|
|
class="sd-security-ratio-value--blue" runat="server" id="divRectifyRate">0</span><span>%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-security-ratio-label">整改率</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">质量统计</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section5-inner">
|
|||
|
|
<div class="sd-quality">
|
|||
|
|
<div class="sd-quality-num">
|
|||
|
|
问题总数<span runat="server" id="divCQMSAllNum">0</span><em>个</em>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-quality-circles">
|
|||
|
|
<div class="sd-quality-circle">
|
|||
|
|
<!-- <canvas id="circleId1" data-value="35.7" width="116" height="116"></canvas> -->
|
|||
|
|
<canvas id="circleId1" data-value="0" width="100" height="100"></canvas>
|
|||
|
|
<div class="sd-quality-circle-name">整改率</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-quality-circle">
|
|||
|
|
<!-- <canvas id="circleId2" data-value="98.2" width="116" height="116"></canvas> -->
|
|||
|
|
<canvas id="circleId2" data-value="0" width="100" height="100"></canvas>
|
|||
|
|
<div class="sd-quality-circle-name">合格率</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-section">
|
|||
|
|
<div class="sd-section-title ellipsis">视频监控</div>
|
|||
|
|
<div class="sd-section-content">
|
|||
|
|
<div class="sd-section6-inner">
|
|||
|
|
<div class="sd-video-play">
|
|||
|
|
<video preload="none" class="sd-video video-js vjs-big-play-centered" controls poster="">
|
|||
|
|
<source src="https://c.sedin.com/sggl/FileUpload/HazardRegister/2021-08/9c174c0e-8beb-4b41-858b-4b29f66bde97.mp4">
|
|||
|
|
</source>
|
|||
|
|
</video>
|
|||
|
|
<div class="sd-video-desc">
|
|||
|
|
<span>实时线路：线路1</span>
|
|||
|
|
<span>2020-10-10 12:40:26</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-video-items">
|
|||
|
|
<div class="sd-video-item">
|
|||
|
|
<div class="sd-video-item-num sd-video-item-num--blue">6</div>
|
|||
|
|
<div class="sd-video-item-desc">总数</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sd-video-item">
|
|||
|
|
<div class="sd-video-item-num sd-video-item-num--green">4</div>
|
|||
|
|
<div class="sd-video-item-desc">在线</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<script type="text/javascript" src="../res/indexv1/js/jquery-2.1.1.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/indexv1/js/jquery.mousewheel.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/indexv1/js/hScrollPane.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/indexv1/js/echarts-5.2.0.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/indexv1/js/video-7.15.0.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/indexv1/js/draw-circle.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/indexv1/js/china.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/indexv1/js/world.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var onDutyRate = '<%=OnDutyRate %>'
|
|||
|
|
var cRectificationRate = '<%=CRectificationRate %>'
|
|||
|
|
var cQualifiedRate = '<%=CQualifiedRate %>'
|
|||
|
|
function getValues() {
|
|||
|
|
$('#circleId').attr('data-value', onDutyRate);
|
|||
|
|
$('#circleId1').attr('data-value', cRectificationRate);
|
|||
|
|
$('#circleId2').attr('data-value', cQualifiedRate);
|
|||
|
|
}
|
|||
|
|
getValues();
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var xAxisDataBarEchart = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
|
|||
|
|
var monthPlanOutPutValue = JSON.parse('<%=MonthPlanOutPutValue %>')
|
|||
|
|
var monthActualOutPutValue = JSON.parse('<%=MonthActualOutPutValue %>')
|
|||
|
|
var seriesBarEchart =[
|
|||
|
|
{
|
|||
|
|
name: '计划值',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 12,
|
|||
|
|
data: monthPlanOutPutValue,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '实际值',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 12,
|
|||
|
|
data: monthActualOutPutValue,
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
function initBarEchart() {
|
|||
|
|
var chartDom = document.getElementById('outputId');
|
|||
|
|
var myChart = echarts.init(chartDom);
|
|||
|
|
var option;
|
|||
|
|
option = {
|
|||
|
|
dataZoom: [{
|
|||
|
|
type: 'slider',
|
|||
|
|
show: true,
|
|||
|
|
startValue: 0,
|
|||
|
|
endValue: 5,
|
|||
|
|
height: '3',
|
|||
|
|
backgroundColor: 'rgba(47,69,84,0)',
|
|||
|
|
fillerColor: 'rgba(47,69,84,0)',
|
|||
|
|
bottom: '0%',
|
|||
|
|
zoomLock: true,
|
|||
|
|
moveOnMouseWheel: true,
|
|||
|
|
brushSelect: true,
|
|||
|
|
showDetail: false,
|
|||
|
|
}],
|
|||
|
|
color: ['#12CDA2', '#FFC277', '#00AAFF'],
|
|||
|
|
grid: {
|
|||
|
|
top: '5%',
|
|||
|
|
left: '3%',
|
|||
|
|
right: '1%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
showDelay: 0,
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
data: xAxisDataBarEchart,
|
|||
|
|
axisLabel: {
|
|||
|
|
color: '#00beff',
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
onZero: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#00beff',
|
|||
|
|
width: 1,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
boundaryGap: true
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
color: '#00beff',
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'dashed',
|
|||
|
|
color: '#0D3C65',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitNumber: 5,
|
|||
|
|
},
|
|||
|
|
series: seriesBarEchart
|
|||
|
|
};
|
|||
|
|
option && myChart.setOption(option);
|
|||
|
|
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initCircle() {
|
|||
|
|
// 一个环形
|
|||
|
|
var circleOneOption = {
|
|||
|
|
drawing_elem: 'circleId',
|
|||
|
|
bordercolor: '#12cda2',
|
|||
|
|
borderwidth: 1,
|
|||
|
|
percentfontsize: 22,
|
|||
|
|
unitfontsize: 18,
|
|||
|
|
lineWidth: 16,
|
|||
|
|
addLeft: 4,
|
|||
|
|
percentfontcolor: "#12cda2",
|
|||
|
|
unitfontcolor: '#12cda2',
|
|||
|
|
forecolor: '#12cda2',
|
|||
|
|
unitadd: 1,
|
|||
|
|
title: '在岗率',
|
|||
|
|
titlefontcolor: '#12cda2',
|
|||
|
|
titlefontsize: 9,
|
|||
|
|
}
|
|||
|
|
var $itemPW = $('.sd-section .sd-user-calc');
|
|||
|
|
var itemPW = $itemPW.width()
|
|||
|
|
var $itemPPW = $('.sd-section .sd-user-calc .sd-user-calc-left');
|
|||
|
|
var itemPPW = $itemPPW.width()
|
|||
|
|
var itemPPWPadding = ($itemPPW.innerWidth() - itemPPW) / 2
|
|||
|
|
var itemPPWW = $('.sd-section .sd-user-calc .sd-user-calc-left .sd-user-calc-item').eq(0).innerWidth()
|
|||
|
|
// 通过改变差值来决定圈的宽度,itemWMin为最新值
|
|||
|
|
var itemW = (itemPW - itemPPWPadding - itemPPWW) / 3 * 2;
|
|||
|
|
var itemWMin = 120
|
|||
|
|
if (itemW > itemWMin) {
|
|||
|
|
$('#circleId').attr('width', itemW).attr('height', itemW);
|
|||
|
|
circleOneOption.percentfontsize = (itemW * 22 / itemWMin).toFixed() - 0
|
|||
|
|
circleOneOption.unitfontsize = (itemW * 18 / itemWMin).toFixed() - 0
|
|||
|
|
circleOneOption.titlefontsize = 16
|
|||
|
|
}
|
|||
|
|
console.log(itemPW, itemW, circleOneOption)
|
|||
|
|
drawCircle(circleOneOption);
|
|||
|
|
// 两个环形
|
|||
|
|
var circleTwoOption = {
|
|||
|
|
drawing_elem: 'circleId1',
|
|||
|
|
percentfontsize: 22,
|
|||
|
|
unitfontsize: 18,
|
|||
|
|
lineWidth: 10,
|
|||
|
|
addLeft: 4,
|
|||
|
|
percentfontcolor: "#ffb260",
|
|||
|
|
bgcolor: '#0F2164',
|
|||
|
|
forecolor: '#ffb260',
|
|||
|
|
unitfontcolor: '#1ab1ff',
|
|||
|
|
lineGap: 'round',
|
|||
|
|
unitadd: -1,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var $itemInner = $('.sd-section5-inner')
|
|||
|
|
var $itemInnerTop = $('.sd-section5-inner .sd-quality')
|
|||
|
|
var heightTemp = $itemInner.height() - $itemInnerTop.height()
|
|||
|
|
var $itemTW = $('.sd-quality-circles');
|
|||
|
|
var itemTW = ($itemTW.width() / 2 / 3 * 2).toFixed() - 20
|
|||
|
|
var itemTH = $itemTW.height()
|
|||
|
|
console.log(itemTW, heightTemp)
|
|||
|
|
if (itemTW > heightTemp) {
|
|||
|
|
itemTW = heightTemp
|
|||
|
|
}
|
|||
|
|
// 通过改变差值来决定圈的宽度
|
|||
|
|
var itemW = itemTW
|
|||
|
|
var itemWMin = 100
|
|||
|
|
if (itemW > itemWMin) {
|
|||
|
|
$('#circleId1').attr('width', itemW).attr('height', itemW);
|
|||
|
|
circleTwoOption.percentfontsize = (itemW * 22 / itemWMin).toFixed() - 0
|
|||
|
|
circleTwoOption.unitfontsize = (itemW * 18 / itemWMin).toFixed() - 0
|
|||
|
|
}
|
|||
|
|
var circleThreeOption = {
|
|||
|
|
drawing_elem: 'circleId2',
|
|||
|
|
percentfontsize: 22,
|
|||
|
|
unitfontsize: 18,
|
|||
|
|
lineWidth: 10,
|
|||
|
|
addLeft: 4,
|
|||
|
|
percentfontcolor: "#12cda2",
|
|||
|
|
bgcolor: '#0F2164',
|
|||
|
|
forecolor: '#12cda2',
|
|||
|
|
unitfontcolor: '#1ab1ff',
|
|||
|
|
lineGap: 'round',
|
|||
|
|
unitadd: -1,
|
|||
|
|
}
|
|||
|
|
if (itemW > itemWMin) {
|
|||
|
|
$('#circleId2').attr('width', itemW).attr('height', itemW);
|
|||
|
|
circleThreeOption.percentfontsize = (itemW * 22 / itemWMin).toFixed() - 0
|
|||
|
|
circleThreeOption.unitfontsize = (itemW * 18 / itemWMin).toFixed() - 0
|
|||
|
|
}
|
|||
|
|
console.log(itemTW, itemTH, itemW, circleThreeOption)
|
|||
|
|
|
|||
|
|
drawCircle(circleTwoOption);
|
|||
|
|
drawCircle(circleThreeOption);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 地图点
|
|||
|
|
var mapProjectPoint = JSON.parse('<%=ProjectInfo %>')
|
|||
|
|
function initMapEchart() {
|
|||
|
|
// 1. 实例化对象
|
|||
|
|
myMapChart = echarts.init(document.querySelector(".sd-map"));
|
|||
|
|
// 2. 指定配置和数据
|
|||
|
|
var chinaMapCoordCity = ["上海", "东莞", "东营", "中山", "临汾", "临沂", "丹东", "丽水", "乌鲁木齐", "佛山", "保定", "兰州", "包头", "北京", "北海", "南京", "南宁", "南昌", "南通"
|
|||
|
|
, "厦门", "台州", "合肥", "呼和浩特", "咸阳", "哈尔滨", "唐山", "嘉兴", "大同", "大连", "天津", "太原", "威海", "宁波", "宝鸡"
|
|||
|
|
, "宿迁", "常州", "广州", "廊坊", "延安", "张家口", "徐州", "德州", "惠州", "成都", "扬州", "承德", "拉萨", "无锡", "日照"
|
|||
|
|
, "昆明", "杭州", "枣庄", "柳州", "株洲", "武汉", "汕头", "江门", "沈阳", "沧州", "河源", "泉州", "泰安", "泰州", "济南", "济宁"
|
|||
|
|
, "海口", "淄博", "淮安", "深圳", "清远", "温州", "渭南", "湖州", "湘潭", "滨州", "潍坊", "烟台", "玉溪", "珠海", "盐城", "盘锦"
|
|||
|
|
, "石家庄", "福州", "秦皇岛", "绍兴", "聊城", "肇庆", "舟山", "苏州", "莱芜", "菏泽", "营口", "葫芦岛", "衡水", "衢州", "西宁"
|
|||
|
|
, "西安", "贵阳", "连云港", "邢台", '郑州', '鄂尔多斯', '重庆', '金华', '铜川', '银川', '镇江', '长春', '长沙', '长治', '阳泉', '青岛', '韶关']
|
|||
|
|
|
|||
|
|
var chinaMapCity = ["新疆", "内蒙古", "黑龙江", "吉林", '辽宁', '北京', '天津', '河北', '山西', '山东', '宁夏', '青海', '甘肃', '河南', '陕西', '江苏', '安徽'
|
|||
|
|
, "湖北", "四川", "上海", "浙江", '西藏', '湖南', '重庆', '江西', '贵州', '云南', '福建', '台湾', '广东', '广西', '香港', '澳门', '海南', '南海诸岛']
|
|||
|
|
|
|||
|
|
var chinaMapCityColor = {
|
|||
|
|
"新疆": '#D5EAFF',
|
|||
|
|
"内蒙古": '#D5EAFF',
|
|||
|
|
"黑龙江": '#D7EDE1',
|
|||
|
|
"吉林": '#FEFFD8',
|
|||
|
|
'辽宁': '#FEDDE8',
|
|||
|
|
'北京': '#D7EDE1',
|
|||
|
|
'天津': '#D7EDE1',
|
|||
|
|
'河北': '#FEFFD8',
|
|||
|
|
'山西': '#D7EDE1',
|
|||
|
|
'山东': '#D7EDE1',
|
|||
|
|
'宁夏': '#FEDDE8',
|
|||
|
|
'青海': '#FEDDE8',
|
|||
|
|
'甘肃': '#FEFFD8',
|
|||
|
|
'河南': '#FEDDE8',
|
|||
|
|
'陕西': '#FEDDE8',
|
|||
|
|
'江苏': '#D5EAFF',
|
|||
|
|
'安徽': '#FEDDE8',
|
|||
|
|
"湖北": '#FEFFD8',
|
|||
|
|
"四川": '#D7EDE1',
|
|||
|
|
"上海": '#FEFFD8',
|
|||
|
|
"浙江": '#FEDDE8',
|
|||
|
|
'西藏': '#FEFFD8',
|
|||
|
|
'湖南': '#D5EAFF',
|
|||
|
|
'重庆': '#FEDDE8',
|
|||
|
|
'江西': '#D7EDE1',
|
|||
|
|
'贵州': '#FEFFD8',
|
|||
|
|
'云南': '#FEDDE8',
|
|||
|
|
'福建': '#D5EAFF',
|
|||
|
|
'台湾': '#FEDDE8',
|
|||
|
|
'广东': '#FEDDE8',
|
|||
|
|
'广西': '#D7EDE1',
|
|||
|
|
'香港': '#FEDDE8',
|
|||
|
|
'澳门': '#FEDDE8',
|
|||
|
|
'海南': '#FEDDE8',
|
|||
|
|
'南海诸岛': '#EEEEEE'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 2. 指定配置和数据
|
|||
|
|
var geoCoordMap = {
|
|||
|
|
上海: [121.4648, 31.2891],
|
|||
|
|
东莞: [113.8953, 22.901],
|
|||
|
|
东营: [118.7073, 37.5513],
|
|||
|
|
中山: [113.4229, 22.478],
|
|||
|
|
临汾: [111.4783, 36.1615],
|
|||
|
|
临沂: [118.3118, 35.2936],
|
|||
|
|
丹东: [124.541, 40.4242],
|
|||
|
|
丽水: [119.5642, 28.1854],
|
|||
|
|
乌鲁木齐: [87.9236, 43.5883],
|
|||
|
|
佛山: [112.8955, 23.1097],
|
|||
|
|
保定: [115.0488, 39.0948],
|
|||
|
|
兰州: [103.5901, 36.3043],
|
|||
|
|
包头: [110.3467, 41.4899],
|
|||
|
|
北京: [116.4551, 40.2539],
|
|||
|
|
北海: [109.314, 21.6211],
|
|||
|
|
南京: [118.8062, 31.9208],
|
|||
|
|
南宁: [108.479, 23.1152],
|
|||
|
|
南昌: [116.0046, 28.6633],
|
|||
|
|
南通: [121.1023, 32.1625],
|
|||
|
|
厦门: [118.1689, 24.6478],
|
|||
|
|
台州: [121.1353, 28.6688],
|
|||
|
|
合肥: [117.29, 32.0581],
|
|||
|
|
呼和浩特: [111.4124, 40.4901],
|
|||
|
|
咸阳: [108.4131, 34.8706],
|
|||
|
|
哈尔滨: [127.9688, 45.368],
|
|||
|
|
唐山: [118.4766, 39.6826],
|
|||
|
|
嘉兴: [120.9155, 30.6354],
|
|||
|
|
大同: [113.7854, 39.8035],
|
|||
|
|
大连: [122.2229, 39.4409],
|
|||
|
|
天津: [117.4219, 39.4189],
|
|||
|
|
太原: [112.3352, 37.9413],
|
|||
|
|
威海: [121.9482, 37.1393],
|
|||
|
|
宁波: [121.5967, 29.6466],
|
|||
|
|
宝鸡: [107.1826, 34.3433],
|
|||
|
|
宿迁: [118.5535, 33.7775],
|
|||
|
|
常州: [119.4543, 31.5582],
|
|||
|
|
广州: [113.5107, 23.2196],
|
|||
|
|
廊坊: [116.521, 39.0509],
|
|||
|
|
延安: [109.1052, 36.4252],
|
|||
|
|
张家口: [115.1477, 40.8527],
|
|||
|
|
徐州: [117.5208, 34.3268],
|
|||
|
|
德州: [116.6858, 37.2107],
|
|||
|
|
惠州: [114.6204, 23.1647],
|
|||
|
|
成都: [103.9526, 30.7617],
|
|||
|
|
扬州: [119.4653, 32.8162],
|
|||
|
|
承德: [117.5757, 41.4075],
|
|||
|
|
拉萨: [91.1865, 30.1465],
|
|||
|
|
无锡: [120.3442, 31.5527],
|
|||
|
|
日照: [119.2786, 35.5023],
|
|||
|
|
昆明: [102.9199, 25.4663],
|
|||
|
|
杭州: [119.5313, 29.8773],
|
|||
|
|
枣庄: [117.323, 34.8926],
|
|||
|
|
柳州: [109.3799, 24.9774],
|
|||
|
|
株洲: [113.5327, 27.0319],
|
|||
|
|
武汉: [114.3896, 30.6628],
|
|||
|
|
汕头: [117.1692, 23.3405],
|
|||
|
|
江门: [112.6318, 22.1484],
|
|||
|
|
沈阳: [123.1238, 42.1216],
|
|||
|
|
沧州: [116.8286, 38.2104],
|
|||
|
|
河源: [114.917, 23.9722],
|
|||
|
|
泉州: [118.3228, 25.1147],
|
|||
|
|
泰安: [117.0264, 36.0516],
|
|||
|
|
泰州: [120.0586, 32.5525],
|
|||
|
|
济南: [117.1582, 36.8701],
|
|||
|
|
济宁: [116.8286, 35.3375],
|
|||
|
|
海口: [110.3893, 19.8516],
|
|||
|
|
淄博: [118.0371, 36.6064],
|
|||
|
|
淮安: [118.927, 33.4039],
|
|||
|
|
深圳: [114.5435, 22.5439],
|
|||
|
|
清远: [112.9175, 24.3292],
|
|||
|
|
温州: [120.498, 27.8119],
|
|||
|
|
渭南: [109.7864, 35.0299],
|
|||
|
|
湖州: [119.8608, 30.7782],
|
|||
|
|
湘潭: [112.5439, 27.7075],
|
|||
|
|
滨州: [117.8174, 37.4963],
|
|||
|
|
潍坊: [119.0918, 36.524],
|
|||
|
|
烟台: [120.7397, 37.5128],
|
|||
|
|
玉溪: [101.9312, 23.8898],
|
|||
|
|
珠海: [113.7305, 22.1155],
|
|||
|
|
盐城: [120.2234, 33.5577],
|
|||
|
|
盘锦: [121.9482, 41.0449],
|
|||
|
|
石家庄: [114.4995, 38.1006],
|
|||
|
|
福州: [119.4543, 25.9222],
|
|||
|
|
秦皇岛: [119.2126, 40.0232],
|
|||
|
|
绍兴: [120.564, 29.7565],
|
|||
|
|
聊城: [115.9167, 36.4032],
|
|||
|
|
肇庆: [112.1265, 23.5822],
|
|||
|
|
舟山: [122.2559, 30.2234],
|
|||
|
|
苏州: [120.6519, 31.3989],
|
|||
|
|
莱芜: [117.6526, 36.2714],
|
|||
|
|
菏泽: [115.6201, 35.2057],
|
|||
|
|
营口: [122.4316, 40.4297],
|
|||
|
|
葫芦岛: [120.1575, 40.578],
|
|||
|
|
衡水: [115.8838, 37.7161],
|
|||
|
|
衢州: [118.6853, 28.8666],
|
|||
|
|
西宁: [101.4038, 36.8207],
|
|||
|
|
西安: [109.1162, 34.2004],
|
|||
|
|
贵阳: [106.6992, 26.7682],
|
|||
|
|
连云港: [119.1248, 34.552],
|
|||
|
|
邢台: [114.8071, 37.2821],
|
|||
|
|
邯郸: [114.4775, 36.535],
|
|||
|
|
郑州: [113.4668, 34.6234],
|
|||
|
|
鄂尔多斯: [108.9734, 39.2487],
|
|||
|
|
重庆: [107.7539, 30.1904],
|
|||
|
|
金华: [120.0037, 29.1028],
|
|||
|
|
铜川: [109.0393, 35.1947],
|
|||
|
|
银川: [106.3586, 38.1775],
|
|||
|
|
镇江: [119.4763, 31.9702],
|
|||
|
|
长春: [125.8154, 44.2584],
|
|||
|
|
长沙: [113.0823, 28.2568],
|
|||
|
|
长治: [112.8625, 36.4746],
|
|||
|
|
阳泉: [113.4778, 38.0951],
|
|||
|
|
青岛: [120.4651, 36.3373],
|
|||
|
|
韶关: [113.7964, 24.7028],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var series = [
|
|||
|
|
{
|
|||
|
|
name: "china map",
|
|||
|
|
type: "effectScatter",
|
|||
|
|
coordinateSystem: "geo",
|
|||
|
|
rippleEffect: {
|
|||
|
|
brushType: "stroke",
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: "#FFFC00",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: mapProjectPoint
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
var regions = []
|
|||
|
|
regions.push({
|
|||
|
|
name: "南海诸岛",
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
// opacity: 0,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
color: "#ffffff"
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
//#region
|
|||
|
|
|
|||
|
|
for (var key in chinaMapCityColor) {
|
|||
|
|
if (key == '南海诸岛') {
|
|||
|
|
continue
|
|||
|
|
}
|
|||
|
|
regions.push({
|
|||
|
|
name: key,
|
|||
|
|
itemStyle: {
|
|||
|
|
// areaColor: chinaMapCityColor[key],
|
|||
|
|
// color: '#333333'
|
|||
|
|
areaColor: '#2648A6',
|
|||
|
|
//borderColor: chinaMapCityColor[key],
|
|||
|
|
borderColor: 'rgba(8, 157, 212, 0.5)',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// #endregion
|
|||
|
|
|
|||
|
|
console.log(regions)
|
|||
|
|
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "item",
|
|||
|
|
formatter: function (params, ticket, callback) {
|
|||
|
|
if (params.seriesType == "effectScatter") {
|
|||
|
|
// return '标注区域：' + params.data.name;
|
|||
|
|
return params.data.name;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#ffffff',
|
|||
|
|
},
|
|||
|
|
borderColor: 'rgba(71,71,226,1)',
|
|||
|
|
backgroundColor: 'rgba(71,71,226,1)'
|
|||
|
|
},
|
|||
|
|
geo: {
|
|||
|
|
top: '12%',
|
|||
|
|
// layoutCenter: ['30%', '80%'],
|
|||
|
|
show: true,
|
|||
|
|
map: "china",
|
|||
|
|
label: {
|
|||
|
|
show: true, // 显示地图上城市名称
|
|||
|
|
color: "#fff",
|
|||
|
|
emphasis: {
|
|||
|
|
show: true,
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
roam: false,
|
|||
|
|
// aspectScale: 1,
|
|||
|
|
zoom: 1.1,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
areaColor: "#2648A6", // 地图颜色
|
|||
|
|
borderColor: "#089DD4",
|
|||
|
|
borderWidth: 1,
|
|||
|
|
// shadowBlur: 1,
|
|||
|
|
shadowColor: "#1B3783",
|
|||
|
|
shadowOffsetX: -11,
|
|||
|
|
shadowOffsetY: 5,
|
|||
|
|
opacity: 0.6,
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
areaColor: "rgb(38 72 166 / 50%)",
|
|||
|
|
//areaColor: '#FFDF33'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
regions: regions,
|
|||
|
|
},
|
|||
|
|
series: series,
|
|||
|
|
};
|
|||
|
|
myMapChart.getZr().on('click', function (params) {
|
|||
|
|
console.log('params', params)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
myMapChart.on('click', function (param) {
|
|||
|
|
//这个params可以获取你要的图中的当前点击的项的参数
|
|||
|
|
console.log('myMapChart', param)
|
|||
|
|
if (param.seriesType == "effectScatter" && param.data != null) {
|
|||
|
|
var gotoUrl = param.data.url || 'indexProject.aspx'
|
|||
|
|
top.window.location.href = '../' + gotoUrl
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
myMapChart.clear();
|
|||
|
|
myMapChart.setOption(option);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myMapChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 地图点
|
|||
|
|
var mapProjectPoint_1 = JSON.parse('<%=ProjectInfo %>')
|
|||
|
|
function initWorldMapEchart() {
|
|||
|
|
// 1. 实例化对象
|
|||
|
|
var myMapChart = echarts.init(document.querySelector(".sd-map"));
|
|||
|
|
//
|
|||
|
|
var geoCoordMap = { '阿富汗': [67.709953, 33.93911], '安哥拉': [17.873887, -11.202692], '阿尔巴尼亚': [20.168331, 41.153332], '阿联酋': [53.847818, 23.424076], '阿根廷': [-63.61667199999999, -38.416097], '亚美尼亚': [45.038189, 40.069099], '法属南半球和南极领地': [69.348557, -49.280366], '澳大利亚': [133.775136, -25.274398], '奥地利': [14.550072, 47.516231], '阿塞拜疆': [47.576927, 40.143105], '布隆迪': [29.918886, -3.373056], '比利时': [4.469936, 50.503887], '贝宁': [2.315834, 9.30769], '布基纳法索': [-1.561593, 12.238333], '孟加拉国': [90.356331, 23.684994], '保加利亚': [25.48583, 42.733883], '巴哈马': [-77.39627999999999, 25.03428], '波斯尼亚和黑塞哥维那': [17.679076, 43.915886], '白俄罗斯': [27.953389, 53.709807], '伯利兹': [-88.49765, 17.189877], '百慕大': [-64.7505, 32.3078], '玻利维亚': [-63.58865299999999, -16.290154], '巴西': [-51.92528, -14.235004], '文莱': [114.727669, 4.535277], '不丹': [90.433601, 27.514162], '博茨瓦纳': [24.684866, -22.328474], '中非共和国': [20.939444, 6.611110999999999], '加拿大': [-106.346771, 56.130366], '瑞士': [8.227511999999999, 46.818188], '智利': [-71.542969, -35.675147], '中国': [104.195397, 35.86166], '象牙海岸': [-5.547079999999999, 7.539988999999999], '喀麦隆': [12.354722, 7.369721999999999], '刚果民主共和国': [21.758664, -4.038333], '刚果共和国': [15.827659, -0.228021], '哥伦比亚': [-74.297333, 4.570868], '哥斯达黎加': [-83.753428, 9.748916999999999], '古巴': [-77.781167, 21.521757], '北塞浦路斯': [33.429859, 35.126413], '塞浦路斯': [33.429859, 35.126413], '捷克共和国': [15.472962, 49.81749199999999], '德国': [10.451526, 51.165691], '吉布提': [42.590275, 11.825138], '丹麦': [9.501785, 56.26392], '多明尼加共和国': [-70.162651, 18.735693], '阿尔及利亚': [1.659626, 28.033886], '厄瓜多尔': [-78.18340599999999, -1.831239], '埃及': [30.802498, 26.820553], '厄立特里亚': [39.782334, 15.179384], '西班牙': [-3.74922, 40.46366700000001], '爱沙尼亚': [25.013607, 58.595272], '埃塞俄比亚': [40.489673, 9.145000000000001], '芬兰': [25.748151, 61.92410999999999], '斐': [178.065032, -17.713371], '福克兰群岛': [-59.523613, -51.796253], '法国': [2.213749, 46.227638], '加蓬': [11.609444, -0.803689], '英国': [-3.435973, 55.378051], '格鲁吉亚': [-82.9000751, 32.1656221], '加纳': [-1.023194, 7.946527], '几内亚': [-9.696645, 9.945587], '冈比亚': [-15.310139, 13.443182], '几内亚比绍': [-15.180413, 11.803749], '赤道几内亚': [10.267895, 1.650801], '希腊': [21.824312, 39.074208], '格陵兰': [-42.604303, 71.706936], '危地马拉': [-90.23075899999999, 15.783471], '法属圭亚那': [-53.125782, 3.933889], '圭亚那': [-58.93018, 4.860416], '洪都拉斯': [-86.241905, 15.199999], '克罗地亚': [15.2, 45.1], '海地': [-72.285215, 18.971187], '匈牙利': [19.503304, 47.162494], '印尼': [113.921327, -0.789275], '印度': [78.96288, 20.593684], '爱尔兰': [-8.24389, 53.41291], '伊朗': [53.688046, 32.427908], '伊拉克': [43.679291, 33.223191], '冰岛': [-19.020835, 64.963051], '以色列': [34.851612, 31.046051], '意大利': [12.56738, 41.87194], '牙买加': [-77.297508, 18.109581], '约旦': [36.238414, 30.585164], '日本': [138.252924, 36.204824], '哈萨克斯坦': [66.923684, 48.019573], '肯尼亚': [37.906193, -0.023559], '吉尔吉斯斯坦': [74.766098, 41.20438], '柬埔寨': [104.990963, 12.565679], '韩国': [127.766922, 35.907757], '科索沃': [20.902977, 42.6026359], '科威特': [47.481766, 29.31166], '老挝': [102.495496, 19.85627], '黎巴嫩': [35.862285, 33.854721], '利比里亚': [-9.429499000000002, 6.428055], '利比亚': [17.228331, 26.3351], '斯里兰卡': [80.77179699999999, 7.873053999999999], '莱索托': [28.233608, -29.609988], '立陶宛': [23.881275, 55.169438], '卢森堡': [6.129582999999999, 49.815273], '拉脱维亚': [24.603189, 56.879635], '摩洛哥': [-7.092619999999999, 31.791702], '摩尔多瓦': [28.36988
|
|||
|
|
var max = 480, min = 9; // todo
|
|||
|
|
var maxSize4Pin = 100, minSize4Pin = 20;
|
|||
|
|
var convertData = function (data) {
|
|||
|
|
var res = [];
|
|||
|
|
for (var i = 0; i < data.length; i++) {
|
|||
|
|
var geoCoord = geoCoordMap[data[i].name];
|
|||
|
|
if (geoCoord) {
|
|||
|
|
res.push({
|
|||
|
|
name: data[i].name,
|
|||
|
|
value: geoCoord.concat(data[i].value),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return res;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
show: false,
|
|||
|
|
top: 10,
|
|||
|
|
text: '地图标题',
|
|||
|
|
subtext: '',
|
|||
|
|
x: 'center',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#ccc',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: function (params) {
|
|||
|
|
return params.name
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#ffffff',
|
|||
|
|
},
|
|||
|
|
borderColor: 'rgba(71,71,226,1)',
|
|||
|
|
backgroundColor: 'rgba(71,71,226,1)'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
show: false,
|
|||
|
|
orient: 'vertical',
|
|||
|
|
y: 'bottom',
|
|||
|
|
x: 'right',
|
|||
|
|
data: ['量'],
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
visualMap: {
|
|||
|
|
show: false,
|
|||
|
|
min: 0,
|
|||
|
|
max: 500,
|
|||
|
|
left: 'left',
|
|||
|
|
top: 'bottom',
|
|||
|
|
text: ['高', '低'], // 文本，默认为数值文本
|
|||
|
|
calculable: true,
|
|||
|
|
seriesIndex: [1],
|
|||
|
|
inRange: {},
|
|||
|
|
},
|
|||
|
|
geo: {
|
|||
|
|
//top: '20%',
|
|||
|
|
map: 'world',
|
|||
|
|
zoom: 1.2,
|
|||
|
|
show: true,
|
|||
|
|
roam: false,
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
color: '#ffffff',
|
|||
|
|
formatter: function (val) {
|
|||
|
|
var area_content = ''
|
|||
|
|
if (val && val.name) {
|
|||
|
|
var tempN = mapProjectPoint_1.filter(x => x.cityname == val.name)
|
|||
|
|
if (tempN.length > 0) {
|
|||
|
|
area_content = val.name
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return area_content
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
areaColor: '#3a7fd5',
|
|||
|
|
borderColor: '#0a53e9', //线
|
|||
|
|
shadowColor: '#092f8f', //外发光
|
|||
|
|
shadowBlur: 20,
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
areaColor: '#0a2dae', //悬浮区背景
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
symbolSize: 5,
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
formatter: '{b}',
|
|||
|
|
position: 'right',
|
|||
|
|
show: false,//是否显示地名
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
show: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#fff',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
name: 'light',
|
|||
|
|
type: 'scatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
//data: convertData(data_tmp),
|
|||
|
|
data: mapProjectPoint_1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'map',
|
|||
|
|
map: 'china',
|
|||
|
|
geoIndex: 0,
|
|||
|
|
aspectScale: 0.75, //长宽比
|
|||
|
|
showLegendSymbol: false, // 存在legend时显示
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
show: false,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
roam: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
areaColor: '#031525',
|
|||
|
|
borderColor: '#FFFFFF',
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
areaColor: '#2B91B7',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
animation: false,
|
|||
|
|
data: mapProjectPoint_1,
|
|||
|
|
//data: data_tmp,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Top 5',
|
|||
|
|
type: 'effectScatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
rippleEffect: {
|
|||
|
|
brushType: "stroke",
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: false,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 9,
|
|||
|
|
},
|
|||
|
|
formatter: function (value) {
|
|||
|
|
return value.data.value[2];
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#dfae10', //标志颜色
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: mapProjectPoint_1,
|
|||
|
|
showEffectOn: 'render',
|
|||
|
|
rippleEffect: {
|
|||
|
|
brushType: 'stroke',
|
|||
|
|
},
|
|||
|
|
hoverAnimation: true,
|
|||
|
|
zlevel: 1,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
myMapChart.clear();
|
|||
|
|
myMapChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(".el-scrollbar__wrap").html("<%=projectJDHtml %>");
|
|||
|
|
var Box_Height = $(".el-scrollbar").outerHeight();
|
|||
|
|
var content_Height = $(".el-scrollbar__wrap").outerHeight();
|
|||
|
|
var bar_Height = $(".is-vertical").outerHeight();
|
|||
|
|
var isMouseDown = false;
|
|||
|
|
var distance = 0;
|
|||
|
|
if (content_Height > Box_Height) {
|
|||
|
|
//滚动条初始高度；
|
|||
|
|
var n = Box_Height / content_Height * bar_Height
|
|||
|
|
$(".is-vertical .el-scrollbar__thumb").css("height", n)
|
|||
|
|
$(".is-vertical").mousedown(down);
|
|||
|
|
$(window).mousemove(move);
|
|||
|
|
$(window).mouseup(up);
|
|||
|
|
function down(event) {
|
|||
|
|
isMouseDown = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function move(event) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
distance = event.pageY - $(".is-vertical").offset().top;
|
|||
|
|
if (isMouseDown == true) {
|
|||
|
|
scroll(distance)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function up() {
|
|||
|
|
isMouseDown = false;
|
|||
|
|
$(".el-scrollbar").find(".is-vertical").css('opacity', 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function scroll(distance) {
|
|||
|
|
if (distance < 0) {
|
|||
|
|
distance = 0
|
|||
|
|
} else if (distance > bar_Height - $(".is-vertical .el-scrollbar__thumb").outerHeight()) {
|
|||
|
|
distance = bar_Height - $(".is-vertical .el-scrollbar__thumb").outerHeight();
|
|||
|
|
}
|
|||
|
|
$(".is-vertical .el-scrollbar__thumb").css("top", distance)
|
|||
|
|
// 滚动距离 = 滑块移动距离 ÷ 窗口高度 x 页面长度
|
|||
|
|
var scroll_distance = parseInt(distance / Box_Height * content_Height)
|
|||
|
|
$(".el-scrollbar__wrap").css("margin-top", -scroll_distance)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initScroll() {
|
|||
|
|
|
|||
|
|
$(".el-scrollbar").hover(function () {
|
|||
|
|
var $this = $(this)
|
|||
|
|
$this.find(".is-vertical").css('opacity', 1);
|
|||
|
|
}, function () {
|
|||
|
|
if (isMouseDown) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
var $this = $(this)
|
|||
|
|
$this.find(".is-vertical").css('opacity', 0);
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 滚轮事件；
|
|||
|
|
$(".el-scrollbar").bind('mousewheel', function (event, delta) {
|
|||
|
|
event.preventDefault()
|
|||
|
|
var dir = delta > 0 ? 'Up' : 'Down',
|
|||
|
|
vel = delta
|
|||
|
|
distance = $(".is-vertical .el-scrollbar__thumb").offset().top - $(".el-scrollbar").offset().top;
|
|||
|
|
vel > 0 ? distance -= 10 : distance += 10
|
|||
|
|
scroll(distance);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initEvent() {
|
|||
|
|
$(document).on('click', '.sd-body-map .sd-body-map-switch-btn', function () {
|
|||
|
|
var $this = $(this), $item = $this.find('span')
|
|||
|
|
var txt = $item.text()
|
|||
|
|
if (txt == '中国地图') {
|
|||
|
|
$item.text('世界地图')
|
|||
|
|
initWorldMapEchart()
|
|||
|
|
} else {
|
|||
|
|
$item.text('中国地图')
|
|||
|
|
initMapEchart()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(function () {
|
|||
|
|
initCircle()
|
|||
|
|
initBarEchart()
|
|||
|
|
initMapEchart()
|
|||
|
|
if (content_Height > Box_Height) {
|
|||
|
|
initScroll()
|
|||
|
|
}
|
|||
|
|
initEvent()
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</html>
|