ECharts添加地图标点(笔记）
如图：
实例html:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="E:\incubator-echarts-4.8.0\map\js\province\guangxi.js"></script>
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> -->
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> -->
<script type="text/javascript">
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}<br />坐标:{c}"
formatter:function(params){
console.log(params);
console.log(params.data[3]);
var res = '名称:'+params.data[3]+'<br/>';
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);
}
</script>
</body>
</html>
