//stroke(涟漪)和fill(扩散)，两种效果，现在用的涟漪 var data = [ { name: "北京海关", value: 262, //扩散的大小 }, { name: "天津海关", value: 363, }, { name: "石家庄海关", value: 136, }, { name: "太原海关", value: 19, }, { name: "满洲里海关", value: 14, }, { name: "呼和浩特海关", value: 14, }, { name: "沈阳海关", value: 27, }, { name: "大连海关", value: 118, }, { name: "长春海关", value: 19, }, { name: "哈尔滨海关", value: 23, }, { name: "上海海关", value: 541, }, { name: "南京海关", value: 558, }, { name: "杭州海关", value: 198, }, { name: "宁波海关", value: 120, }, { name: "合肥海关", value: 89, }, { name: "福州海关", value: 60, }, { name: "厦门海关", value: 129, }, { name: "南昌海关", value: 73, }, { name: "青岛海关", value: 370, }, { name: "济南海关", value: 116, }, { name: "郑州海关", value: 98, }, { name: "武汉海关", value: 142, }, { name: "长沙海关", value: 102, }, { name: "广州海关", value: 896, }, { name: "黄埔海关", value: 260, }, { name: "深圳海关", value: 470, }, { name: "拱北海关", value: 148, }, { name: "汕头海关", value: 64, }, { name: "海口海关", value: 60, }, { name: "湛江海关", value: 28, }, { name: "江门海关", value: 55, }, { name: "南宁海关", value: 43, }, { name: "成都海关", value: 57, }, { name: "重庆海关", value: 95, }, { name: "贵阳海关", value: 9, }, { name: "昆明海关", value: 16, }, { name: "拉萨海关", value: 2, }, { name: "西安海关", value: 47, }, { name: "乌鲁木齐海关", value: 36, }, { name: "兰州海关", value: 8, }, { name: "银川海关", value: 11, }, { name: "西宁海关", value: 6, }, ]; var geoCoordMap = { 北京海关: [116.395645, 39.92998], 天津海关: [117.714462, 39.035356], 石家庄海关: [114.459404, 38.066849], 太原海关: [112.567123, 37.813332], 满洲里海关: [117.508678, 49.589227], 呼和浩特海关: [111.779398, 40.839088], 沈阳海关: [123.877493, 41.866742], 大连海关: [121.678641, 38.930016], 长春海关: [125.379398, 43.857352], 哈尔滨海关: [126.695112, 45.760067], 上海海关: [121.487884, 31.2491], 南京海关: [118.792395, 32.031865], 杭州海关: [120.142461, 30.276618], 宁波海关: [121.54369, 29.877864], 合肥海关: [117.217233, 31.784644], 福州海关: [119.420493, 26.020911], 厦门海关: [118.08023, 24.4705], 南昌海关: [115.880635, 28.672772], 青岛海关: [120.318457, 36.063454], 济南海关: [117.00969, 36.609023], 郑州海关: [113.720268, 34.767613], 武汉海关: [114.211012, 30.642958], 长沙海关: [113.023799, 28.183855], 广州海关: [113.344195, 23.134994], 黄埔海关: [113.542752, 23.072283], 深圳海关: [114.238077, 22.724789], 拱北海关: [113.56396, 22.223995], 汕头海关: [116.747616, 23.383540], 海口海关: [110.208098, 20.048893], 湛江海关: [110.398966, 21.238776], 江门海关: [113.122991, 22.61004], 南宁海关: [108.398911, 22.812958], 成都海关: [104.075527, 30.599714], 重庆海关: [106.506329, 29.603727], 贵阳海关: [106.719473, 26.576893], 昆明海关: [102.725507, 25.051814], 拉萨海关: [91.088742, 29.665238], 西安海关: [108.89728, 34.230948], 乌鲁木齐海关: [87.619936, 43.83689], 兰州海关: [103.715076, 36.098938], 银川海关: [106.254166, 38.482704], 西宁海关: [101.832443, 36.59972], } 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) }); } } console.log(res) return res; }; option = { backgroundColor: '#404a59', tooltip: { show: true, enterable: true, //鼠标可进入浮层内 // triggerOn: "click", // 点击触发 backgroundColor: 'transparent', borderColor: 'transparent', // 修改字体颜色 extraCssText: 'box-shadow: none', padding: 10, formatter: function (params) { // 租金总数租户数出租率收缴率 // 20,000 20,000 68% 78% let res = `

资产数 12665

租金总数 20,000

租户数 20,000

出租率 68%

收缴率 78%

` return res }, }, series: [{ type: 'effectScatter', coordinateSystem: 'geo', data: convertData(data.sort(function (a, b) { return b.value - a.value; })), symbolSize: 10, showEffectOn: 'render', zlevel: 2, rippleEffect: { period: 2.5, //波纹秒数 brushType: 'fill', //stroke(涟漪)和fill(扩散)，两种效果 scale: 2 //波纹范围 }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'top', show: true } }, itemStyle: { normal: { show: true, color: function (params) { console.log(params) let color = '' if (params.data.value[2] < 100) { color = 'red' } else if (params.data.value[2] >= 100 && params.data.value[2] < 500) { color = 'green' } else if (params.data.value[2] > 500) { color = 'blue' } return color; }, //字体和点颜色 label: { textStyle: { fontWeight: 'bold', //字体 fontSize: 8, //字体大小 color: function (params) { console.log(params) let color = '' if (params.data.value[2] < 100) { color = 'red' } else if (params.data.value[2] >= 100 && params.data.value[2] < 500) { color = 'green' } else if (params.data.value[2] > 500) { color = 'blue' } return color; }, //字体和点颜色 } }, } }, }], geo: { map: 'china', label: { emphasis: { show: false } }, roam: true, layoutCenter: ['50%', '50%'], layoutSize: "130%", itemStyle: { normal: { color: '#51FFFF', borderColor: '#0285FF' }, emphasis: { color: '#004881' } } } };

世界地图