forked from p51497208/geo_info_platform
1670 lines
55 KiB
HTML
1670 lines
55 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<!-- 引入 echarts.js -->
|
||
<!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
|
||
<script src="echarts.min.js"></script>
|
||
<!-- 引入 china.js -->
|
||
<script src="china.js"></script>
|
||
<style>
|
||
.div-a{ position: fixed;width:400px;height:536px;padding:10px;z-index: 1;background-color: rgba(0,0,0,0.3);}
|
||
.div-b{ width:400px;height:536px;padding:5px;color:rgb(255, 255, 255);position: relative;}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="div-a">
|
||
<div class="div-b" id="mainGraph">知识图谱</div>
|
||
</div>
|
||
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
||
<div id="main" style="width: 100%;height:810px;"></div>
|
||
|
||
<script type="text/javascript">
|
||
// 基于准备好的dom，初始化echarts实例，地图
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
// 知识图谱
|
||
var myChartGraph = echarts.init(document.getElementById('mainGraph'));
|
||
|
||
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 = '上海';
|
||
var series = [];
|
||
[ ['北京', 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: 'map',
|
||
geoIndex: 0
|
||
}
|
||
);
|
||
});
|
||
|
||
// 关键！！！！在这里修改悬浮框,把 show:true 改为 show:false
|
||
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.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: "澳门"
|
||
});
|
||
|
||
}
|
||
|
||
});
|
||
|
||
myChart.on('click', function(params) {
|
||
|
||
var city = params.name;
|
||
init(city)
|
||
});
|
||
|
||
myChart.setOption(option);
|
||
|
||
|
||
// 知识图谱
|
||
var graphList = {
|
||
"hunan":{
|
||
"nodes": [{
|
||
"name": "湖南",
|
||
"category": "province",
|
||
"symbolSize": 40,
|
||
},
|
||
{
|
||
"name": "长沙",
|
||
"category": "city",
|
||
"symbolSize": 30,
|
||
},
|
||
{
|
||
"name": "开福区",
|
||
"category": "area",
|
||
"symbolSize": 25
|
||
},
|
||
|
||
{
|
||
"name": "芙蓉区",
|
||
"category": "area",
|
||
"symbolSize": 25,
|
||
},
|
||
{
|
||
"name": "天心区",
|
||
"category": "area",
|
||
"symbolSize": 25
|
||
},
|
||
{
|
||
"name": "娄底",
|
||
"category": "city",
|
||
"symbolSize": 30
|
||
},
|
||
|
||
{
|
||
"name": "岳阳",
|
||
"category": "city",
|
||
"symbolSize": 30
|
||
},
|
||
{
|
||
"name": "湘潭",
|
||
"category": "city",
|
||
"symbolSize": 30,
|
||
},
|
||
{
|
||
"name": "人口",
|
||
"category": "attribute",
|
||
"symbolSize": 20,
|
||
},
|
||
{
|
||
"name": "占地面积",
|
||
"category": "attribute",
|
||
"symbolSize": 20,
|
||
}
|
||
|
||
],
|
||
"links": [{
|
||
"source": "湖南",
|
||
"target": "长沙"
|
||
},
|
||
{
|
||
"source": "长沙",
|
||
"target": "开福区"
|
||
},
|
||
{
|
||
"source": "开福区",
|
||
"target": "人口"
|
||
},
|
||
{
|
||
"source": "开福区",
|
||
"target": "占地面积"
|
||
},
|
||
{
|
||
"source": "长沙",
|
||
"target": "天心区"
|
||
},
|
||
{
|
||
"source": "长沙",
|
||
"target": "芙蓉区"
|
||
},
|
||
{
|
||
"source": "湖南",
|
||
"target": "娄底"
|
||
},
|
||
{
|
||
"source": "湖南",
|
||
"target": "岳阳"
|
||
},
|
||
{
|
||
"source": "湖南",
|
||
"target": "湘潭"
|
||
}
|
||
]
|
||
},
|
||
"xinjiang":{
|
||
"nodes": [{
|
||
"name": "新疆",
|
||
"category": "province",
|
||
"symbolSize": 40,
|
||
},
|
||
{
|
||
"name": "乌鲁木齐市",
|
||
"category": "city",
|
||
"symbolSize": 30,
|
||
},
|
||
{
|
||
"name": "克拉玛依市",
|
||
"category": "city",
|
||
"symbolSize": 30
|
||
},
|
||
|
||
{
|
||
"name": "吐鲁番市",
|
||
"category": "city",
|
||
"symbolSize": 30,
|
||
},
|
||
{
|
||
"name": "哈密市",
|
||
"category": "city",
|
||
"symbolSize": 30
|
||
},
|
||
{
|
||
"name": "水磨沟区",
|
||
"category": "area",
|
||
"symbolSize": 25
|
||
},
|
||
|
||
{
|
||
"name": "天山区",
|
||
"category": "area",
|
||
"symbolSize": 25
|
||
},
|
||
{
|
||
"name": "沙依巴克区",
|
||
"category": "area",
|
||
"symbolSize": 25,
|
||
},
|
||
{
|
||
"name": "人口",
|
||
"category": "attribute",
|
||
"symbolSize": 20,
|
||
},
|
||
{
|
||
"name": "占地面积",
|
||
"category": "attribute",
|
||
"symbolSize": 20,
|
||
}
|
||
|
||
],
|
||
"links": [{
|
||
"source": "新疆",
|
||
"target": "乌鲁木齐市"
|
||
},
|
||
{
|
||
"source": "新疆",
|
||
"target": "克拉玛依市"
|
||
},
|
||
{
|
||
"source": "新疆",
|
||
"target": "吐鲁番市"
|
||
},
|
||
{
|
||
"source": "新疆",
|
||
"target": "哈密市"
|
||
},
|
||
{
|
||
"source": "乌鲁木齐市",
|
||
"target": "水磨沟区"
|
||
},
|
||
{
|
||
"source": "乌鲁木齐市",
|
||
"target": "天山区"
|
||
},
|
||
{
|
||
"source": "乌鲁木齐市",
|
||
"target": "沙依巴克区"
|
||
},
|
||
{
|
||
"source": "天山区",
|
||
"target": "人口"
|
||
},
|
||
{
|
||
"source": "天山区",
|
||
"target": "占地面积"
|
||
}
|
||
]},
|
||
"xizang":{
|
||
"nodes": [{
|
||
"name": "西藏",
|
||
"category": "province",
|
||
"symbolSize": 40,
|
||
},
|
||
{
|
||
"name": "拉萨市",
|
||
"category": "city",
|
||
"symbolSize": 30,
|
||
},
|
||
{
|
||
"name": "日喀则市",
|
||
"category": "city",
|
||
"symbolSize": 30
|
||
},
|
||
|
||
{
|
||
"name": "昌都市",
|
||
"category": "city",
|
||
"symbolSize": 30,
|
||
},
|
||
{
|
||
"name": "林芝市",
|
||
"category": "city",
|
||
"symbolSize": 30
|
||
},
|
||
{
|
||
"name": "城关区",
|
||
"category": "area",
|
||
"symbolSize": 25
|
||
},
|
||
|
||
{
|
||
"name": "堆龙德庆区",
|
||
"category": "area",
|
||
"symbolSize": 25
|
||
},
|
||
{
|
||
"name": "达孜区",
|
||
"category": "area",
|
||
"symbolSize": 25,
|
||
},
|
||
{
|
||
"name": "人口",
|
||
"category": "attribute",
|
||
"symbolSize": 20,
|
||
},
|
||
{
|
||
"name": "占地面积",
|
||
"category": "attribute",
|
||
"symbolSize": 20,
|
||
}
|
||
|
||
],
|
||
"links": [{
|
||
"source": "西藏",
|
||
"target": "拉萨市"
|
||
},
|
||
{
|
||
"source": "西藏",
|
||
"target": "林芝市"
|
||
},
|
||
{
|
||
"source": "西藏",
|
||
"target": "日喀则市"
|
||
},
|
||
{
|
||
"source": "西藏",
|
||
"target": "昌都市"
|
||
},
|
||
{
|
||
"source": "拉萨市",
|
||
"target": "城关区"
|
||
},
|
||
{
|
||
"source": "拉萨市",
|
||
"target": "堆龙德庆区"
|
||
},
|
||
{
|
||
"source": "拉萨市",
|
||
"target": "达孜区"
|
||
},
|
||
{
|
||
"source": "达孜区",
|
||
"target": "人口"
|
||
},
|
||
{
|
||
"source": "达孜区",
|
||
"target": "占地面积"
|
||
}
|
||
]},
|
||
"qinghai":{
|
||
"nodes": [{
|
||
"name": "青海",
|
||
"category": "province",
|
||
"symbolSize": 40,
|
||
},
|
||
{
|
||
"name": "西宁市",
|
||
"category": "city",
|
||
"symbolSize": 30,
|
||
},
|
||
{
|
||
"name": "海东市",
|
||
"category": "city",
|
||
"symbolSize": 30
|
||
},
|
||
|
||
{
|
||
"name": "德令哈市",
|
||
"category": "city",
|
||
"symbolSize": 30,
|
||
},
|
||
{
|
||
"name": "格尔木市",
|
||
"category": "city",
|
||
"symbolSize": 30
|
||
},
|
||
{
|
||
"name": "城东区",
|
||
"category": "area",
|
||
"symbolSize": 25
|
||
},
|
||
|
||
{
|
||
"name": "城中区",
|
||
"category": "area",
|
||
"symbolSize": 25
|
||
},
|
||
{
|
||
"name": "城西区",
|
||
"category": "area",
|
||
"symbolSize": 25,
|
||
},
|
||
{
|
||
"name": "人口",
|
||
"category": "attribute",
|
||
"symbolSize": 20,
|
||
},
|
||
{
|
||
"name": "占地面积",
|
||
"category": "attribute",
|
||
"symbolSize": 20,
|
||
}
|
||
|
||
],
|
||
"links": [{
|
||
"source": "青海",
|
||
"target": "西宁市"
|
||
},
|
||
{
|
||
"source": "青海",
|
||
"target": "海东市"
|
||
},
|
||
{
|
||
"source": "青海",
|
||
"target": "德令哈市"
|
||
},
|
||
{
|
||
"source": "青海",
|
||
"target": "格尔木市"
|
||
},
|
||
{
|
||
"source": "西宁市",
|
||
"target": "城东区"
|
||
},
|
||
{
|
||
"source": "西宁市",
|
||
"target": "城中区"
|
||
},
|
||
{
|
||
"source": "西宁市",
|
||
"target": "城西区"
|
||
},
|
||
{
|
||
"source": "城西区",
|
||
"target": "人口"
|
||
},
|
||
{
|
||
"source": "城西区",
|
||
"target": "占地面积"
|
||
}
|
||
]},
|
||
"gansu":{
|
||
"nodes": [{
|
||
"name": "甘肃",
|
||
"category": "province",
|
||
"symbolSize": 40,
|
||
},
|
||
{
|
||
"name": "兰州市",
|
||
"category": "city",
|
||
"symbolSize": 30,
|
||
},
|
||
{
|
||
"name": "嘉峪关市",
|
||
"category": "city",
|
||
"symbolSize": 30
|
||
},
|
||
|
||
{
|
||
"name": "金昌市",
|
||
"category": "city",
|
||
"symbolSize": 30,
|
||
},
|
||
{
|
||
"name": "白银市",
|
||
"category": "city",
|
||
"symbolSize": 30
|
||
},
|
||
{
|
||
"name": "七里河区",
|
||
"category": "area",
|
||
"symbolSize": 25
|
||
},
|
||
|
||
{
|
||
"name": "安宁区",
|
||
"category": "area",
|
||
"symbolSize": 25
|
||
},
|
||
{
|
||
"name": "西固区",
|
||
"category": "area",
|
||
"symbolSize": 25,
|
||
},
|
||
{
|
||
"name": "人口",
|
||
"category": "attribute",
|
||
"symbolSize": 20,
|
||
},
|
||
{
|
||
"name": "占地面积",
|
||
"category": "attribute",
|
||
"symbolSize": 20,
|
||
}
|
||
|
||
],
|
||
"links": [{
|
||
"source": "甘肃",
|
||
"target": "兰州市"
|
||
},
|
||
{
|
||
"source": "甘肃",
|
||
"target": "嘉峪关市"
|
||
},
|
||
{
|
||
"source": "甘肃",
|
||
"target": "金昌市"
|
||
},
|
||
{
|
||
"source": "甘肃",
|
||
"target": "白银市"
|
||
},
|
||
{
|
||
"source": "兰州市",
|
||
"target": "七里河区"
|
||
},
|
||
{
|
||
"source": "兰州市",
|
||
"target": "安宁区"
|
||
},
|
||
{
|
||
"source": "兰州市",
|
||
"target": "西固区"
|
||
},
|
||
{
|
||
"source": "西固区",
|
||
"target": "人口"
|
||
},
|
||
{
|
||
"source": "西固区",
|
||
"target": "占地面积"
|
||
}
|
||
]}
|
||
};
|
||
|
||
const defaultCategory = "province";
|
||
const currentGraph = {
|
||
nodes: {},
|
||
links: {},
|
||
};
|
||
const nodeMap = {};
|
||
// 页面加载时，第一次初始化图，以及点击省份后更换数据
|
||
function init(name) {
|
||
// 根据定义的常量，产生currentGraph的默认数据
|
||
// 遍历全部nodes和links，产生node映射map
|
||
if (name === undefined){
|
||
graph = graphList.hunan
|
||
}
|
||
else {
|
||
currentGraph.nodes = {}
|
||
currentGraph.links = {}
|
||
if (name=='新疆') {
|
||
graph = graphList.xinjiang
|
||
}
|
||
else if (name=="西藏") {
|
||
graph = graphList.xizang
|
||
}
|
||
else if (name=="青海") {
|
||
graph = graphList.qinghai
|
||
}
|
||
else if (name=="青海") {
|
||
graph = graphList.qinghai
|
||
}
|
||
else if (name=="甘肃") {
|
||
graph = graphList.gansu
|
||
}
|
||
else {
|
||
graph = graphList.hunan
|
||
}
|
||
}
|
||
for (let i = 0; i < graph.nodes.length; i++) {
|
||
if (graph.nodes[i].category === defaultCategory) {
|
||
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 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重新画图
|
||
function redrawGraph() {
|
||
optionGraph.series[0].data = Object.values(currentGraph.nodes);
|
||
optionGraph.series[0].links = Object.values(currentGraph.links);
|
||
console.log(optionGraph);
|
||
myChartGraph.setOption(optionGraph);
|
||
}
|
||
|
||
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: 'province',
|
||
itemStyle: {
|
||
color: '#c23531'
|
||
},
|
||
|
||
},
|
||
{
|
||
name: 'area',
|
||
itemStyle: {
|
||
color: '#2f4554'
|
||
},
|
||
|
||
},
|
||
{
|
||
name: 'city',
|
||
itemStyle: {
|
||
color: '#61a0a8'
|
||
},
|
||
|
||
},
|
||
{
|
||
name: 'attribute',
|
||
itemStyle: {
|
||
color: '#999ea4'
|
||
},
|
||
|
||
|
||
}
|
||
],
|
||
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 {
|
||
append(node.name);
|
||
}
|
||
}
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html> |