关于echarts的地图的渲染,根据一个值去判断地图上的点是否该报警!
关于echarts的地图的渲染,根据一个值去判断地图上的点是否该报警!
$(function(){
function productNum(){
var mapchart = echarts.init(document.getElementById('productNum'));
/* var mapchart = document.getElementById('productNum');
var mapchartContainer = function () {
mapchart.style.width = window.innerWidth+'px';
mapchart.style.height = window.innerHeight+'px';
};
mapchartContainer();
var mapchart= echarts.init(mapchart);*/
var mydata = [
{name: '安阳县', value: [114.130207,36.16584,10]},
{name: '铁西区', value: [114.263553,36.05989,-12]},
{name: '北关区', value: [114.365742,36.13766,12]},
{name: '文峰东', value: [114.413082,36.040468,13]},
{name: '文峰西', value: [114.360002,36.073046,0]},
{name: '汤阴县', value: [114.357763,35.924514,10]},
{name: '内黄县', value: [114.801452,35.971704,18]},
{name: '滑县', value:[114.719311,35.475417,8]},
];
function newmyData(mydata){
var length=mydata.length;
var newarr=new Array;
for (var i = 0; i < length; i++) {
if (mydata[i].value[2]<0) {
newarr.push(mydata[i])
}
}
return newarr;
}
var array=newmyData(mydata);
var option = {
title: {
text: '中移铁通安阳市',
sublink: '安阳市.html',
left: 'center',
textStyle: {
fontSize: 55,
fontWeight: 'bolder',
color: '#DC143C'
}
},
geo:{
map:'anyang'
},
backgroundColor: '#404a59',
series: [
{
name: '维护区', // series名称
type: 'scatter', // series图表类型
coordinateSystem: 'geo', // series坐标系类型
data:mydata,
symbolSize: 20,
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#000000'
},
},
},
{
name: 'alarm',
type: 'effectScatter',
coordinateSystem: 'geo',
data:newmyData(mydata),
symbolSize: 20,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: false,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#DC143C',
shadowBlur: 10,
shadowColor: '#DC143C'
}
},
zlevel: 1
}
]
};
mapchart.setOption(option);
/*window.onresize = function () {
mapchartContainer();
mapchart.resize();
};*/
mapchart.on('click',function (item){
console.log(item)
if (item.name === '林州市') {
window.location = '林州市.html';
console.log(item.name)
}
if (item.name === '安阳县') {
window.location = '安阳县.html';
console.log(item.name)
}
if (item.name === '殷都区') {
window.location = '殷都区.html';
console.log(item.name)
}
if (item.name === '北关区') {
window.location = '北关区.html';
console.log(item.name)
}
if (item.name === '文峰东') {
window.location = '文峰东.html';
console.log(item.name)
}
if (item.name === '文峰西') {
window.location = '文峰西.html';
console.log(item.name)
}
if (item.name === '铁西区') {
window.location = '铁西区.html';
console.log(item.name)
}
if (item.name === '汤阴县') {
window.location = '汤阴县.html';
console.log(item.name)
}
if (item.name === '内黄县') {
window.location = '内黄县.html';
console.log(item.name)
}
if (item.name === '滑县') {
window.location = '滑县.html';
console.log(item.name)
}
})
};
productNum();
});
效果图