中国地图、散点图结合点击后显示当前城市数量 不显示经纬度坐标
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
最终的效果图：