likeshop.project/public/count/js/map.js

$(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();
        });
    }

})