echarts 世界地图标点_ECharts添加地图标点(笔记）

ECharts添加地图标点(笔记)

如图：

实例html:

var dom = document.getElementById("container");

var myChart = echarts.init(dom);

var app = {};

option = null;

var geoCoordMap = {

"南宁医院":[108.324994,22.810701]

};

var convertData = function (data) {

var res = [];

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

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

if (geoCoord) {

res.push(geoCoord.concat(data[i].value).concat(data[i].name));

}

}

console.log(res);

return res;

};

option = {

backgroundColor: '#fff',

title: {

text: '广西区合作医院分布',

subtext: 'data from 数字广润',

sublink: 'http://gxgrtech.com.cn/',

left: 'center',

textStyle: {

color: '#000'

}

},

tooltip: {

trigger: 'item',

//formatter: "名称:{a}
坐标:{c}"

formatter:function(params){

console.log(params);

console.log(params.data[3]);

var res = '名称:'+params.data[3]+'
';

return res;

}

},

legend: {

orient: 'vertical',

top: 'bottom',

left: 'right',

data:['医院'],

textStyle: {

color: '#fff'

}

},

visualMap: {

min: 0,

max: 300,

splitNumber: 5,

color: ['#d94e5d','#eac736','#50a3ba'],

textStyle: {

color: '#fff'

},

dimension:3

},

geo: {

map: '广西',

label: {

normal: {

show:true,

areaColor: '#ffefd5',

borderColor: '#111',

textStyle:{color:"#c71585"}

},

emphasis: {

show: false,

textStyle:{color:"#fff"}

}

},

itemStyle: {

normal: {

show:false,

areaColor: '#ffefd5',

borderColor: '#009fe8'

},

emphasis: {

show:false,

areaColor: '#f47920'

}

}

},

series: [

{

name: '医院',

type: 'scatter',

coordinateSystem: 'geo',

data: convertData([

{name: "南宁医院", value: 9}

]),

encode: {

value: 2

},

symbolSize: 12,

label: {

normal: {

show: false,//显示市区标签

textStyle:{color:"#c71585"}//省份标签字体颜色

},

emphasis: {//对应的鼠标悬浮效果

show: true, //关闭文字 (这东西有问题得关)

textStyle:{color:"#800080"}

}

},

itemStyle: {

normal: {

borderWidth: .5,//区域边框宽度

borderColor: '#009fe8',//区域边框颜色

areaColor:"#ffefd5",//区域颜色

},

emphasis: {

show:true,

borderWidth: .5,

borderColor: '#4b0082',

areaColor:"#f47920",

}

}

}

]

};

if (option && typeof option === "object") {

myChart.setOption(option, true);

}