echart中国地图实现记录(基于Angular.js开发)

echart中国地图

实现效果如图所示：

代码示例（option部分）：

分为 title(标题) ， tooltip（悬浮框），legend（小图标），geo（地图），service（数据处理）部分，相关功能参考Echarts官网配置项手册

 this.option = {
        color:['#FFFFFF','#FF8188','#FACA00'],
        backgroundColor: '#164C50',
        title: {
             text: '全国模具销售情况',
             left: 'center',
             textStyle: {
                color: '#fff'
            }
         },
        tooltip: {
            trigger: 'item',
            textStyle:{
               align:'left',
},
            backgroundColor: "rgba(27, 29, 31, 1)",
            formatter: function(params) {
            var tipHtml='';
            if(params.seriesType=="effectScatter"){
            if(params.seriesName=="位置异常"){
            tipHtml='<div style="width:120px;height:60px;">'
              +'<div style="padding-left:5%;width:100%;height:30px;line-height:25px;border-bottom:2px solid rgba(48, 73, 77, 1);">'
              +'<span style="width:100%;color:#fff;font-size:10px;">'+params.name+'</span>'+'</div>'
              +'<div style="height:25px;line-height:30px">'+'<i style="display:inline-block;width:8px;height:8px;background:#FF818880;border-radius:40px;margin-right:20px;">'+'</i>'+'<span style="font-size:10px;margin-left:-15px;">'+'位置异常'+'</span>'+'<span  style="font-size:10px;margin-left:25px;">'+params.data.modelData+'</span>'+'</div>'
              +'</div>'+'</div>';
            };
            if(params.seriesName=="物联总数"){
              tipHtml='<div style="width:120px;height:60px;">'
              +'<div style="padding-left:5% ;width:100%;height:30px;line-height:25px;border-bottom:2px solid rgba(48, 73, 77, 1);">'
              +'<span style="width:100%;color:#fff;font-size:10px;">'+params.name+'</span>'+'</div>'
              +'<div style="height:25px;line-height:30px">'+'<i style="display:inline-block;width:8px;height:8px;background:#FFFFFF;border-radius:40px;margin-right:20px;">'+'</i>'+'<span style="font-size:10px;margin-left:-15px;">'+'物联总数'+'</span>'+'<span  style="font-size:10px;margin-left:25px;">'+params.data.modelData+'</span>'+'</div>'
              +'</div>'+'</div>';
            };
            if(params.seriesName=="闲置"){
              tipHtml='<div style="width:120px;height:60px;">'
              +'<div style="padding-left:5%;width:100%;height:30px;line-height:25px;border-bottom:2px solid rgba(48, 73, 77, 1);">'
              +'<span style="width:100%;color:#fff;font-size:10px;">'+params.name+'</span>'+'</div>'
              +'<div style="height:25px;line-height:30px">'+'<i style="display:inline-block;width:8px;height:8px;background:#FACA00;border-radius:40px;margin-right:20px;">'+'</i>'+'<span style="font-size:10px;margin-left:-15px;">'+'闲置'+'</span>'+'<span  style="font-size:10px;margin-left:50px;">'+params.data.modelData+'</span>'+'</div>'
              +'</div>'+'</div>';
            };
             }
              return tipHtml;

            }
        },
        legend: {
            orient: 'horizontal',
            left: 10,
            top: 18,
            data: [
              {
              name:'物联总数',
             },
              {
                name:'位置异常',
               },
              {
                name:'閑置',
            }],
            textStyle: {
                color: '#ffffff'
            },
            itemHeight: 8,
            itemWidth: 12,
          },
         geo: {
            show:true,
            map: 'china',
            roam:true,//是否允许缩放scale和拖拽
            label: {
                emphasis: {
                    show: false
                }
            },
            top: '20',   //固定地圖位置
            left: 'left',
            right: '45',
            bottom:'10',
            zoom: 1, //默认显示级别
            scaleLimit: {
              min: 0,
              max: 3
            }, //缩放级别
            itemStyle: {
                normal: {
                    areaColor: 'rgba(43, 163, 163, 1)',//地圖顔色
                    borderColor: 'rgba(68, 186, 196, 1)'//地圖邊框
                },
                emphasis: {
                    areaColor: 'rgba(16, 136, 136, 1)'//鼠標移入顯示顔色
                }
            }
        },
        series: [
          {
                type: 'map',
                map:'China',
                geoIndex: 0,
                aspectScale: 0.75,
                symbolSize: 12,
                showLegendSymbol: false, //存在legend時顯示

                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    emphasis: {
                        borderColor: '#fff',
                        borderWidth: 1,
                        "areaColor":'#0F6A6A' ,
                    },
                    color :'transparent'
                },

            },
           //三个模块
           {
           name:'物联总数',
           type:'effectScatter',
           coordinateSystem:'geo',
           data:[],
           Symbol:'circle',
      
        label:{
          normal:{
            show:false,
            position:'right',
            color:'#fff',
            fontSize:'6'
          },
          emphasis:{
            show:false
          }
        },
        itemStyle:{
          narmol:{
            color: '#4bbbb2',
                    borderWidth: 2,
                    borderColor: '#b4dccd'
          }
        }

          },
          {
            name:'位置异常',
            type:'effectScatter',
            coordinateSystem:'geo',
            data:[],
            Symbol:'circle',
            effect: {
              show: true,
              period: 4,
              trailLength: 0.02,
              symbol: 'circle',
              symbolSize: 4,
              color: '#fff'
          },
         label:{
           normal:{
             show:false,
             position:'right',
             color:'#fff',
             fontSize:'6'
           },
           emphasis:{
             show:false
           }
         },
         itemStyle:{
           narmol:{
             color: '#FF8188',
                     borderWidth: 2,
                     borderColor: '#b4dccd'
           }
         }

           },
           {
            name:'閑置',
            type:'effectScatter',
            coordinateSystem:'geo',
            data:[],
            Symbol:'circle',

         label:{
           normal:{
             show:false,
             position:'right',
             color:'#fff',
             fontSize:'6'
           },
           emphasis:{
             show:false
           }
         },
         itemStyle:{
           narmol:{
             color: '#4bbbb2',
                     borderWidth: 2,
                     borderColor: '#b4dccd'
           }
         }

 }
 ],
        // dataset: {source: mapdata}
    }

注释：前提还需导入中国地图数据

代码演示（将echart导入相关模块）：

 this.http.get('assets/map/china.json')
    .subscribe(geoJson => {
      echarts.registerMap('china', geoJson);
      this.options = this.chart.option;
    });
  }