<!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/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="map-wrap" style="height:600px;"></div>
<script src="./index.js"></script>
</body>
</html>
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 组件IDshow 布尔值，是否显示地理坐标系组件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
type type值为scatter，实现散点图idname 系列名称coordinateSystem 该系列使用的坐标系。 coordinateSystem:"geo"，使用地理坐标系。data 该系列的数据内容 tooltip 提示框组件
show 布尔值，是否显示提示框trigger 有以下三个值可选，其中， "item"，数据项图形触发，主要用在散点图、饼图等图表中； "axis"，坐标轴触发，主要用在柱状图、折线图等图表中； "none"，不触发，即任何时候都不显示提示框。formatter 提示框浮层内容格式器，有两种方式：字符串模板和回调函数。 本例中，我们用 回调函数 试试。 tooltip
:{
trigger
:"item",
formatter
:function(params
){
console
.log(params
);
const name
= params
.data
.name
;
const value
= params
.data
.value
[2];
return `<div>${name}：${value}</div>`
}
}
参考文档 geo(地图)的配置 series-scatter(散点图)的配置 ECharts实现地图散点图 散点图实例
