echarts在地图上绘制散点图（任意点）
程序员文章站
2022-05-23 19:02:16
项目需求：在省份地图上绘制散点图，散点位置不一定是哪个城市或哪个区县，即任意点 通过查询官网文档，找到一个与需求类似的Demo：https://www.echartsjs.com/gallery/editor.html?c=scatter-map，更改代码，将中国地图替换为省份地图，省份地图的js代 ......
项目需求：在省份地图上绘制散点图，散点位置不一定是哪个城市或哪个区县，即任意点
通过查询官网文档，找到一个与需求类似的demo：，更改代码，将中国地图替换为省份地图，省份地图的js代码可以从网上下载，官网现在不提供下载了。
index.html，一个盒子
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>mapscatter demo</title>
</head>
<body>
<div id="echart" style="width: 1000px; height: 800px;"></div>
<script src="./echarts.min.js"></script>
<script src="./gansu.js"></script>
<script src="./main.js"></script>
</body>
</html>
main.js
var dom = document.getelementbyid("container");
var mychart = echarts.init(dom);
option = null;
// 散点在地图上的坐标
var geocoordmap = {
"*基地1": [94.12, 39.66],
"*基地2": [97.20, 39.55],
"*基地3": [95.28, 40.29],
"省级基地1": [98.36, 40.19],
"省级基地2": [97.88, 39.49],
"省级基地3": [95.77, 40.59],
"市级基地1": [102.66, 38.89],
"市级基地2": [101.23, 37.79],
"市级基地3": [99.40, 39.69]
};
// 将坐标与值对应并反映在地图上
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;
};
option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name;
}
},
visualmap: {
type: 'piecewise',
textstyle: {
color: '#fff'
},
pieces: [
{min: 300, label: '*基地', color: '#e3bf4c'},
{min: 200, max: 300, label: '省级基地', color: '#be4f51'},
{min: 100, max: 200, label: '市级基地', color: '#60c2cc'}
],
color: ['#e3bf4c', '#be4f51', '#60c2cc']
},
geo: {
map: '甘肃',
label: {
emphasis: {
show: false
}
},
itemstyle: {
normal: {
areacolor: '#323c48',
bordercolor: '#111'
},
emphasis: {
areacolor: '#2a333d'
}
}
},
series: [
{
type: 'effectscatter',
coordinatesystem: 'geo',
data: convertdata([
{name: "*基地1", value: 110},
{name: "*基地2", value: 110},
{name: "*基地3", value: 110},
{name: "省级基地1", value: 210},
{name: "省级基地2", value: 210},
{name: "省级基地3", value: 210},
{name: "市级基地1", value: 310},
{name: "市级基地2", value: 310},
{name: "市级基地3", value: 310}
]),
symbolsize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemstyle: {
emphasis: {
bordercolor: '#fff',
borderwidth: 1
}
}
}
]
};
if (option && typeof option === "object") {
mychart.setoption(option, true);
}
最终效果