【ECharts】Echarts实现地图散点图
程序员文章站
2022-04-20 11:47:12
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<script src="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/echarts.min.js"></script>
</head>
<body>
<div id="map-wrap" style="height:600px;"></div>
<script src="./index.js"></script>
</body>
</html>
// index.js
window.onload = function(){
const XHR = new XMLHttpRequest();
XHR.open("get","./map/china.json",true);
XHR.onload = function(){
const jsonData = XHR.response;
echarts.registerMap("china",jsonData);
var mapChart = echarts.init(document.getElementById('map-wrap'));
var option = {
geo:{
id:"china",
map:"china",
show:true,
roam:"scale",
center:[116.46,39.92],
scaleLimit:{
min:0.5,
max:1
},
emphasis:{
itemStyle:{
areaColor:"#0ff",
borderColor:"#f00"
}
}
},
series:[
{
type:"scatter",
name:"地图demo(城市空气质量)",
coordinateSystem:"geo",
data:[
{name:"北京", value:[116.46,39.92,340]},
{name:"上海", value:[121.48,31.22,100]},
{name:"深圳", value:[114.07,22.62,200]},
{name:"广州", value:[113.23,23.16,150]}
]
}
],
tooltip:{
trigger:"item"
}
}
mapChart.setOption(option);
}
XHR.send();
}
-
geo
地理坐标系组件，用于地图绘制-
id
组件ID -
show
布尔值，是否显示地理坐标系组件 -
map
地图类型 -
roam
是否开启鼠标缩放和平移漫游，默认不开启
有以下三个值可选，其中，"scale"，开启缩放；"move"，开启平移;true，缩放、平移都开启。 -
center
当前视角的中心点，用经纬度表示 -
zoom
当前视角的缩放比例 -
scaleLimit
滚轮缩放的极限控制-
min，最小缩放值 -
max，最大缩放值
-
-
label
图形上的文本标签，用来说明图形的一些数据信息-
show
布尔值，是否显示标签 -
position
标签的位置，其值可以是一个关键字，也可以是一个数组。- 是一个关键字，如
top|left|right|bottom|inside|insideLeft等 - 是一个数组，如
[10,10]，标签相对于图形包围盒左上角的绝对像素值 - 是一个数组，如
['50%','50%']，标签相对于图形包围盒左上角的相对百分比
- 是一个关键字，如
-
rotate
标签旋转角度，是一个整数，取值范围[-90,90]，正值逆时针旋转，负值顺时针旋转。 -
offfset
标签文本是否进行偏移，默认不偏移。
比如[30,40]，则表示文本横线偏移30，纵向偏移40. formatter
-
-
itemStyle
地图中多边形的图形样式-
areaColor
地图区域的颜色 -
borderColor
地图区域的描边颜色
-
-
emphasis
高亮状态下的标签和多边形样式labelitemStyle
-
-
series-
typetype值为scatter，实现散点图 id-
name
系列名称 -
coordinateSystem
该系列使用的坐标系。coordinateSystem:"geo"，使用地理坐标系。 -
data
该系列的数据内容
-
上一篇： php自动识别并转换文字编码