forked from p51497208/geo_info_platform
Merge branch 'master' of http://git.trustie.net/qiubing/geo_info_platform
merge
This commit is contained in:
commit
6079c657d3
236
demo.html
236
demo.html
|
|
@ -112,28 +112,28 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="fixed-left">
|
<div class="fixed-left">
|
||||||
<div class="video_img">
|
<div class="video_img">
|
||||||
<div class="div-video">
|
<div class="div-video" style="background: #1D346F;">
|
||||||
<video width="100%" height="100%" controls>
|
<video width="100%" height="100%" controls>
|
||||||
<source class="video" src="./image/西藏/1.mp4" type="video/mp4">
|
<source class="video" src="./image/西藏/1.mp4" type="video/mp4">
|
||||||
<source src="movie.ogg" type="video/ogg">
|
<source src="movie.ogg" type="video/ogg" style="width: 400px;">
|
||||||
Your browser does not support the video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
<div class="slider slider_one_big_picture">
|
<div class="slider slider_one_big_picture">
|
||||||
<div>
|
<div>
|
||||||
<img class="picture" style="width: 320px;height: 180px;" src="./image/西藏/1.jpg" />
|
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/1.jpg" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img class="picture" style="width: 320px;height: 180px;" src="./image/西藏/2.jpg" />
|
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/2.jpg" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img class="picture" style="width: 320px;height: 180px;" src="./image/西藏/3.jpg" />
|
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/3.jpg" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img class="picture" style="width: 320px;height: 180px;" src="./image/西藏/4.jpg" />
|
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/4.jpg" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img class="picture" style="width: 320px;height: 180px;" src="./image/西藏/5.jpg" />
|
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/5.jpg" />
|
||||||
</div>
|
</div>
|
||||||
<div class="next_button"></div>
|
<div class="next_button"></div>
|
||||||
<div class="prev_button"></div>
|
<div class="prev_button"></div>
|
||||||
|
|
@ -658,9 +658,13 @@
|
||||||
]
|
]
|
||||||
|
|
||||||
// 设置 series 内容
|
// 设置 series 内容
|
||||||
let redName = '上海';
|
let redName = '西藏';
|
||||||
var series = [];
|
|
||||||
[ ['北京', chinaDatas] ].forEach(function(item, i) {
|
// 搜索时，高亮搜索结果（省份）
|
||||||
|
function highLight(name) {
|
||||||
|
redName = name
|
||||||
|
var series = [];
|
||||||
|
[ [redName, chinaDatas] ].forEach(function(item, i) {
|
||||||
series.push(
|
series.push(
|
||||||
{
|
{
|
||||||
type: 'effectScatter',
|
type: 'effectScatter',
|
||||||
|
|
@ -691,11 +695,11 @@
|
||||||
show: false,
|
show: false,
|
||||||
// color: '#f00'
|
// color: '#f00'
|
||||||
color: function(params) { //圆环显示文字
|
color: function(params) { //圆环显示文字
|
||||||
if (params.data.dataItem[0].name == redName) {
|
// if (params.data.dataItem[0].name == redName) {
|
||||||
return '#2bd291'
|
// return '#2bd291'
|
||||||
} else {
|
// } else {
|
||||||
return '#70c4eb'
|
return '#70c4eb'
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -742,6 +746,200 @@
|
||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
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
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
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',
|
type: 'map',
|
||||||
geoIndex: 0
|
geoIndex: 0
|
||||||
|
|
@ -1172,7 +1370,10 @@
|
||||||
loadVideo(city)
|
loadVideo(city)
|
||||||
});
|
});
|
||||||
|
|
||||||
myChart.setOption(option);
|
function refresh(option){
|
||||||
|
myChart.setOption(option);
|
||||||
|
}
|
||||||
|
refresh(option)
|
||||||
|
|
||||||
function fillInfo(result, name) {
|
function fillInfo(result, name) {
|
||||||
// graphList = {"keyword":{
|
// graphList = {"keyword":{
|
||||||
|
|
@ -1538,9 +1739,12 @@
|
||||||
// 根据省份查找
|
// 根据省份查找
|
||||||
function searchProvince (value) {
|
function searchProvince (value) {
|
||||||
console.log('查找的省份:', value);
|
console.log('查找的省份:', value);
|
||||||
|
highLight(value)
|
||||||
|
|
||||||
}
|
}
|
||||||
$('.search_icon').on('click', function () {
|
$('.search_icon').on('click', function () {
|
||||||
var $val = $(this).val();
|
var $val = $(".search_input").val();
|
||||||
|
// alert($val)
|
||||||
searchProvince($val)
|
searchProvince($val)
|
||||||
});
|
});
|
||||||
$('.search_input').on('keydown', function (e) {
|
$('.search_input').on('keydown', function (e) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue