@ echarts map的设置热力图
注：上面要用提示框，如：拥堵指数用地图，需要两层地图的叠加，第一层是热力图，上面一层是普通的map 代码如下：
option = {
title: {
text: '本市各辖区拥堵延迟指数',
x:'center',
textStyle: {
color: "#2c83e0",
fontSize: 13,
fontFamily: 'Microsoft YaHei'
},
},
tooltip: {
show: false,
trigger: 'item',
textStyle:{
fontFamily: 'Microsoft YaHei'
}
},
visualMap: {
type: 'continuous',
min: 0,
max: 5,
text: ['严重拥堵','畅通'],
// inRange: {
// color: ['#d94e5d','#eac736','#50a3ba'].reverse()
// },
textStyle: {
color: '#fff'
},
itemWidth: 11,
itemHeight: 117,
realtime: false,
// calculable: true,
color: ['#fe150b','#ffee01','#35ff00']
},
geo: [
{
map: '菏泽',
label: {
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#0b0c45',
borderColor: '#2b6cbe',
borderWidth:3,
shadowColor: 'rgba(45,110,192,2)',
shadowBlur: 40
},
emphasis: {
areaColor: '#0b0c45'
}
}
},
{
map: '菏泽',
label: {
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#0b0c45',
borderColor: '#2b6cbe',
borderWidth:1,
// shadowColor: 'rgba(45,110,192,2)',
// shadowBlur: 30,
},
emphasis: {
areaColor: '#0b0c45'
}
}
}
],
series: [
{
name: '菏泽',
type: 'heatmap',
textStyle: {
color: 'white',
fontFamily: 'Microsoft YaHei'
},
zlevel: 1,
coordinateSystem: 'geo',
data: convertData([
{name: "牡丹区", value: 2.8},
{name: "鄄城县", value: 2.1},
{name: "曹县", value: 1.4},
{name: "定陶区", value: 2.6},
{name: "单县", value: 3.5},
{name: "郓城县", value: 4},
{name: "巨野县", value: 2.6},
{name: "东明县", value: 4.5},
{name: "成武县", value: 1.6}
])
},
{
name:'机动车总量分布图',
type:'map',
map:'菏泽',
zlevel: 3,
label: {
normal:{
show: false
},
emphasis:{
show: true,
}
},
itemStyle: {
normal:{
areaColor: 'transparent',
borderColor: 'transparent'
},
emphasis:{
areaColor: '#00a2ff',
borderColor: 'red',
}
},
mapLocation:{
y:60
},
data:[
]
}
],
};
chart.setOption(option);
因为是两个地图叠加的效果，所以需要重新发送请求，把拥堵指数取到显示到页面，代码如下
chart.on('mouseover',function(params){
$.get("json/tongxingye.json",function(data){
for(var i=0;i<data.yczspm.length;i++) {
// console.log(data.yczspm[0]);
if(data.yczspm[i].name == params.name){
$("#motaikuang").html(params.name+'当前拥堵指数<br/><div style="font-size:33px; color: yellow;padding-left: 30%">'+data.yczspm[i].indexs+'</div>');
}
}
$("#motaikuang").show().css({
background:"grey",
borderRadius: '8px',
color: 'white'
})
})
})
chart.on('mouseout',function(params){
// console.log(params.name)
// alert(params.name+params.value);
$("#motaikuang").hide()
$("#motaikuang").html("")
})
上述总结了echarts 地图叠加的且不影响提示框的效果,提示框部分还需要设置定位,根据自己的添加的标签来写：
#motaikuang{
position: absolute;
height: 50px;
top: 50%;
left: 50%;
z-index: 100;
line-height: 25px;
width: 17%;
padding: 1% 1%;
opacity: 0.8;
}
@ echarts map某个市或者省，不让显示辖区命的操作
代码如下：
chart.setOption(option);
chart.on("mouseover", function (params){
chart.dispatchAction({
type: 'downplay'
});
});
上述代码的绑定事件，凡是有接触过echarts 的都应该知道怎么加了
网友评论