Echarts map 中可视化遇到的一些问题

@ 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[i].indexs+'
');
          }
        }
         $("#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 的都应该知道怎么加了