美文网首页
Echarts map 中可视化遇到的一些问题

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

作者: 哈哈腾飞 | 来源:发表于2017-09-11 16:27 被阅读0次

@ 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 的都应该知道怎么加了

相关文章

网友评论

      本文标题:Echarts map 中可视化遇到的一些问题

      本文链接:https://www.haomeiwen.com/subject/jisfsxtx.html