Echarts 地图 自定义 点

http://gallery.echartsjs.com/editor.html?c=xB1eC_eOC-

var data = [

{

name: "北京市"

}, {

name: '盐城'

}, {

name: '青岛'

}, {

name: '金昌'

}, {

name: '泉州'

}, {

name: '拉萨'

}, {

name: '上海浦东'

}, {

name: '攀枝花'

}, {

name: '威海'

}, {

name: '承德'

}, {

name: '汕尾'

}, {

name: '克拉玛依'

}, {

name: '重庆市'

}, {

name: '北京市'

}

];

var geoCoordMap = {

'上海浦东': [121.48, 31.22],

'攀枝花': [101.718637, 26.582347],

'威海': [122.1, 37.5],

'承德': [117.93, 40.97],

};

var geoCoordMap2 = {

'齐齐哈尔': [133.97, 47.33],

'盐城': [120.13, 33.38],

'青岛': [120.33, 36.07],

'金昌': [102.188043, 38.520089],

'泉州': [118.58, 24.93],

'拉萨': [91.11, 29.97],

};

var geoCoordMap3 = {

'汕尾': [115.375279, 22.786211],

'克拉玛依': [84.77, 45.59],

'重庆市': [108.384366, 30.439702],

"北京市": [116.4551, 40.2539]

};

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)

});

}

}

return res;

};

var convertData2 = function(data) {

var res = [];

for (var i = 0; i < data.length; i++) {

var geoCoord = geoCoordMap2[data[i].name];

if (geoCoord) {

res.push({

name: data[i].name,

value: geoCoord.concat(data[i].value)

});

}

}

return res;

};

var convertData3 = function(data) {

var res = [];

for (var i = 0; i < data.length; i++) {

var geoCoord = geoCoordMap3[data[i].name];

if (geoCoord) {

res.push({

name: data[i].name,

value: geoCoord.concat(data[i].value)

});

}

}

return res;

};

console.log(convertData(data))

option = {

backgroundColor: 'transparent',

title: {

text: '',

subtext: '',

},

visualMap: {

show: false,

min: 0,

max: 5,

splitList: [

{

start: 0,

end: 10,

label: '',

color: 'blue'

}

],

//color: ['red', 'gold', 'lightgrey'],

},

geo: {

map: 'china',

zoom: 1.2,

label: {

normal: {

show: false,

color: '#c1c4c8'

},

emphasis: {

show: true,

color: '#292929'

}

},

roam: true,

itemStyle: {

normal: {

areaColor: 'transparent',

borderColor: '#b9b4b7'

},

emphasis: {

areaColor: '#0347B6'

}

}

},

series: [{

name: '正常',

type: 'effectScatter',

coordinateSystem: 'geo',

data: convertData(data),

symbolSize: 8,

showEffectOn: 'render',

rippleEffect: {

scale: 0,

brushType: 'stroke'

},

hoverAnimation: true,

label: {

normal: {

formatter: '{b}',

position: 'right',

show: false

},

emphasis: {

show: true

}

},

itemStyle: {

normal: {

color: '#4CD5FB',

}

}

}, {

name: '位置异常',

type: 'effectScatter',

coordinateSystem: 'geo',

data: convertData2(data),

symbolSize: 8,

showEffectOn: 'render',

rippleEffect: {

scale: 0,

brushType: 'stroke'

},

hoverAnimation: true,

label: {

normal: {

formatter: '{b}',

position: 'right',

show: false

},

emphasis: {

show: true

}

},

itemStyle: {

normal: {

color: '#56C8FB',

}

},

}, {

name: '仪器异常',

type: 'effectScatter',

coordinateSystem: 'geo',

symbol: 'path://M54.227,12.611c-0.338-0.336-0.736-0.505-1.196-0.505c-0.229,0-0.712,0.188-1.446,0.559 c-0.735,0.372-1.515,0.786-2.336,1.248c-0.823,0.459-1.797,0.875-2.921,1.247c-1.123,0.371-2.163,0.559-3.12,0.559 c-0.884,0-1.664-0.168-2.336-0.505c-2.229-1.044-4.168-1.823-5.814-2.337c-1.646-0.513-3.416-0.771-5.311-0.771 c-3.272,0-6.999,1.064-11.177,3.188c-0.862,0.43-1.48,0.763-1.88,1.007l-0.397-2.911c0.897-0.779,1.476-1.914,1.476-3.195 c0-2.347-1.902-4.249-4.249-4.249c-2.347,0-4.249,1.902-4.249,4.249c0,1.531,0.818,2.862,2.032,3.61l5.74,42.09 c0.171,1.253,1.243,2.162,2.474,2.162c0.112,0,0.226-0.007,0.341-0.022c1.368-0.188,2.326-1.447,2.139-2.815L19.69,38.303 c4.186-2.077,7.807-3.124,10.853-3.124c1.293,0,2.554,0.193,3.783,0.583c1.23,0.391,2.253,0.815,3.067,1.274 c0.814,0.46,1.775,0.886,2.88,1.274c1.107,0.39,2.2,0.585,3.279,0.585c2.726,0,5.991-1.027,9.796-3.08 c0.478-0.248,0.828-0.492,1.049-0.731c0.221-0.239,0.332-0.579,0.332-1.021V13.806C54.729,13.347,54.562,12.948,54.227,12.611z',

data: convertData3(data),

symbolSize: 18,

showEffectOn: 'render',

rippleEffect: {

scale: 0,

brushType: 'stroke'

},

hoverAnimation: true,

label: {

normal: {

formatter: '{b}',

position: 'right',

show: false

},

emphasis: {

show: true

}

},

itemStyle: {

normal: {

color: '#F99F7F',

}

},

},

{

name: '',

type: 'map',

mapType: 'china',

geoIndex: 0,

label: {

normal: {

show: false

},

emphasis: {

show: true,

color: '#fff'

}

},

itemStyle: {

normal: {

areaColor: 'rgba(255,255,255,0)',

borderColor: '#3DABEB'

},

emphasis: {

areaColor: '#0A5BB6',

},

},

data: [{

name: '河北',

value: 9

}, {

name: '河南',

value: 9

}, {

name: '台湾',

value: 9

},

{

name: '上海',

value: 9

}

]

}

]

};

console.log()

myChart.setOption(option);