中国地图、散点图结合点击后显示当前城市数量 不显示经纬度坐标
1 echarts.appMap = function (id, opt) { 2 // 实例 3 var chart = this.init(document.getElementById(id)); 4 // var curGeoJson = {}; 5 var cityMap = { 6 "河南": "henan", 7 "河北": "hebei", 8 '北京': 'beijing', 9 '天津': 'tianjin', 10 '山西': 'sx', 11 '内蒙古': 'neimenggu', 12 '辽宁': 'liaoning', 13 '吉林': 'jilin', 14 '黑龙江': 'heilongjiang', 15 '上海': 'shanghai', 16 '江苏': 'jiangsu', 17 '浙江': 'zhejiang', 18 '安徽': 'anhui', 19 '福建': 'fujian', 20 '江西': 'jiangxi', 21 '山东': 'shandong', 22 '湖北': 'hubei', 23 '湖南': 'hunan', 24 '广东': 'guangdong', 25 '广西': 'guangxi', 26 '海南': 'hainan', 27 '重庆': 'chongqing', 28 '四川': 'sichuan', 29 '贵州': 'guizhou', 30 '云南': 'yunnan', 31 '西藏': 'xizang', 32 '陕西': 'shanxi', 33 '甘肃': 'gansu', 34 '青海': 'qinghai', 35 '宁夏': 'ningxia', 36 '新疆': 'xinjiang', 37 '香港': 'hongkong', 38 '澳门': 'macau', 39 '台湾': 'taiwan' 40 }; 41 42 var treeMap = { 43 "河南": 410000, 44 "河北": 130000, 45 '北京': 110000, 46 '天津': 120000, 47 '山西': 140000, 48 '内蒙古': 150000, 49 '辽宁': 210000, 50 '吉林': 220000, 51 '黑龙江': 230000, 52 '上海': 310000, 53 '江苏': 320000, 54 '浙江': 330000, 55 '安徽': 340000, 56 '福建': 350000, 57 '江西': 360000, 58 '山东': 370000, 59 '湖北': 420000, 60 '湖南': 430000, 61 '广东': 440000, 62 '广西': 450000, 63 '海南': 460000, 64 '重庆': 500000, 65 '四川': 510000, 66 '贵州': 520000, 67 '云南': 530000, 68 '西藏': 540000, 69 '陕西': 610000, 70 '甘肃': 620000, 71 '青海': 630000, 72 '宁夏': 640000, 73 '新疆': 650000, 74 '香港': 810000, 75 '澳门': 820000, 76 '台湾': 710000 77 }; 78 var geoCoordMap = { 79 '河南': [113.65, 34.76], 80 '河北': [114.52, 38.05], 81 '北京': [116.4, 39.9], 82 '天津': [117.2, 39.12], 83 '山西': [112.55, 37.87], 84 '内蒙古': [111.73, 40.83], 85 '辽宁': [123.43, 41.8], 86 '吉林': [125.32, 43.9], 87 '黑龙江': [126.53, 45.8], 88 '上海': [121.47, 31.23], 89 '江苏': [118.78, 32.07], 90 '浙江': [120.15, 30.28], 91 '安徽': [117.25, 31.83], 92 '福建': [119.3, 26.08], 93 '江西': [115.85, 28.68], 94 '山东': [116.98, 36.67], 95 '湖北': [114.3, 30.6], 96 '湖南': [112.93, 28.23], 97 '广东': [113.27, 23.13], 98 '广西': [108.37, 22.82], 99 '海南': [110.32, 20.03], 100 '重庆': [106.55, 29.57], 101 '四川': [104.07, 30.67], 102 '贵州': [106.63, 26.65], 103 '云南': [102.72, 25.05], 104 '西藏': [91.13, 29.65], 105 '陕西': [108.93, 34.27], 106 '甘肃': [103.82, 36.07], 107 '青海': [101.78, 36.62], 108 '宁夏': [106.28, 38.47], 109 '新疆': [87.62, 43.82], 110 '香港': [114.08, 22.2], 111 '澳门': [113.33, 22.13], 112 '台湾': [121.520, 25.03] 113 }; 114 //level的三种水平 按等级给定每个等级颜色 115 // var levelColorMap = { 116 // '1': 'rgba(0,255,255)',//蓝 117 // '2': 'rgba(0,255,127)',//黄色 118 // '3': 'rgba(255,0,255)'//红色 119 120 // }; 121 122 var defaultOpt = { 123 mapName: 'china', // 地图展示 124 goDown: false, // 是否下钻 125 bgColor: '#404a59', // 画布背景色 126 activeArea: [], // 区域高亮,同echarts配置项 127 data: [], 128 // 下钻回调(点击的地图名、实例对象option、实例对象) 129 callback: function (cc, option, instance) {} 130 }; 131 132 // var ProvinceNames = []; //类别数组（实际用来盛放X轴坐标值） 133 var TowerNumbers = []; //销量数组（实际用来盛放Y坐标值） 134 var provinceData = []; 135 var valMap = new Map(); 136 //var sum =0; 137 /*获取地图数据*/ 138 $.ajax({ 139 url: "../sdTree/showChildCountByTreeId.do", 140 type: "post", 141 dataType: "json", 142 data: { 143 id: 86 144 }, 145 success: function (data) { 146 //请求成功时执行该函数内容，result即为服务器返回的json对象 147 if (data) { 148 provinceData = []; 149 avg = 1; 150 sum = 0; 151 // var sum = 0; 152 var count = data.length; 153 for (var i = 0; i < data.length; i++) { 154 provinceData.push({ 155 name: data[i].ProvinceName, 156 value: data[i].TowerNumber, 157 }) 158 //sum+=data[i].TowerNumber; 159 valMap.set(data[i].TowerNumber, i); 160 // ProvinceNames.push(data[i].ProvinceName); //挨个取出类别并填入类别数组 161 TowerNumbers.push(data[i].TowerNumber); //挨个取出销量并填入销量数组 162 163 sum += data[i].TowerNumber; 164 // console.log(sum) 165 } 166 167 //console.log(ProvinceNames) 168 myChart.setOption({ //加载数据图表 169 title: { 170 text: '各省市接地项目分布', 171 subtext: '', 172 x: 'center', 173 textStyle: { 174 color: '#000' 175 } 176 }, 177 tooltip: { 178 trigger: 'item', 179 // formatter: '{b}'+'{c}', 180 trigger: 'item', 181 formatter: function (params) { 182 //判断是否有数量，若无数量，点击后只显示城市名 183 if (typeof (params.value)[2] == "undefined") { 184 return params.name 185 } 186 //有数量时，显示城市和当前城市所做项目数 187 else { 188 return params.name + ':' + params.value[2] //params.value[2] 取出value值中的第三个值 前两个值是经纬度，第三个值是数量 189 } 190 } 191 }, 192 legend: { 193 orient: 'vertical', 194 y: 'bottom', 195 x: 'right', 196 data: ['sell_area'], 197 textStyle: { 198 color: '#fff' 199 } 200 }, 201 visualMap: { 202 show: false, 203 min: 0, 204 max: 500, 205 left: 'left', 206 top: 'bottom', 207 text: ['高', '低'], // 文本，默认为数值文本 208 calculable: true, 209 seriesIndex: [1], 210 inRange: { 211 // color: ['#3B5077', '#031525'] // 蓝黑 212 // color: ['#ffc0cb', '#800080'] // 红紫 213 // color: ['#3C3B3F', '#605C3C'] // 黑绿 214 //color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑 215 // color: ['#23074d', '#cc5333'] // 紫红 216 color: ['#339966'] // 蓝绿 217 } 218 }, 219 /**/ 220 geo: { 221 show: true, 222 map: opt.mapName, 223 label: { 224 normal: { 225 show: false 226 }, 227 emphasis: { 228 show: false, 229 } 230 }, 231 roam: true, //是否拖动地图，鼠标滚轮控制地图大小 232 // left: '10%', 233 // center: [117.98561551896913, 31.205000490896193], 234 zoom: 1, // 改变这个值的大小就可以了 235 // data: convertData(provinceData), 236 itemStyle: { 237 normal: { 238 areaColor: '#4169E1', 239 borderColor: '#3B5077', 240 }, 241 emphasis: { 242 areaColor: '#2B91B7', 243 } 244 } 245 }, 246 247 series: [ 248 249 { 250 showAllSymbol: true, 251 type: 'map', 252 map: 'china', 253 geoIndex: 0, 254 aspectScale: 0.75, //长宽比 255 showLegendSymbol: false, // 存在legend时显示 256 label: { 257 normal: { 258 show: false 259 }, 260 emphasis: { 261 show: false, 262 textStyle: { 263 color: '#fff' 264 } 265 } 266 }, 267 roam: true, 268 itemStyle: { 269 normal: { 270 areaColor: '#031525', 271 borderColor: '#3B5077', 272 }, 273 emphasis: { 274 areaColor: '#2B91B7' 275 } 276 }, 277 animation: false, 278 data: provinceData 279 }, 280 { 281 // name: '数量', 282 type: 'scatter', 283 coordinateSystem: 'geo', 284 symbol: 'pin', 285 symbolSize: function (val) { 286 return 30; 287 }, 288 label: { 289 normal: { 290 show: true, 291 textStyle: { 292 color: '#fff', 293 fontSize: 9, 294 } 295 } 296 }, 297 itemStyle: { 298 normal: { 299 color: '#32CD32', //标志颜色 300 } 301 }, 302 encode: { //可以定义 data 的哪个维度被编码成什么 303 label: 2 // 表示 label 使用维度 3。 304 }, 305 data: convertData(provinceData), 306 }, 307 ], 308 }); 309 } 310 311 }, 312 //错误提示 313 error: function (XMLHttpRequest, textStatus, errorThrown) { 314 315 }, 316 }) 317 318 319 320 var convertData = function (data) { 321 var res = []; 322 for (var i = 0; i < data.length; i++) { 323 var geoCoord = geoCoordMap[data[i].name]; 324 325 if (geoCoord) { 326 res.push({ 327 name: data[i].name, 328 value: geoCoord.concat(data[i].value) 329 }); 330 } 331 } 332 return res; 333 }; 334 335 /*右侧图表的数据*/ 336 337 //从大到小排序 338 TowerNumbers.sort(function (a, b) { 339 340 return b - a; //当其改为a-b时，下面的排序反转参数就要去掉 341 }) 342 343 var option = {}; 344 345 chart.setOption(option); //加载右侧图表数据 346 window.onresize = chart.resize; //地图大小自动适应浏览器 347 348 return chart; 349 };
参考了 https://gallery.echartsjs.com/editor.html?c=xBJDR584vG
最终的效果图：
