echars 创建中国气泡地图和定位图表点

 

 	function chinaMap() {
  		// 1、初始化echarts示例map
            var map = echarts.init(document.getElementById('fans_map')); 
			//（2）粉丝位置引入data数据
            var data = [
                {name: '海门', value: 500},
                {name: '鄂尔多斯', value: 18},
                {name: '招远', value: 2500},
                {name: '舟山', value: 1200},
                {name: '齐齐哈尔', value: 3200},
                {name: '赤峰', value: 20},
                {name: '青岛', value: 30},
                {name: '乳山', value: 40}
            ]
            
            // 单个标点数据
            var data2 = [
               {name: '盐城', value: 20000,}
            ]


            $.get('js/echarts/china.json',function(chinaJson){
                echarts.registerMap('china', chinaJson); // 注册地图
                
                //（3）引入城市坐标
                var geoCoordMap = {
                    '海门':[121.15,31.89],
                    '鄂尔多斯':[109.781327,39.608266],
                    '招远':[120.38,37.35],
                    '舟山':[122.207216,29.985295],
                    '齐齐哈尔':[123.97,47.33],
                    '盐城':[120.13,33.38],
                    '赤峰':[118.87,42.28],
                    '青岛':[120.33,36.07],
                    '乳山':[121.52,36.89]
                }
                
                //（4）将数据和城市坐标对应上
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };
            	var max=200;

            	// 动态设置气泡大小
            	data.forEach(function (itemOpt) {
                    if (itemOpt.value > max) {
                        max = itemOpt.value;
                    }
                    // if (itemOpt.value < min) {
                    //     min = itemOpt.value;
                    // }
                }); 
                var option = {
                    geo: {
                        type: 'map',
                        map: 'china',
                        itemStyle: {
                            normal: {
                                areaColor: '#efefef',//区域块默认颜色
                                borderColor: '#fff'//区域边框颜色
                            },
                            emphasis: {
                                areaColor: '#cccccc'// 鼠标经过区域
                            }
                        }
                    },
                     // 气泡大小
                    visualMap: {
                        show: false,
                        min: 0,
                        max: max,
                        inRange: {
                            symbolSize: [6, 40]
                        }
                    },
                    
                      //（1）series 的类型为散点图 scatter
                    series: [
                        {
                            name: 'pm2.5',            // series名称
                            type: 'scatter',          // series图表类型
                            coordinateSystem: 'geo',  // series坐标系类型
                            data: convertData(data),  // series数据内容
                            //控制显示文本
                            label: {
                                normal: {
                                    show: false,
                                    // formatter: function (val) {
                                    //             var area_content = '{a|' + val.data.code + '}' + '\n' + '{b|' + val.value[3] + '}';
                                    //             return area_content;
                                    //         },//让series 中的文字进行换行
                                            // rich: {
                                            //     a: {
                                            //         color: '#4801FF',//气泡上字体颜色
                                            //         fontWeight: 600,
                                            //     },
                                            //     b: {
                                            //         color: '#4801FF',//气泡上字体颜色
                                            //         fontFamily: 'Microsoft YaHei',
                                            //         fontSize: 14,

                                            //     }
                                            // },//富文本样式,就是上面的formatter中'{a|'和'{b|'
                                },
                                emphasis: {
                                    show: true
                                },

                            },
                            //series样式
                            itemStyle: {
                                normal: {
                                    color: '#8e7bff'
                                }
                            }
                        },
                        {
				            name: '点',
				            type: 'scatter',
				            coordinateSystem: 'geo',
				            symbol: 'pin',
				            symbolSize: 25,
				            label: {
				                normal: {
				                    show: true,
				                    position:'right',
				                    textStyle: {
				                        color: '#fff',
				                        fontSize: 14,
				                    },
				                    // color: itemOpt.color,
                                    formatter: function (val) { 
                                        var area_content = '{a|'+ val.name + '}';
                                        return area_content;
                                    },//让series 中的文字进行换行
                                    rich: {
                                        a: {
                                            color: '#000',//气泡上字体颜色
                                            fontWeight: 600,
                                        },
                                        b: {
                                            color: '#4801FF',//气泡上字体颜色
                                            fontFamily: 'Microsoft YaHei',
                                            fontSize: 14,

                                        }
                                    },//
				                }
				            },
				            itemStyle: {
				                normal: {
				                    color: '#a11edd', //标志颜色
				                }
				            },
				            zlevel: 6,
				            data: convertData(data2)
				        }
                    ]
                };
                map.setOption(option);
            })
             
    }
    chinaMap()