forked from p51497208/geo_info_platform
1872 lines
71 KiB
HTML
1872 lines
71 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>知识服务系统</title>
|
|||
|
|
<link href="./css/demo.css" rel="stylesheet">
|
|||
|
|
<link rel="stylesheet" href="./css/flexleft.css">
|
|||
|
|
<link href="./css/slider.css" rel="stylesheet">
|
|||
|
|
<link href="./font/iconfont.css" rel="stylesheet">
|
|||
|
|
<script src="echarts.min.js"></script>
|
|||
|
|
<script src="china.js"></script>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class="voicePanel">
|
|||
|
|
<div class="voice-vocal">
|
|||
|
|
<p style="margin:10px 0px 20px;">请说话</p>
|
|||
|
|
<img src="./image/voice.gif" alt="" width="100px"/>
|
|||
|
|
<p class="voice-btn">
|
|||
|
|
<a href="javascript:void(0)" onclick="cancelVoice();">取消</a>
|
|||
|
|
<a href="javascript:void(0)" onclick="cancelVoice();">确定</a>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 顶部导航栏 -->
|
|||
|
|
<div class="map_header">
|
|||
|
|
<div class="map_left">
|
|||
|
|
<h2 class="logo_txt">
|
|||
|
|
<span class="iconfont icon-zhankai collpase-icon"></span>
|
|||
|
|
知识服务系统
|
|||
|
|
</h2>
|
|||
|
|
<ul class="map-nav">
|
|||
|
|
<li>
|
|||
|
|
<a href="javscript:void(0)">首页</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="javscript:void(0)">产品</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<ul class="user_info">
|
|||
|
|
<!-- <li class="info-item">
|
|||
|
|
<div class="lat_lon_sec">
|
|||
|
|
<input
|
|||
|
|
onkeyup="this.value=this.value.replace(/[^\d.]/g, '')"
|
|||
|
|
class="search_input_common lon" placeholder="经度" />
|
|||
|
|
<input
|
|||
|
|
onkeyup="this.value=this.value.replace(/[^\d.]/g, '')"
|
|||
|
|
class="search_input_common lat" placeholder="纬度" />
|
|||
|
|
<span class="iconfont icon-search lat_lon_search"></span>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="info-item">
|
|||
|
|
<div class="search-prov">
|
|||
|
|
<input class="search_input" placeholder="请输入地点" />
|
|||
|
|
<span class="search_icon iconfont icon-search">
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</li> -->
|
|||
|
|
<span class="search-Panel">
|
|||
|
|
<input class="search-input-item prov" placeholder="请输入地点" />
|
|||
|
|
<input onkeyup="this.value=this.value.replace(/[^\d.]/g, '')" class="search-input-item lon" placeholder="经度" />
|
|||
|
|
<input onkeyup="this.value=this.value.replace(/[^\d.]/g, '')" class="search-input-item lon" placeholder="纬度" />
|
|||
|
|
<div class="show_detail ml10">
|
|||
|
|
<i class="iconfont icon-search"></i>
|
|||
|
|
<ul class="detail_info">
|
|||
|
|
<li class="info_txt" data-key="prov">地点</li>
|
|||
|
|
<li class="info_txt" data-key="lon">经纬度</li>
|
|||
|
|
<li class="info_txt" data-key="voice">语音</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</span>
|
|||
|
|
|
|||
|
|
<!-- <li class="info-item">
|
|||
|
|
<div class="search-area">
|
|||
|
|
<div class="show_detail">
|
|||
|
|
<span class="iconfont icon-gengduo more_icon"></span>
|
|||
|
|
<ul class="detail_info">
|
|||
|
|
<li class="info_txt" data-key="prov">地点</li>
|
|||
|
|
<li class="info_txt" data-key="lon">经纬度</li>
|
|||
|
|
<li class="info_txt" data-key="voice">语音</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li> -->
|
|||
|
|
<li class="info-item">
|
|||
|
|
<div class="show_detail">
|
|||
|
|
<img class="user_img" src="./image/3.jpg" />
|
|||
|
|
<ul class="detail_info">
|
|||
|
|
<li class="info_txt" data-key="user">admin</li>
|
|||
|
|
<li class="info_txt" data-key="off">退出</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="banner-panel" style="padding-top:60px;">
|
|||
|
|
<p class="banner-header"></p>
|
|||
|
|
<div class="carouselBottom">
|
|||
|
|
<a class="bottomItem active" href="javscript:void(0)">
|
|||
|
|
<img src="./image/1.png" />服务优势
|
|||
|
|
</a>
|
|||
|
|
<a class="bottomItem" href="javscript:void(0)">
|
|||
|
|
<img src="./image/2.png" />引擎服务
|
|||
|
|
</a>
|
|||
|
|
<a class="bottomItem" href="javscript:void(0)">
|
|||
|
|
<img src="./image/3.png" />案例精选
|
|||
|
|
</a>
|
|||
|
|
<a class="bottomItem" href="javscript:void(0)">
|
|||
|
|
<img src="./image/4.png" />快速入门
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="main-panel">
|
|||
|
|
<!-- 左部可伸缩区域 -->
|
|||
|
|
<div class="fixed-left">
|
|||
|
|
<div class="video_img">
|
|||
|
|
<!-- 视频区域 -->
|
|||
|
|
<div class="div-video" style="background: #1D346F;">
|
|||
|
|
<video width="100%" height="100%" controls>
|
|||
|
|
<source class="video" src="./image/西藏/1.mp4" type="video/mp4">
|
|||
|
|
<source src="movie.ogg" type="video/ogg" style="width: 400px;">
|
|||
|
|
Your browser does not support the video tag.
|
|||
|
|
</video>
|
|||
|
|
</div>
|
|||
|
|
<!-- 图片区域 -->
|
|||
|
|
<div class="slider slider_one_big_picture">
|
|||
|
|
<div>
|
|||
|
|
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/1.jpg" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/2.jpg" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/3.jpg" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/4.jpg" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/5.jpg" />
|
|||
|
|
</div>
|
|||
|
|
<div class="next_button"></div>
|
|||
|
|
<div class="prev_button"></div>
|
|||
|
|
<div class="nav_indicators"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 知识图谱 echarts 渲染区域 -->
|
|||
|
|
<div class="left_echart" id="mainGraph"></div>
|
|||
|
|
<!-- 知识图谱全屏按钮 -->
|
|||
|
|
<div class="screen-btn screen-open" id="btn">
|
|||
|
|
<span class="screen_icon iconfont icon-kuoda"></span>
|
|||
|
|
</div>
|
|||
|
|
<!-- china map echarts 渲染区域 -->
|
|||
|
|
<div id="main" style="width: 100%;height:100vh;"></div>
|
|||
|
|
</div>
|
|||
|
|
<script type="text/javascript" src="./js/jQuery-1.8.3.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="./js/jquery.easy_slides.js"></script>
|
|||
|
|
<script type="text/javascript" src="./js/demo.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
$(function(){
|
|||
|
|
$(".show_detail").hover(function(){
|
|||
|
|
$(this).find(".detail_info").show();
|
|||
|
|
},function(){
|
|||
|
|
$(this).find(".detail_info").hide();
|
|||
|
|
})
|
|||
|
|
$(".detail_info").on("click",".info_txt",function(){
|
|||
|
|
var key = $(this).attr("data-key");
|
|||
|
|
$(".search-input-item").removeClass("active");
|
|||
|
|
$("."+key).addClass("active");
|
|||
|
|
if(key === "voice"){
|
|||
|
|
$(".voicePanel").addClass("active");
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
$(".carouselBottom").on("click",".bottomItem",function(){
|
|||
|
|
$(".bottomItem").removeClass("active");
|
|||
|
|
$(this).addClass("active");
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 取消语音录入
|
|||
|
|
function cancelVoice(){
|
|||
|
|
$(".voicePanel").removeClass("active");
|
|||
|
|
}
|
|||
|
|
// 基于准备好的dom，初始化echarts实例，知识图谱和 china map
|
|||
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|||
|
|
var graphContainer = document.getElementById('mainGraph');
|
|||
|
|
|
|||
|
|
// 知识图谱
|
|||
|
|
var myChartGraph = echarts.init(graphContainer);
|
|||
|
|
|
|||
|
|
function tooltipCharts() {
|
|||
|
|
console.log(arguments[0]);
|
|||
|
|
var myChart1 = echarts.init(document.getElementById('tooltipBarId'));
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {},
|
|||
|
|
dataset: {
|
|||
|
|
source: [
|
|||
|
|
['xAxis', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13'],
|
|||
|
|
['amount', 41.1, 30.4, 65.1, 53.3, 53.8, 98.7, 65.1, 53.3, 41.1, 30.4, 53.3, 41.1, 53.3, 53.8]
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
interval: true,
|
|||
|
|
axisLabel: {
|
|||
|
|
rotate: 45
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {},
|
|||
|
|
color: ['#4FA8F9', '#F5A623'],
|
|||
|
|
grid: {
|
|||
|
|
show: true,
|
|||
|
|
backgroundColor: '#1D346F',
|
|||
|
|
left: 30,
|
|||
|
|
right: 10,
|
|||
|
|
top: 10,
|
|||
|
|
bottom: 20,
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
type: 'bar',
|
|||
|
|
smooth: true,
|
|||
|
|
seriesLayoutBy: 'row',
|
|||
|
|
barWidth: 10
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
myChart1.setOption(option);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 各省份经纬度
|
|||
|
|
var chinaGeoCoordMap = {
|
|||
|
|
'黑龙江': [127.9688, 45.368],
|
|||
|
|
'内蒙古': [110.3467, 41.4899],
|
|||
|
|
"吉林": [125.8154, 44.2584],
|
|||
|
|
'北京': [116.4551, 40.2539],
|
|||
|
|
"辽宁": [123.1238, 42.1216],
|
|||
|
|
"河北": [114.4995, 38.1006],
|
|||
|
|
"天津": [117.4219, 39.4189],
|
|||
|
|
"山西": [112.3352, 37.9413],
|
|||
|
|
"陕西": [109.1162, 34.2004],
|
|||
|
|
"甘肃": [103.5901, 36.3043],
|
|||
|
|
"宁夏": [106.3586, 38.1775],
|
|||
|
|
"青海": [101.4038, 36.8207],
|
|||
|
|
"新疆": [87.9236, 43.5883],
|
|||
|
|
"西藏": [91.11, 29.97],
|
|||
|
|
"四川": [103.9526, 30.7617],
|
|||
|
|
"重庆": [108.384366, 30.439702],
|
|||
|
|
"山东": [117.1582, 36.8701],
|
|||
|
|
"河南": [113.4668, 34.6234],
|
|||
|
|
"江苏": [118.8062, 31.9208],
|
|||
|
|
"安徽": [117.29, 32.0581],
|
|||
|
|
"湖北": [114.3896, 30.6628],
|
|||
|
|
"浙江": [119.5313, 29.8773],
|
|||
|
|
"福建": [119.4543, 25.9222],
|
|||
|
|
"江西": [116.0046, 28.6633],
|
|||
|
|
"湖南": [113.0823, 28.2568],
|
|||
|
|
"贵州": [106.6992, 26.7682],
|
|||
|
|
"云南": [102.9199, 25.4663],
|
|||
|
|
"广东": [113.12244, 23.009505],
|
|||
|
|
"广西": [108.479, 23.1152],
|
|||
|
|
"海南": [110.3893, 19.8516],
|
|||
|
|
'上海': [121.48, 31.22],
|
|||
|
|
"香港": [114.15, 22.15],
|
|||
|
|
"澳门": [113.5, 22.2],
|
|||
|
|
'台湾': [121.31, 25.03]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 各省份对应的浮框数据信息，不包括浮框中的柱状图
|
|||
|
|
var chinaDatas = [
|
|||
|
|
[{
|
|||
|
|
name: '黑龙江',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"黑",
|
|||
|
|
provincialcapital:"哈尔滨",
|
|||
|
|
diqu:"中国东北地区",
|
|||
|
|
qihou:"温带大陆性季风气候、寒温带气候",
|
|||
|
|
people:"3773.1万人" ,
|
|||
|
|
num:"47.3万平方公里" ,
|
|||
|
|
GDP:"16361.6亿元",
|
|||
|
|
renjunGDP:"43274元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '内蒙古',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"内蒙古",
|
|||
|
|
provincialcapital:"呼和浩特",
|
|||
|
|
diqu:"中国北部边疆",
|
|||
|
|
qihou:"温带大陆性气候、温带季风气候",
|
|||
|
|
people:"2534万人" ,
|
|||
|
|
num:"118.3万平方公里" ,
|
|||
|
|
GDP:"17289.2亿元",
|
|||
|
|
renjunGDP:"68302元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '吉林',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"吉",
|
|||
|
|
provincialcapital:"长春",
|
|||
|
|
diqu:"中国东北地区",
|
|||
|
|
qihou:"温带季风气候",
|
|||
|
|
people:"2704.06万人" ,
|
|||
|
|
num:"18.74万平方公里" ,
|
|||
|
|
GDP:"15074.62亿元",
|
|||
|
|
renjunGDP:"55611元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '北京',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"京",
|
|||
|
|
provincialcapital:"直辖市",
|
|||
|
|
diqu:"中国华北地区",
|
|||
|
|
qihou:"温带季风性气候",
|
|||
|
|
people:"2154.2万人" ,
|
|||
|
|
num:"1.64万平方公里" ,
|
|||
|
|
GDP:"30320亿元",
|
|||
|
|
renjunGDP:"140000元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '辽宁',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"辽",
|
|||
|
|
provincialcapital:"沈阳",
|
|||
|
|
diqu:"中国东北地区",
|
|||
|
|
qihou:"温带季风气候",
|
|||
|
|
people:"4359.3万人" ,
|
|||
|
|
num:"14.86万平方公里" ,
|
|||
|
|
GDP:"25315.4亿元",
|
|||
|
|
renjunGDP:"58008元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '河北',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"冀",
|
|||
|
|
provincialcapital:"石家庄",
|
|||
|
|
diqu:"中国华北地区",
|
|||
|
|
qihou:"温带大陆性季风气候",
|
|||
|
|
people:"7556.30万人" ,
|
|||
|
|
num:"18.88万平方公里" ,
|
|||
|
|
GDP:"36010.3亿元",
|
|||
|
|
renjunGDP:"47772元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '天津',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"黑",
|
|||
|
|
provincialcapital:"哈尔滨",
|
|||
|
|
diqu:"中国华北地区",
|
|||
|
|
qihou:"温带大陆性季风气候",
|
|||
|
|
people:"3773.1万人" ,
|
|||
|
|
num:"47.3万平方公里" ,
|
|||
|
|
GDP:"16361.6亿元",
|
|||
|
|
renjunGDP:"120000元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '山西',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"晋",
|
|||
|
|
provincialcapital:"太原",
|
|||
|
|
diqu:"中国华北地区",
|
|||
|
|
qihou:"温带大陆性季风气候",
|
|||
|
|
people:"3718.34万人" ,
|
|||
|
|
num:"15.67万平方公里" ,
|
|||
|
|
GDP:"16818.1亿元",
|
|||
|
|
renjunGDP:"45328元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '陕西',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"“陕”或“秦”",
|
|||
|
|
provincialcapital:"西安",
|
|||
|
|
diqu:"中国西北地区",
|
|||
|
|
qihou:"温带季风气候、亚热带季风气候",
|
|||
|
|
people:"3864.40万" ,
|
|||
|
|
num:"20.56万平方公里" ,
|
|||
|
|
GDP:"24438.32亿元",
|
|||
|
|
renjunGDP:"63477元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '甘肃',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"“甘”或“陇”",
|
|||
|
|
provincialcapital:"兰州",
|
|||
|
|
diqu:"中国西北地区",
|
|||
|
|
qihou:"温带大陆性气候、高原山地气候",
|
|||
|
|
people:"2637.26万人" ,
|
|||
|
|
num:"42.58万平方公里" ,
|
|||
|
|
GDP:"8246.1亿元",
|
|||
|
|
renjunGDP:"31336元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '宁夏',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"宁",
|
|||
|
|
provincialcapital:"银川",
|
|||
|
|
diqu:"中国西北地区",
|
|||
|
|
qihou:"温带大陆性气候",
|
|||
|
|
people:"688.11万人" ,
|
|||
|
|
num:"6.64万平方公里" ,
|
|||
|
|
GDP:"3705.18亿元",
|
|||
|
|
renjunGDP:"54094元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '青海',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"青",
|
|||
|
|
provincialcapital:"西宁",
|
|||
|
|
diqu:"中国西北地区",
|
|||
|
|
qihou:"高原大陆性气候",
|
|||
|
|
people:"603.23万人" ,
|
|||
|
|
num:"72万平方公里" ,
|
|||
|
|
GDP:"2865.23亿元",
|
|||
|
|
renjunGDP:"47689元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '新疆',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"新",
|
|||
|
|
provincialcapital:"乌鲁木齐",
|
|||
|
|
diqu:"中国西北地区",
|
|||
|
|
qihou:"温带大陆性气候",
|
|||
|
|
people:"2486.76万人" ,
|
|||
|
|
num:"166万平方公里" ,
|
|||
|
|
GDP:"12199.08亿元",
|
|||
|
|
renjunGDP:"49474元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '西藏',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"藏",
|
|||
|
|
provincialcapital:"拉萨",
|
|||
|
|
diqu:"中国西南地区",
|
|||
|
|
qihou:"西北严寒、东南温暖湿润",
|
|||
|
|
people:"343.82万人" ,
|
|||
|
|
num:"122.84万平方公里" ,
|
|||
|
|
GDP:"1477.63亿元",
|
|||
|
|
renjunGDP:"43397元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '四川',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"“川”或“蜀”",
|
|||
|
|
provincialcapital:"成都",
|
|||
|
|
diqu:"中国西南地区",
|
|||
|
|
qihou:"亚热带季风气候、高原山地气候",
|
|||
|
|
people:"8341万人" ,
|
|||
|
|
num:"47.3万平方公里" ,
|
|||
|
|
GDP:"40678.13亿元",
|
|||
|
|
renjunGDP:"48883元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '重庆',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"渝",
|
|||
|
|
provincialcapital:"直辖市",
|
|||
|
|
diqu:"中国西南地区",
|
|||
|
|
qihou:"亚热带季风性湿润气候",
|
|||
|
|
people:"3101.79万人" ,
|
|||
|
|
num:"48.6万平方公里" ,
|
|||
|
|
GDP:"20363.19亿元",
|
|||
|
|
renjunGDP:"65933元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '山东',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"鲁",
|
|||
|
|
provincialcapital:"济南",
|
|||
|
|
diqu:"中国华北地区",
|
|||
|
|
qihou:"温带季风气候",
|
|||
|
|
people:"10047.24万人" ,
|
|||
|
|
num:"15.79万平方公里" ,
|
|||
|
|
GDP:"76469.7亿元",
|
|||
|
|
renjunGDP:"76267元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '河南',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"豫",
|
|||
|
|
provincialcapital:"郑州",
|
|||
|
|
diqu:"中国华中地区",
|
|||
|
|
qihou:"温带季风气候，亚热带季风气候",
|
|||
|
|
people:"9605万人" ,
|
|||
|
|
num:"16.7万平方公里" ,
|
|||
|
|
GDP:"48055.86亿元",
|
|||
|
|
renjunGDP:"50152元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '江苏',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"黑",
|
|||
|
|
provincialcapital:"南京",
|
|||
|
|
diqu:"中国华东地区",
|
|||
|
|
qihou:"亚热带季风气候，温带季风气候",
|
|||
|
|
people:"8050.7万人" ,
|
|||
|
|
num:"10.72万平方公里" ,
|
|||
|
|
GDP:"92595.4亿元",
|
|||
|
|
renjunGDP:"115000元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '安徽',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"皖",
|
|||
|
|
provincialcapital:"合肥",
|
|||
|
|
diqu:"中国华北地区",
|
|||
|
|
qihou:"温带季风气候、亚热带季风气候",
|
|||
|
|
people:"6323.6万人" ,
|
|||
|
|
num:"14.01万平方公里" ,
|
|||
|
|
GDP:"30006.8亿元",
|
|||
|
|
renjunGDP:"47712元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '湖北',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"鄂",
|
|||
|
|
provincialcapital:"武汉",
|
|||
|
|
diqu:"中国中部地区",
|
|||
|
|
qihou:"亚热带季风气候、高原山地气候",
|
|||
|
|
people:"5917万人" ,
|
|||
|
|
num:"18.59万平方公里" ,
|
|||
|
|
GDP:"39366.55亿元",
|
|||
|
|
renjunGDP:"66615元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '浙江',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"浙",
|
|||
|
|
provincialcapital:"杭州",
|
|||
|
|
diqu:"中国华东地区",
|
|||
|
|
qihou:"亚热带季风气候",
|
|||
|
|
people:"5737万人" ,
|
|||
|
|
num:"10.55万平方公里" ,
|
|||
|
|
GDP:"56197亿元",
|
|||
|
|
renjunGDP:"98643元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '福建',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"闽",
|
|||
|
|
provincialcapital:"福州",
|
|||
|
|
diqu:"中国华东地区",
|
|||
|
|
qihou:"亚热带季风气候",
|
|||
|
|
people:"3941万人" ,
|
|||
|
|
num:"12.4万平方公里" ,
|
|||
|
|
GDP:"35804.04亿元",
|
|||
|
|
renjunGDP:"91197元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '江西',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"赣",
|
|||
|
|
provincialcapital:"南昌",
|
|||
|
|
diqu:"中国华东地区",
|
|||
|
|
qihou:"亚热带季风性湿润气候",
|
|||
|
|
people:"4647.6万人" ,
|
|||
|
|
num:"16.69万平方公里" ,
|
|||
|
|
GDP:"21984.8亿元",
|
|||
|
|
renjunGDP:"47433元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '湖南',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"湘",
|
|||
|
|
provincialcapital:"长沙",
|
|||
|
|
diqu:"中南地区",
|
|||
|
|
qihou:"亚热带季风气候",
|
|||
|
|
people:"6898.8万人" ,
|
|||
|
|
num:"21.18万平方公里" ,
|
|||
|
|
GDP:"36425.8亿元",
|
|||
|
|
renjunGDP:"53097元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '贵州',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"贵",
|
|||
|
|
provincialcapital:"贵阳",
|
|||
|
|
diqu:"西南地区",
|
|||
|
|
qihou:"亚热带季风气候",
|
|||
|
|
people:"3600.0万人" ,
|
|||
|
|
num:"17.6167万平方公里" ,
|
|||
|
|
GDP:"14806.4亿元",
|
|||
|
|
renjunGDP:"41400元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '云南',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"云",
|
|||
|
|
provincialcapital:"昆明",
|
|||
|
|
diqu:"西南地区",
|
|||
|
|
qihou:"亚热带季风气候、热带季风气候、高原山地气候",
|
|||
|
|
people:"4829.5万人" ,
|
|||
|
|
num:"47.3万平方公里" ,
|
|||
|
|
GDP:"14869.9亿元",
|
|||
|
|
renjunGDP:"31358元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '广东',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"粤",
|
|||
|
|
provincialcapital:"广州",
|
|||
|
|
diqu:"华南地区",
|
|||
|
|
qihou:"亚热带季风气候",
|
|||
|
|
people:"11346.0万人" ,
|
|||
|
|
num:"17.97万平方公里" ,
|
|||
|
|
GDP:"89879.2亿元",
|
|||
|
|
renjunGDP:"81089元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '广西',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"桂",
|
|||
|
|
provincialcapital:"南宁",
|
|||
|
|
diqu:"华南地区",
|
|||
|
|
qihou:"亚热带季风气候",
|
|||
|
|
people:"4926万人" ,
|
|||
|
|
num:"23.76万平方公里" ,
|
|||
|
|
GDP:"20396.2亿元",
|
|||
|
|
renjunGDP:"41752元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '海南',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"琼",
|
|||
|
|
provincialcapital:"海口",
|
|||
|
|
diqu:"华南地区",
|
|||
|
|
qihou:"热带海洋性季风气候",
|
|||
|
|
people:"934.32万人" ,
|
|||
|
|
num:"3.54万平方公里" ,
|
|||
|
|
GDP:"4832.05亿元",
|
|||
|
|
renjunGDP:"52195.5元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '上海',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"沪",
|
|||
|
|
provincialcapital:"上海",
|
|||
|
|
diqu:"华东地区",
|
|||
|
|
qihou:"亚热带季风气候",
|
|||
|
|
people:"2423.78万人" ,
|
|||
|
|
num:"6340.5平方公里" ,
|
|||
|
|
GDP:"32679.87亿元",
|
|||
|
|
renjunGDP:"135000元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '香港',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"港",
|
|||
|
|
provincialcapital:"香港",
|
|||
|
|
diqu:"华南地区",
|
|||
|
|
qihou:"亚热带季风气候",
|
|||
|
|
people:"748.25万人" ,
|
|||
|
|
num:"1106.34平方公里" ,
|
|||
|
|
GDP:"24042.15亿元",
|
|||
|
|
renjunGDP:"343595.02元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '澳门',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"澳",
|
|||
|
|
provincialcapital:"澳门",
|
|||
|
|
diqu:"华南地区",
|
|||
|
|
qihou:"亚热带季风气候",
|
|||
|
|
people:"67.2万" ,
|
|||
|
|
num:"32.8平方公里" ,
|
|||
|
|
GDP:"4448.88亿元",
|
|||
|
|
renjunGDP:"676564.63元"
|
|||
|
|
}],
|
|||
|
|
[{
|
|||
|
|
name: '台湾',
|
|||
|
|
value: 0,
|
|||
|
|
ave:"台",
|
|||
|
|
provincialcapital:"台湾",
|
|||
|
|
diqu:"华东地区",
|
|||
|
|
qihou:"北回归线以北属亚热带季风气候，以南属热带季风气候",
|
|||
|
|
people:"2358万人" ,
|
|||
|
|
num:"36192.8155平方公里" ,
|
|||
|
|
GDP:"3.9万亿元人民币",
|
|||
|
|
renjunGDP:"165400元"
|
|||
|
|
}]
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 设置 series 内容
|
|||
|
|
let redName = '西藏';
|
|||
|
|
|
|||
|
|
// 搜索时，高亮搜索结果（省份），写的内容和下面 china map 初始化的地方很冗余
|
|||
|
|
function highLight(name) {
|
|||
|
|
// 要高亮显示的省份
|
|||
|
|
redName = name
|
|||
|
|
var series = [];
|
|||
|
|
[ [redName, chinaDatas] ].forEach(function(item, i) {
|
|||
|
|
series.push(
|
|||
|
|
{
|
|||
|
|
type: 'effectScatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
zlevel: 2,
|
|||
|
|
rippleEffect: { //涟漪特效
|
|||
|
|
period: 4, //动画时间，值越小速度越快
|
|||
|
|
brushType: 'fill', //波纹绘制方式 stroke, fill
|
|||
|
|
scale: .5 //波纹圆环最大限制，值越大波纹越大
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'right', //显示位置
|
|||
|
|
offset: [5, 0], //偏移设置
|
|||
|
|
formatter: function(params) { //圆环显示文字
|
|||
|
|
return params.data.name;
|
|||
|
|
},
|
|||
|
|
fontSize: 14
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
symbol: 'circle',
|
|||
|
|
symbolSize: function(val) {
|
|||
|
|
return 10; //圆环大小
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
show: false,
|
|||
|
|
// color: '#f00'
|
|||
|
|
color: function(params) { //圆环显示文字
|
|||
|
|
// if (params.data.dataItem[0].name == redName) {
|
|||
|
|
// return '#2bd291'
|
|||
|
|
// } else {
|
|||
|
|
return '#70c4eb'
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 在这里修改悬浮框,加了一个show:true
|
|||
|
|
tooltip: {
|
|||
|
|
show:true,
|
|||
|
|
trigger: 'item',
|
|||
|
|
backgroundColor: 'rgba(8, 18, 42, 0.85)',
|
|||
|
|
borderColor: '#040616',
|
|||
|
|
showDelay: 0,
|
|||
|
|
hideDelay: 0,
|
|||
|
|
enterable: true,
|
|||
|
|
transitionDuration: 0,
|
|||
|
|
extraCssText: 'z-index:100',
|
|||
|
|
formatter: function(params, ticket, callback) {
|
|||
|
|
// 根据业务自己拓展要显示的内容
|
|||
|
|
//console.log('params--2',params)
|
|||
|
|
let res = "";
|
|||
|
|
let name = params.data.dataItem[0].name;
|
|||
|
|
let ave = params.data.dataItem[0].ave;
|
|||
|
|
let provincialcapital= params.data.dataItem[0].provincialcapital;
|
|||
|
|
let diqu = params.data.dataItem[0].diqu;
|
|||
|
|
let qihou = params.data.dataItem[0].qihou;
|
|||
|
|
let people = params.data.dataItem[0].people;
|
|||
|
|
let num = params.data.dataItem[0].num;
|
|||
|
|
let GDP = params.data.dataItem[0].GDP;
|
|||
|
|
let renjunGDP = params.data.dataItem[0].renjunGDP;
|
|||
|
|
|
|||
|
|
res = "<div style='color:#fff;padding:10px;'><span>名称：" + name + "</span><br/><span>中文名：" + ave + "</span><br/><span>外文名：" + provincialcapital + "</span><br/><span>所属地区：" + diqu + "</span><br/><span>气候：" + qihou + "</span><br/><span>面积：" + people + "</span><br/><span>语言：" + num + "</span><br/><span>海拔：" + GDP + "</span><br/><span>著名景点：" + renjunGDP +
|
|||
|
|
' </div>' +
|
|||
|
|
' </div>' +
|
|||
|
|
'<div id="tooltipBarId" style="height:100px;width:100%;border-radius:0 0 5px 0;background:#D79D3D"></div>'+ "</span><br/><span>演示表格可以任意定制输入及其他参数";
|
|||
|
|
setTimeout(function() {
|
|||
|
|
tooltipCharts(params.name);
|
|||
|
|
}, 10);
|
|||
|
|
return res;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: item[1].map(function(dataItem) {
|
|||
|
|
return {
|
|||
|
|
dataItem: dataItem,
|
|||
|
|
name: dataItem[0].name,
|
|||
|
|
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
|
|||
|
|
};
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'scatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
zlevel: 2,
|
|||
|
|
rippleEffect: {
|
|||
|
|
period: 4,
|
|||
|
|
brushType: 'stroke',
|
|||
|
|
scale: 4
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'right',
|
|||
|
|
fontSize: 14,
|
|||
|
|
offset: [5, 0],
|
|||
|
|
color: '#2bd291',
|
|||
|
|
formatter: '{b}',
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#2bd291"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
symbol: 'pin',
|
|||
|
|
color:'#2bd291',
|
|||
|
|
symbolSize: 50,
|
|||
|
|
data: [{
|
|||
|
|
name: item[0],
|
|||
|
|
value: chinaGeoCoordMap[item[0]].concat([10]),
|
|||
|
|
}],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'map',
|
|||
|
|
geoIndex: 0
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// china map echarts 关键配置信息
|
|||
|
|
option = {
|
|||
|
|
tooltip: {
|
|||
|
|
show:false,
|
|||
|
|
trigger: 'item',
|
|||
|
|
position: 'top',
|
|||
|
|
backgroundColor: 'rgba(166, 200, 76, 0.82)',
|
|||
|
|
borderColor: '#040616',
|
|||
|
|
showDelay: 0,
|
|||
|
|
hideDelay: 0,
|
|||
|
|
enterable: true,
|
|||
|
|
transitionDuration: 0,
|
|||
|
|
extraCssText: 'z-index:100'
|
|||
|
|
},
|
|||
|
|
backgroundColor: "#1D346F",
|
|||
|
|
geo: {
|
|||
|
|
show: true,
|
|||
|
|
map: 'china',
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
show: false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// roam: false,//地图设置不可拖拽，固定的
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
areaColor: '#1D346F',
|
|||
|
|
borderWidth: 0,
|
|||
|
|
shadowColor: '#D79D3D',
|
|||
|
|
shadowBlur: 30,
|
|||
|
|
shadowOffsetX: -5,
|
|||
|
|
shadowOffsetY: 10
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: series
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
var series = [];
|
|||
|
|
|
|||
|
|
[ [redName, chinaDatas] ].forEach(function(item, i) {
|
|||
|
|
series.push(
|
|||
|
|
{
|
|||
|
|
type: 'effectScatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
zlevel: 2,
|
|||
|
|
rippleEffect: { //涟漪特效
|
|||
|
|
period: 4, //动画时间，值越小速度越快
|
|||
|
|
brushType: 'fill', //波纹绘制方式 stroke, fill
|
|||
|
|
scale: .5 //波纹圆环最大限制，值越大波纹越大
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'right', //显示位置
|
|||
|
|
offset: [5, 0], //偏移设置
|
|||
|
|
formatter: function(params) { //圆环显示文字
|
|||
|
|
return params.data.name;
|
|||
|
|
},
|
|||
|
|
fontSize: 14
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
symbol: 'circle',
|
|||
|
|
symbolSize: function(val) {
|
|||
|
|
return 10; //圆环大小
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
show: false,
|
|||
|
|
// color: '#f00'
|
|||
|
|
color: function(params) { //圆环显示文字
|
|||
|
|
// if (params.data.dataItem[0].name == redName) {
|
|||
|
|
// return '#2bd291'
|
|||
|
|
// } else {
|
|||
|
|
return '#70c4eb'
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 在这里修改悬浮框,加了一个show:true
|
|||
|
|
tooltip: {
|
|||
|
|
show:true,
|
|||
|
|
trigger: 'item',
|
|||
|
|
backgroundColor: 'rgba(8, 18, 42, 0.85)',
|
|||
|
|
borderColor: '#040616',
|
|||
|
|
showDelay: 0,
|
|||
|
|
hideDelay: 0,
|
|||
|
|
enterable: true,
|
|||
|
|
transitionDuration: 0,
|
|||
|
|
extraCssText: 'z-index:100',
|
|||
|
|
formatter: function(params, ticket, callback) {
|
|||
|
|
// 根据业务自己拓展要显示的内容
|
|||
|
|
//console.log('params--2',params)
|
|||
|
|
let res = "";
|
|||
|
|
let name = params.data.dataItem[0].name;
|
|||
|
|
let ave = params.data.dataItem[0].ave;
|
|||
|
|
let provincialcapital= params.data.dataItem[0].provincialcapital;
|
|||
|
|
let diqu = params.data.dataItem[0].diqu;
|
|||
|
|
let qihou = params.data.dataItem[0].qihou;
|
|||
|
|
let people = params.data.dataItem[0].people;
|
|||
|
|
let num = params.data.dataItem[0].num;
|
|||
|
|
let GDP = params.data.dataItem[0].GDP;
|
|||
|
|
let renjunGDP = params.data.dataItem[0].renjunGDP;
|
|||
|
|
|
|||
|
|
res = "<div style='color:#fff;padding:10px;'><span>名称：" + name + "</span><br/><span>中文名：" + ave + "</span><br/><span>外文名：" + provincialcapital + "</span><br/><span>所属地区：" + diqu + "</span><br/><span>气候：" + qihou + "</span><br/><span>面积：" + people + "</span><br/><span>语言：" + num + "</span><br/><span>海拔：" + GDP + "</span><br/><span>著名景点：" + renjunGDP +
|
|||
|
|
' </div>' +
|
|||
|
|
' </div>' +
|
|||
|
|
'<div id="tooltipBarId" style="height:100px;width:100%;border-radius:0 0 5px 0;background:#D79D3D"></div>'+ "</span><br/><span>演示表格可以任意定制输入及其他参数";
|
|||
|
|
setTimeout(function() {
|
|||
|
|
tooltipCharts(params.name);
|
|||
|
|
}, 10);
|
|||
|
|
return res;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: item[1].map(function(dataItem) {
|
|||
|
|
return {
|
|||
|
|
dataItem: dataItem,
|
|||
|
|
name: dataItem[0].name,
|
|||
|
|
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
|
|||
|
|
};
|
|||
|
|
}),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'scatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
zlevel: 2,
|
|||
|
|
rippleEffect: {
|
|||
|
|
period: 4,
|
|||
|
|
brushType: 'stroke',
|
|||
|
|
scale: 4
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'right',
|
|||
|
|
fontSize: 14,
|
|||
|
|
offset: [5, 0],
|
|||
|
|
color: '#2bd291',
|
|||
|
|
formatter: '{b}',
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#2bd291"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
symbol: 'pin',
|
|||
|
|
color:'#2bd291',
|
|||
|
|
symbolSize: 50,
|
|||
|
|
data: [{
|
|||
|
|
name: item[0],
|
|||
|
|
value: chinaGeoCoordMap[item[0]].concat([10]),
|
|||
|
|
}],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'map',
|
|||
|
|
geoIndex: 0
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 关键！！！！在这里修改悬浮框,把 show:true 改为 show:false
|
|||
|
|
// china map echarts 中关键配置信息
|
|||
|
|
option = {
|
|||
|
|
brush: {
|
|||
|
|
outOfBrush: {
|
|||
|
|
color: '#abc'
|
|||
|
|
},
|
|||
|
|
brushStyle: {
|
|||
|
|
borderWidth: 2,
|
|||
|
|
color: 'rgba(0,0,0,0.2)',
|
|||
|
|
borderColor: 'rgba(213, 204, 0, 0.8)',
|
|||
|
|
},
|
|||
|
|
seriesIndex: [0, 1],
|
|||
|
|
throttleType: 'debounce',
|
|||
|
|
throttleDelay: 300,
|
|||
|
|
geoIndex: 0
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show:false,
|
|||
|
|
trigger: 'item',
|
|||
|
|
position: 'top',
|
|||
|
|
backgroundColor: 'rgba(166, 200, 76, 0.82)',
|
|||
|
|
borderColor: '#040616',
|
|||
|
|
showDelay: 0,
|
|||
|
|
hideDelay: 0,
|
|||
|
|
enterable: true,
|
|||
|
|
transitionDuration: 0,
|
|||
|
|
extraCssText: 'z-index:100'
|
|||
|
|
},
|
|||
|
|
backgroundColor: "#1D346F",
|
|||
|
|
geo: {
|
|||
|
|
show: true,
|
|||
|
|
map: 'china',
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
show: false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// roam: false,//地图设置不可拖拽，固定的
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
areaColor: '#1D346F',
|
|||
|
|
borderWidth: 0,
|
|||
|
|
shadowColor: '#D79D3D',
|
|||
|
|
shadowBlur: 30,
|
|||
|
|
shadowOffsetX: -5,
|
|||
|
|
shadowOffsetY: 10
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: series
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 中国地图上各区域随鼠标移动，亮或不亮
|
|||
|
|
myChart.on('mouseover', function(params) {
|
|||
|
|
var city = params.name;
|
|||
|
|
|
|||
|
|
if (city == '广东' || city == '广西' || city == '海南'|| city == '云南' || city == '湖南' || city == '贵州') {
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "广东"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "广西"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "海南"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "云南"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "湖南"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "贵州"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (city == '江西' || city == '江苏' || city == '浙江' || city == '安徽' || city == '福建' || city == '上海') {
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "江西"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "江苏"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "浙江"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "安徽"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "福建"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "上海"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (city == '北京' || city == '天津' || city == '河北' || city == '河南' || city == '山西' || city == '陕西' || city == '湖北') {
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "北京"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "天津"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "河北"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "河南"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "山西"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "陕西"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "湖北"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if (city == '四川' || city == '甘肃' || city == '青海' || city == '宁夏' || city == '新疆' || city == '西藏' || city == '重庆') {
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "四川"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "甘肃"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "青海"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "宁夏"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "新疆"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "西藏"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "重庆"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (city == '辽宁' || city == '山东' || city == '吉林' || city == '黑龙江' || city == '内蒙古') {
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "辽宁"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "山东"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "吉林"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "黑龙江"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "内蒙古"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if (city == '台湾' || city == '香港' || city == '澳门') {
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "台湾"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "香港"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
name: "澳门"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
myChart.on('mouseout', function(params) {
|
|||
|
|
var city = params.name;
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (city == '广东' || city == '广西' || city == '海南'|| city == '云南' || city == '湖南' || city == '贵州') {
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "广东"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "广西"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "海南"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "云南"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "湖南"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "贵州"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if (city == '江西' || city == '江苏' || city == '浙江' || city == '安徽' || city == '福建' || city == '上海') {
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "江西"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "江苏"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "浙江"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "安徽"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "福建"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "上海"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (city == '北京' || city == '天津' || city == '河北' || city == '河南' || city == '山西' || city == '陕西' || city == '湖北') {
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "北京"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "天津"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "河北"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "河南"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "山西"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "陕西"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "湖北"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if (city == '四川' || city == '甘肃' || city == '青海' || city == '宁夏' || city == '新疆' || city == '西藏' || city == '重庆') {
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "四川"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "甘肃"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "青海"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "宁夏"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "新疆"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "西藏"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "重庆"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if (city == '辽宁' || city == '山东' || city == '吉林' || city == '黑龙江' || city == '内蒙古') {
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "辽宁"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "山东"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "吉林"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "黑龙江"
|
|||
|
|
});
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "内蒙古"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (city == '台湾' || city == '香港' || city == '澳门') {
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "台湾"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "香港"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'downplay',
|
|||
|
|
name: "澳门"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 知识图谱 echarts 中关键数据初始化
|
|||
|
|
graphList = {"keyword":{
|
|||
|
|
"nodes":[],
|
|||
|
|
"links":[]
|
|||
|
|
}}
|
|||
|
|
currentGraph = {
|
|||
|
|
nodes: {},
|
|||
|
|
links: {},
|
|||
|
|
};
|
|||
|
|
nodeMap = {};
|
|||
|
|
category = 1
|
|||
|
|
symbolSize = 40
|
|||
|
|
// china 地图上省份点击事件
|
|||
|
|
myChart.on('click', function(params) {
|
|||
|
|
var city = params.name;
|
|||
|
|
graphList = {"keyword":{
|
|||
|
|
"nodes":[],
|
|||
|
|
"links":[]
|
|||
|
|
}}
|
|||
|
|
currentGraph = {
|
|||
|
|
nodes: {},
|
|||
|
|
links: {},
|
|||
|
|
}
|
|||
|
|
nodeMap = {};
|
|||
|
|
category = 1
|
|||
|
|
symbolSize = 40
|
|||
|
|
// 根据省份，初始化知识图谱内容
|
|||
|
|
init(city)
|
|||
|
|
// 根据省份，加载新的图片信息
|
|||
|
|
loadPic(city)
|
|||
|
|
// 根据省份，加载新的video信息
|
|||
|
|
loadVideo(city)
|
|||
|
|
});
|
|||
|
|
// 重新渲染 china map echarts 区域
|
|||
|
|
function refresh(option){
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
// 默认打开 or 刷新页面时加载 china map
|
|||
|
|
refresh(option)
|
|||
|
|
// 根据点击知识图谱结点后获得的关联信息，往知识图谱数据结构 graphList 增添新的内容
|
|||
|
|
function fillInfo(result, name) {
|
|||
|
|
// 如果是第一次或者重新点击 china map 中某个省份
|
|||
|
|
if (graphList.keyword.nodes.length == 0) {
|
|||
|
|
formNode = {"name":name, "category":category, "symbolSize":symbolSize}
|
|||
|
|
graphList.keyword.nodes[0]=formNode
|
|||
|
|
category += 1
|
|||
|
|
symbolSize -= 5
|
|||
|
|
}
|
|||
|
|
// 如果是第一次点击省份节点，不需要增添新的内容，只需要讲graphlist 中的数据加载出来即可
|
|||
|
|
else if (graphList.keyword.nodes[0].name == name) {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
// 节点所属分类 + 1，节点大小 - 5
|
|||
|
|
else {
|
|||
|
|
category = nodeMap[name].category + 1
|
|||
|
|
symbolSize = nodeMap[name].symbolSize - 5
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
nodeLen = graphList.keyword.nodes.length
|
|||
|
|
linkLen = graphList.keyword.links.length
|
|||
|
|
source = name
|
|||
|
|
for (i = 0; i < result.data.avp.length; i++) {
|
|||
|
|
// 新加载的数据中可能会存在和源 name 相同的数据
|
|||
|
|
if (source == result.data.avp[i][1]) {
|
|||
|
|
nodeLen--
|
|||
|
|
linkLen--
|
|||
|
|
continue
|
|||
|
|
}
|
|||
|
|
// 组织数据
|
|||
|
|
formNode = {"name":result.data.avp[i][1], "category":category, "symbolSize":symbolSize}
|
|||
|
|
graphList.keyword.nodes[nodeLen+i]=formNode
|
|||
|
|
formLink = {"source":source, "target":result.data.avp[i][1]}
|
|||
|
|
graphList.keyword.links[linkLen+i]=formLink
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据关键字请求知识图谱关联数据
|
|||
|
|
function sync_request(url){
|
|||
|
|
//实例化XmlHttpRequest对象
|
|||
|
|
var xhr=new XMLHttpRequest();
|
|||
|
|
//使用GET方式请求指定网址的页面
|
|||
|
|
xhr.open("GET",url,false);
|
|||
|
|
//发送空内容请求
|
|||
|
|
xhr.send(null);
|
|||
|
|
|
|||
|
|
if(xhr.status===200){//200状态码表示正常
|
|||
|
|
result = xhr.responseText
|
|||
|
|
// console.log(JSON.parse(result))
|
|||
|
|
return JSON.parse(result)
|
|||
|
|
}else{
|
|||
|
|
alert("Error occurred:"+xhr.statusText);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 点击省份的时候初始化 nodeMap 和 currentGraph 等关键数据结构
|
|||
|
|
function init(name) {
|
|||
|
|
result = sync_request('https://api.ownthink.com/kg/knowledge?entity='+name)
|
|||
|
|
if (!result.data) {
|
|||
|
|
alert("不存在关联关系，无法继续展开！")
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
// 往 graphList 中填充数据
|
|||
|
|
fillInfo(result, name)
|
|||
|
|
nodeMap = {};
|
|||
|
|
graph = graphList.keyword
|
|||
|
|
for (let i = 0; i < graph.nodes.length; i++) {
|
|||
|
|
if (graph.nodes[i].category === 1) {
|
|||
|
|
currentGraph.nodes[graph.nodes[i].name] = graph.nodes[i];
|
|||
|
|
}
|
|||
|
|
nodeMap[graph.nodes[i].name] = graph.nodes[i];
|
|||
|
|
nodeMap[graph.nodes[i].name]['links'] = {};
|
|||
|
|
nodeMap[graph.nodes[i].name]['nodes'] = {};
|
|||
|
|
nodeMap[graph.nodes[i].name]['hasAppend'] = false;
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < graph.links.length; i++) {
|
|||
|
|
let link = graph.links[i];
|
|||
|
|
if (nodeMap[link.source] !== undefined && nodeMap[link.target] !== undefined) {
|
|||
|
|
nodeMap[link.source].links[link.target] = link;
|
|||
|
|
nodeMap[link.source].nodes[nodeMap[link.target].name] = nodeMap[link.target];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < graph.nodes.length; i++) {
|
|||
|
|
graph.nodes[i].itemStyle = null;
|
|||
|
|
graph.nodes[i].label = {
|
|||
|
|
normal: {
|
|||
|
|
show: graph.nodes[i].symbolSize > 15
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
redrawGraph();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 每次点击知识图谱中的节点，就根据关键词，请求其关联关系数据
|
|||
|
|
function loadData(name) {
|
|||
|
|
result = sync_request('https://api.ownthink.com/kg/knowledge?entity='+name)
|
|||
|
|
if (JSON.stringify(result.data) == '{}'){
|
|||
|
|
alert("不存在关联关系，无法继续展开！")
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
fillInfo(result, name)
|
|||
|
|
nodeMap = {};
|
|||
|
|
graph = graphList.keyword
|
|||
|
|
for (let i = 0; i < graph.nodes.length; i++) {
|
|||
|
|
nodeMap[graph.nodes[i].name] = graph.nodes[i];
|
|||
|
|
nodeMap[graph.nodes[i].name]['links'] = {};
|
|||
|
|
nodeMap[graph.nodes[i].name]['nodes'] = {};
|
|||
|
|
nodeMap[graph.nodes[i].name]['hasAppend'] = false;
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < graph.links.length; i++) {
|
|||
|
|
let link = graph.links[i];
|
|||
|
|
if (nodeMap[link.source] !== undefined && nodeMap[link.target] !== undefined) {
|
|||
|
|
nodeMap[link.source].links[link.target] = link;
|
|||
|
|
nodeMap[link.source].nodes[nodeMap[link.target].name] = nodeMap[link.target];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < graph.nodes.length; i++) {
|
|||
|
|
graph.nodes[i].itemStyle = null;
|
|||
|
|
graph.nodes[i].label = {
|
|||
|
|
normal: {
|
|||
|
|
show: graph.nodes[i].symbolSize > 15
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
append(name)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 点击节点，并加载关联数据到 nodeMap 后，再将其展开
|
|||
|
|
function append(nodeName) {
|
|||
|
|
// 根据nodeName从nodeMap里拿出对应的nodes和links，并append到currentGraph.nodes currentGraph.links
|
|||
|
|
let node = nodeMap[nodeName];
|
|||
|
|
|
|||
|
|
if (node.hasAppend === true || Object.keys(node.nodes).length === 0 || Object.keys(node.links).length === 0) {
|
|||
|
|
alert("不存在关联关系，无法继续展开！");
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
Object.values(node.nodes).forEach(n => {
|
|||
|
|
currentGraph.nodes[n.name] = n;
|
|||
|
|
});
|
|||
|
|
Object.values(node.links).forEach(l => {
|
|||
|
|
currentGraph.links[l.source + "_" + l.target] = l;
|
|||
|
|
});
|
|||
|
|
node.hasAppend = true;
|
|||
|
|
redrawGraph();
|
|||
|
|
}
|
|||
|
|
// 点击已经展开的知识图谱节点，将节点收缩
|
|||
|
|
function remove(nodeName) {
|
|||
|
|
//根据nodeName从nodeMap里拿出对应的nodes和links，从currentGraph.nodes currentGraph.links删除当前节点的nodes和links并且递归
|
|||
|
|
let node = nodeMap[nodeName];
|
|||
|
|
Object.values(node.nodes).forEach(n => {
|
|||
|
|
delete currentGraph.nodes[n.name];
|
|||
|
|
if (n.hasAppend === true && Object.keys(n.nodes).length > 0) {
|
|||
|
|
remove(n.name);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
Object.values(node.links).forEach(l => {
|
|||
|
|
delete currentGraph.links[l.source + '_' + l.target];
|
|||
|
|
});
|
|||
|
|
// 设置flag 等于false
|
|||
|
|
node.hasAppend = false;
|
|||
|
|
|
|||
|
|
redrawGraph();
|
|||
|
|
}
|
|||
|
|
// 根据更新后的option重新绘制知识图谱的 echarts
|
|||
|
|
function redrawGraph() {
|
|||
|
|
$('.fixed-left').css({left: 0}).addClass('collpased');
|
|||
|
|
if (!$('.fixed-left').hasClass('active')) {
|
|||
|
|
$('.screen-btn').css({left: '360px'});
|
|||
|
|
}
|
|||
|
|
$('.collpase-icon').addClass('icon-shouqi').removeClass('icon-zhankai');
|
|||
|
|
optionGraph.series[0].data = Object.values(currentGraph.nodes);
|
|||
|
|
optionGraph.series[0].links = Object.values(currentGraph.links);
|
|||
|
|
myChartGraph.setOption(optionGraph);
|
|||
|
|
}
|
|||
|
|
// 知识图谱 echarts 中的关键配置信息
|
|||
|
|
const optionGraph = {
|
|||
|
|
title: {
|
|||
|
|
title:'知识图谱',
|
|||
|
|
top: 'top',
|
|||
|
|
left: 'center',
|
|||
|
|
},
|
|||
|
|
tooltip: {},
|
|||
|
|
legend: [],
|
|||
|
|
animation: false,
|
|||
|
|
series: [{
|
|||
|
|
type: 'graph',
|
|||
|
|
layout: 'force',
|
|||
|
|
data: Object.values(currentGraph.nodes),
|
|||
|
|
links: Object.values(currentGraph.links),
|
|||
|
|
categories: [
|
|||
|
|
{
|
|||
|
|
name: 1,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#c23531'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 2,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#2f4554'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 3,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#61a0a8'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 4,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#999ea4'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 5,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#555555'
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
roam: true,
|
|||
|
|
focusNodeAdjacency: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
borderColor: '#fff',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
position: 'right',
|
|||
|
|
formatter: '{b}'
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'target',
|
|||
|
|
opacity: 0.6,
|
|||
|
|
curveness: 0.3
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 10
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
force: {
|
|||
|
|
layoutAnimation: false,
|
|||
|
|
repulsion: 500
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// init("西藏")
|
|||
|
|
// 知识图谱节点点击事件
|
|||
|
|
myChartGraph.on('click', function(params) {
|
|||
|
|
if (params.dataType === "node") {
|
|||
|
|
const node = nodeMap[params.data.name];
|
|||
|
|
|
|||
|
|
if (node.hasAppend === true) {
|
|||
|
|
remove(node.name)
|
|||
|
|
} else {
|
|||
|
|
loadData(node.name);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 知识图谱全屏点击函数
|
|||
|
|
$('#btn').on('click', function () {
|
|||
|
|
|
|||
|
|
if ($('.fixed-left').hasClass('active')) {
|
|||
|
|
|
|||
|
|
$('.fixed-left').removeClass('active');
|
|||
|
|
$('.video_img, .search-area').show();
|
|||
|
|
$('.screen_icon').removeClass('icon-suoxiao').addClass('icon-kuoda');
|
|||
|
|
$('.screen-btn').css({
|
|||
|
|
left: '360px'
|
|||
|
|
})
|
|||
|
|
graphContainer.style.width = 400 + 'px';
|
|||
|
|
graphContainer.style.height = '60%';
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
var width = document.body.clientWidth;
|
|||
|
|
$('.fixed-left').addClass('active');
|
|||
|
|
$('.screen-btn').css({
|
|||
|
|
left: width - 40 + 'px'
|
|||
|
|
});
|
|||
|
|
$('.video_img, .search-area').hide();
|
|||
|
|
$('.screen_icon').addClass('icon-suoxiao').removeClass('icon-kuoda');
|
|||
|
|
graphContainer.style.width = document.body.clientWidth + 'px';
|
|||
|
|
graphContainer.style.height = document.body.clientHeight + 'px';
|
|||
|
|
}
|
|||
|
|
// redrawGraph();
|
|||
|
|
myChartGraph.resize();
|
|||
|
|
});
|
|||
|
|
// 点击省份加载图片
|
|||
|
|
function loadPic(name) {
|
|||
|
|
if (name == "西藏" || name == "新疆" || name == "青海") {
|
|||
|
|
temp = 1
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
name = "西藏"
|
|||
|
|
}
|
|||
|
|
// alert(1)
|
|||
|
|
$(".picture").each(function(index){
|
|||
|
|
newPath = "./image/"+name+"/"+(index+1)+".jpg"
|
|||
|
|
$(this).attr("src", newPath)
|
|||
|
|
// alert(index)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// 点击省份加载视频
|
|||
|
|
function loadVideo(name) {
|
|||
|
|
if (name == "西藏" || name == "新疆" || name == "青海") {
|
|||
|
|
temp = 1
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
name = "西藏"
|
|||
|
|
}
|
|||
|
|
$("video").remove();
|
|||
|
|
var newPath = "./image/"+name+"/1.mp4"
|
|||
|
|
var newSource = "<video width=\"100%\" height=\"100%\" controls>"+
|
|||
|
|
"<source class=\"video\" src="+newPath+" type=\"video/mp4\">"+
|
|||
|
|
"<source src=\"movie.ogg\" type=\"video/ogg\">"+
|
|||
|
|
"Your browser does not support the video tag."+
|
|||
|
|
"</video>"
|
|||
|
|
$(".div-video").prepend(newSource)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
setTimeout(function () {
|
|||
|
|
myChart.dispatchAction({
|
|||
|
|
type: 'brush',
|
|||
|
|
areas: [
|
|||
|
|
{
|
|||
|
|
geoIndex: 0,
|
|||
|
|
brushType: 'polygon',
|
|||
|
|
coordRange: [[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77],[118.76,34.63],[118.6,34.6],[118.46,34.6],[118.33,34.57],[118.05,34.56],[117.6,34.56],[117.41,34.56],[117.25,34.56],[117.11,34.56],[117.02,34.56],[117,34.56],[116.94,34.56],[116.94,34.55],[116.9,34.5],[116.88,34.44],[116.88,34.37],[116.88,34.33],[116.88,34.24],[116.92,34.15],[116.98,34.09],[117.05,34.06],[117.19,33.96],[117.29,33.9],[117.43,33.8],[117.49,33.75],[117.54,33.68],[117.6,33.65],[117.62,33.61],[117.64,33.59],[117.68,33.58],[117.7,33.52],[117.74,33.5],[117.74,33.46],[117.8,33.44],[117.82,33.41],[117.86,33.37],[117.9,33.3],[117.9,33.28],[117.9,33.27],[118.09,32.97],[118.21,32.7],[118.29,32.56],[118.31,32.5],[118.35,32.46],[118.35,32.42],[118.35,32.36],[118.35,32.34],[118.37,32.24],[118.37,32.14],[118.37,32.09],[118.44,32.05],[118.46,32.01],[118.54,31.98],[118.6,31.93],[118.68,31.86],[118.72,31.8],[118.74,31.78],[118.76,31.74],[118.78,31.7],[118.82,31.64],[118.82,31.62],[118.86,31.58],[118.86,31.55],[118.88,31.54],[118.88,31.52],[118.9,31.51],[118.91,31.48],[118.93,31.43],[118.95,31.4],[118.97,31.39],[118.97,31.37],[118.97,31.34],[118.97,31.27],[118.97,31.21],[118.97,31.17],[118.97,31.12],[118.97,31.02],[118.97,30.93],[118.97,30.87],[118.97,30.85],[118.95,30.8],[118.95,30.77],[118.95,30.76],[118.93,30.7],[118.91,30.63],[118.91,30.61],[118.91,30.6],[118.9,30.6],[118.88,30.54],[118.88,30.51],[118.86,30.51],[118.86,30.46],[118.72,30.18],[118.68,30.1],[118.66,30.07],[118.62,29.91],[118.56,29.73],[118.52,29.63],[118.48,29.51],[118.44,29.42],[118.44,29.32],[118.43,29.19],[118.43,29.14],[118.43,29.08],[118.44,29.05],[118.46,29.05],[118.6,28.95],[118.64,28.94],[119.07,28.51],[119.25,28.41],[119.36,28.28],[119.46,28.19],[119.54,28.13],[119.66,28.03],[119.78,28],[119.87,27.94],[120.03,27.86],[120.17,27.79],[120.23,27.76],[120.3,27.72],[120.42,27.66],[120.52,27.64],[120.58,27.63],[120.64,27.63],[120.77,27.63],[120.89,27.61],[120.97,27.6],[121.07,27.59],[121.15,27.59],[121.28,27.59],[121.38,27.61],[121.56,27.73],[121.73,27.89],[122.03,28.2],[122.3,28.5],[122.46,28.72],[122.5,28.77],[122.54,28.82],[122.56,28.82],[122.58,28.85],[122.6,28.86],[122.61,28.91],[122.71,29.02],[122.73,29.08],[122.93,29.44],[122.99,29.54],[123.03,29.66],[123.05,29.73],[123.16,29.92],[123.24,30.02],[123.28,30.13],[123.32,30.29],[123.36,30.36],[123.36,30.55],[123.36,30.74],[123.36,31.05],[123.36,31.14],[123.36,31.26],[123.38,31.42],[123.46,31.74],[123.48,31.83],[123.48,31.95],[123.46,32.09],[123.34,32.25],[123.22,32.39],[123.12,32.46],[123.07,32.48],[123.05,32.49],[122.97,32.53],[122.91,32.59],[122.83,32.81],[122.77,32.87],[122.71,32.9],[122.56,32.97],[122.38,33.05],[122.3,33.12],[122.26,33.15],[122.22,33.21],[122.22,33.3],[122.22,33.39],[122.18,33.44],[122.07,33.56],[121.99,33.69],[121.89,33.78],[121.69,34.02],[121.66,34.05],[121.64,34.08]]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
}, 0);
|
|||
|
|
|
|||
|
|
function renderBrushed (params) {
|
|||
|
|
console.log('params==', params);
|
|||
|
|
}
|
|||
|
|
myChart.on('brushselected', renderBrushed);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
$(document).ready(function () {
|
|||
|
|
$('.slider_one_big_picture').EasySlides({
|
|||
|
|
'autoplay': true,
|
|||
|
|
'stepbystep': false,
|
|||
|
|
'show': 0,
|
|||
|
|
'loop': true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 左侧全屏
|
|||
|
|
$('.search-prov').on('mouseover', function () {
|
|||
|
|
$('.search_input').addClass('active');
|
|||
|
|
}).on('mouseout', function () {
|
|||
|
|
$('.search_input').removeClass('active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 搜索
|
|||
|
|
$('.more_icon').on('mouseover', function () {
|
|||
|
|
$('.detail_info').show();
|
|||
|
|
}).on('mouseout', function () {
|
|||
|
|
var timer = setTimeout(function () {
|
|||
|
|
$('.detail_info').hide();
|
|||
|
|
}, 300);
|
|||
|
|
$('.detail_info').on('mouseover', function () {
|
|||
|
|
clearTimeout(timer);
|
|||
|
|
$('.detail_info').show();
|
|||
|
|
}).on('mouseout', function () {
|
|||
|
|
$('.detail_info').hide();
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 根据省份查找
|
|||
|
|
function searchProvince (value) {
|
|||
|
|
console.log('查找的省份:', value);
|
|||
|
|
highLight(value)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
$('.search_icon').on('click', function () {
|
|||
|
|
var $val = $(".search_input").val();
|
|||
|
|
// alert($val)
|
|||
|
|
searchProvince($val)
|
|||
|
|
});
|
|||
|
|
$('.search_input').on('keydown', function (e) {
|
|||
|
|
if (e.keyCode === 13) {
|
|||
|
|
// 调用查找接口
|
|||
|
|
var $val = $(this).val();
|
|||
|
|
searchProvince($val)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
$('.detail_info').on('click', 'li', function () {
|
|||
|
|
console.log($(this).attr('data-key'));
|
|||
|
|
$('.detail_info').hide();
|
|||
|
|
var key = $(this).attr('data-key');
|
|||
|
|
if (key === 'prov') {
|
|||
|
|
$('.search-prov').show();
|
|||
|
|
$('.lat_lon_sec').hide();
|
|||
|
|
}
|
|||
|
|
else if (key === 'lon') {
|
|||
|
|
$('.search-prov').hide();
|
|||
|
|
$('.lat_lon_sec').show();
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
$('.search-prov').hide();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function latOrLonSearch () {
|
|||
|
|
var lat = $('.lat').val(); // 纬度
|
|||
|
|
var lon = $('.lon').val(); // 经度
|
|||
|
|
if (!lat || !lon) {
|
|||
|
|
if (!lat) $('.lat').focus();
|
|||
|
|
if (!lon) $('.lon').focus();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
console.log('经度', lon);
|
|||
|
|
console.log('纬度', lat);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
$('.search_input_common').on('keydown', function (e) {
|
|||
|
|
if (e.keyCode === 13) {
|
|||
|
|
latOrLonSearch();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
$('.lat_lon_search').on('click', function () {
|
|||
|
|
latOrLonSearch();
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 左侧滑屏结束后调用该事件，重新渲染知识图谱
|
|||
|
|
// $('.fixed-left').on('transitionend', function () {
|
|||
|
|
// console.log('滑屏结束时，调用渲染知识图谱');
|
|||
|
|
// // redrawGraph()
|
|||
|
|
// })
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|