$(function () { map(); function map() { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('map')); var data = [ {name: '乳山寨镇', value: 289}, {name: '夏村镇', value: 129}, {name: '海阳所镇', value: 199}, {name: '白沙滩镇', value: 229}, {name: '大孤山镇', value: 109}, {name: '南黄镇', value: 145}, {name: '冯家镇', value: 210}, {name: '下初镇', value: 271}, {name: '午极镇', value: 156}, {name: '育黎镇', value: 178}, {name: '崖子镇', value: 187}, {name: '诸往镇', value: 161}, {name: '乳山口镇', value: 165}, {name: '徐家镇', value: 172}, {name: '横山后村', value: 58}, {name: '贾家村', value: 72}, {name: '北司马庄', value: 42}, {name: '宋河村', value: 61}, {name: '玉皇山后村', value: 67}, {name: '小庵村', value: 32}, {name: '寨中村', value: 69}, {name: '于家庄村', value: 39}, {name: '胡八庄村', value: 19}, {name: '西圈村', value: 66}, {name: '西周格庄', value: 72}, {name: '石头圈村', value: 17}, {name: '战家夼村', value: 33}, {name: '东秦家庄村', value: 42}, {name: '南夼', value: 55}, {name: '杜家岛村', value: 19}, {name: '海阳所村', value: 50}, {name: '挂子场村', value: 69}, {name: '小石口村', value: 71}, {name: '贾家庄', value: 62}, {name: '赵家庄', value: 33}, {name: '宫家村', value: 49}, {name: '大陶家村', value: 19}, {name: '白沙滩村', value: 66}, {name: '徐家塂村', value: 39}, {name: '常家庄', value: 32}, {name: '水井村', value: 21}, {name: '河南村', value: 41}, {name: '东林家村', value: 51}, {name: '下石灰刘家村', value: 61}, {name: '吴家沟村', value: 71}, {name: '岭上村', value: 22}, {name: '湾头村', value: 32}, {name: '西浪暖村', value: 42}, {name: '朱家屯', value: 52}, {name: '宫家疃', value: 62}, {name: '陈家屯', value: 72}, {name: '上口', value: 23}, {name: '吕格庄', value: 33}, {name: '北高格庄村', value: 43}, {name: '中寨村', value: 53}, {name: '徐家村村', value: 63}, {name: '吴格庄', value: 73}, {name: '西吉子村', value: 24}, {name: '下初村', value: 34}, {name: '东马台石村', value: 44}, {name: '垒中前村', value: 54}, {name: '段家村', value: 64}, {name: '西庄', value: 74}, {name: '黄格庄', value: 25}, {name: '孙家疃村', value: 35}, {name: '于家疃', value: 45}, {name: '石字岘村', value: 55}, {name: '午极村', value: 65}, {name: '杨家庄', value: 75}, {name: '北庄', value: 26}, {name: '塔庄', value: 36}, {name: '北勇家村', value: 46}, {name: '下宋格庄', value: 56}, {name: '南北山村', value: 66}, {name: '西纪村', value: 76}, {name: '南勇家村', value: 27}, {name: '南西屋村', value: 37}, {name: '马石店', value: 47}, {name: '大崮头村', value: 57}, {name: '西涝口村', value: 67}, {name: '哨里村', value: 77}, {name: '河北村', value: 28}, {name: '北寨村', value: 38}, {name: '北地口村', value: 48}, {name: '神童庙村', value: 58}, {name: '姚家埠', value: 68}, {name: '许家村', value: 78}, {name: '冷格庄', value: 29}, {name: '孙家夼', value: 39}, {name: '下石硼村', value: 20}, {name: '流水头村', value: 30}, {name: '南唐家村', value: 40}, {name: '兰家村', value: 50}, {name: '兰家庄', value: 60}, {name: '康家村', value: 45}, {name: '后尹家村', value: 20}, {name: '择村', value: 61}, {name: '前尹家村', value: 46}, {name: '洋村', value: 32}, ]; var geoCoordMap = { '乳山寨镇':[121.456054,36.886624], '夏村镇':[121.524251,36.950679], '海阳所镇':[121.620025,36.813767], '白沙滩镇':[121.65,36.84], '大孤山镇':[121.63,36.91], '南黄镇':[121.79,36.97], '冯家镇':[121.68,37.03], '下初镇':[121.60,37.03], '午极镇':[121.48,37.06], '育黎镇':[121.43,37.01], '崖子镇':[121.31,37.08], '诸往镇':[121.37,36.97], '乳山口镇':[121.05,36.87], '徐家镇':[121.76,36.91], '横山后村':[121.414469,36.810789], '贾家村':[121.416283,36.824506], '北司马庄':[121.407681,36.901774], '宋河村':[121.396209,36.830315], '玉皇山后村':[121.374950,36.855650], '小庵村':[121.448942,36.911566], '寨中村':[121.449558,36.884618], '于家庄村':[121.471225,36.939311], '胡八庄村':[121.568170,36.975267], '西圈村':[121.479388,36.916464], '西周格庄':[121.510969,36.970669], '石头圈村':[121.568044,36.963046], '战家夼村':[121.507283,36.989821], '东秦家庄村':[121.581713,36.923468], '南夼':[121.627059,36.743659], '杜家岛村':[121.568930,36.742764], '海阳所村':[121.617903,36.810726], '挂子场村':[121.621164,36.742278], '小石口村':[121.638667,36.739209], '贾家庄':[121.620673,36.818218], '赵家庄':[121.596279,36.817683], '宫家村':[121.711722,36.852648], '大陶家村':[121.719183,36.849222], '白沙滩村':[121.653828,36.851331], '徐家塂村':[121.604998,36.866776], '常家庄':[121.673780,36.843373], '水井村':[121.602086,36.915575], '河南村':[121.584121,36.897239], '东林家村':[121.623557,36.911229], '下石灰刘家村':[121.663305,36.988531], '吴家沟村':[121.593867,36.942382], '岭上村':[121.831768,36.942676], '湾头村':[121.745008,36.994478], '西浪暖村':[121.851989,36.937874], '朱家屯':[121.792185,36.951775], '宫家疃':[121.738942,36.982992], '陈家屯':[121.828619,36.950847], '上口':[121.719243,37.089079], '吕格庄':[121.655496,37.024654], '北高格庄村':[121.693676,37.125353], '中寨村':[121.654265,37.073047], '徐家村村':[121.705554,37.109360], '吴格庄':[121.703655,37.094140], '西吉子村':[121.699587,37.074950], '下初村':[121.611775,37.030651], '东马台石村':[121.589778,37.091578], '垒中前村':[121.612687,37.078456], '段家村':[121.623607,37.015714], '西庄':[121.616513,37.117998], '黄格庄':[121.580526,37.026722], '孙家疃村':[121.495313,37.065864], '于家疃':[121.500496,37.066822], '石字岘村':[121.478875,37.100782], '午极村':[121.490765,37.067272], '杨家庄':[121.515239,37.076619], '北庄':[121.478521,37.084915], '塔庄':[121.454441,37.018286], '北勇家村':[121.408873,36.971813], '下宋格庄':[121.444572,37.027198], '南北山村':[121.465136,36.981366], '西纪村':[121.402092,37.016856], '南勇家村':[121.410477,36.958543], '南西屋村':[121.434169,36.967630], '马石店':[121.222616,37.030161], '大崮头村':[121.376992,37.091105], '西涝口村':[121.211353,37.063630], '哨里村':[121.338730,37.077767], '河北村':[121.333901,37.069967], '北寨村':[121.297241,37.068296], '北地口村':[121.343912,37.071978], '神童庙村':[121.351405,36.938536], '姚家埠':[121.370157,36.957732], '许家村':[121.384028,37.008922], '冷格庄':[121.345035,37.021080], '孙家夼':[121.352509,36.954441], '下石硼村':[121.243087,36.987297], '流水头村':[121.328980,37.009478], '南唐家村':[121.558036,36.859310], '兰家村':[121.576354,36.868730], '兰家庄':[121.540098,36.874506], '康家村':[121.564747,36.875638], '后尹家村':[121.572749,36.896017], '择村':[121.558859,36.872582], '前尹家村':[121.569229,36.891347], '洋村':[121.786401,36.910271] } var convertData = function (data) { // console.log(data) var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; console.log(geoCoord) console.log(geoCoord.concat(data[i].value)) if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; var domColor = function(dataIndex){ console.log('123') const newAry = []; for (let k = 0; k < 100; k++){ const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); newAry.push(`rgb(${r},${g},${b})`) } return newAry[dataIndex]; }; var textColor = function(name){ console.log('name123',name,'name') // console.log(name.splic(0,-1),'name.splic(0,-1)') // if(name.splic(0,-1)){ // } } option = { // backgroundColor: '#404a59', title: { text: '', sublink: '', left: 'center', textStyle: { color: '#fff' } }, tooltip : { trigger: 'item1', formatter:'{b}{c}' }, geo: { map: 'rushan', label: { emphasis: { show: false } }, roam: false, zoom:1.3, itemStyle: { normal: { areaColor: 'rgba(2,37,101,.5)', borderColor: 'rgba(112,187,252,.5)' }, emphasis: { areaColor: 'rgba(2,37,101,.8)' } } }, series : [ { name: '', type: 'scatter', coordinateSystem: 'geo', data: convertData(data), symbolSize: function (val) { return val[2] / 15; }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: true } }, itemStyle: { normal: { color: '#ffeb7b' // color: (e) => { // return domColor(e.dataIndex) // } } } } ] }; myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); } })