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 class="fixed-left">
|
||||
<div class="video_img">
|
||||
<div class="div-video">
|
||||
<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">
|
||||
<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: 320px;height: 180px;" src="./image/西藏/1.jpg" />
|
||||
<img class="picture" style="width: 400px;height: 180px;" src="./image/西藏/1.jpg" />
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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 class="next_button"></div>
|
||||
<div class="prev_button"></div>
|
||||
|
|
@ -658,9 +658,13 @@
|
|||
]
|
||||
|
||||
// 设置 series 内容
|
||||
let redName = '上海';
|
||||
var series = [];
|
||||
[ ['北京', chinaDatas] ].forEach(function(item, i) {
|
||||
let redName = '西藏';
|
||||
|
||||
// 搜索时，高亮搜索结果（省份）
|
||||
function highLight(name) {
|
||||
redName = name
|
||||
var series = [];
|
||||
[ [redName, chinaDatas] ].forEach(function(item, i) {
|
||||
series.push(
|
||||
{
|
||||
type: 'effectScatter',
|
||||
|
|
@ -691,11 +695,11 @@
|
|||
show: false,
|
||||
// color: '#f00'
|
||||
color: function(params) { //圆环显示文字
|
||||
if (params.data.dataItem[0].name == redName) {
|
||||
return '#2bd291'
|
||||
} else {
|
||||
// if (params.data.dataItem[0].name == redName) {
|
||||
// return '#2bd291'
|
||||
// } else {
|
||||
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',
|
||||
geoIndex: 0
|
||||
|
|
@ -1172,7 +1370,10 @@
|
|||
loadVideo(city)
|
||||
});
|
||||
|
||||
myChart.setOption(option);
|
||||
function refresh(option){
|
||||
myChart.setOption(option);
|
||||
}
|
||||
refresh(option)
|
||||
|
||||
function fillInfo(result, name) {
|
||||
// graphList = {"keyword":{
|
||||
|
|
@ -1538,9 +1739,12 @@
|
|||
// 根据省份查找
|
||||
function searchProvince (value) {
|
||||
console.log('查找的省份:', value);
|
||||
highLight(value)
|
||||
|
||||
}
|
||||
$('.search_icon').on('click', function () {
|
||||
var $val = $(this).val();
|
||||
var $val = $(".search_input").val();
|
||||
// alert($val)
|
||||
searchProvince($val)
|
||||
});
|
||||
$('.search_input').on('keydown', function (e) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue