Echarts：惊艳的Map

大家在网上看天气预报的时候应该就看到过在中国地图上显示不同省份的温度&＃xff0c;并根据温度的高低显示不同的颜色&＃xff0c;又或者看到各个省份的新冠肺炎新增人数&＃xff0c;根据不同的新增人数显示不同的颜色之类的图像。这些&＃xff0c;使用echarts中的map就可以实现&＃xff0c;今天就来实现一下热力图&＃xff0c;热力图就是根据不同数据显示不同颜色的地图。

首先创建一个元素用于承载图像。

<div id&＃61;"heatmap">div>


初始化echarts实例

const echartsInstance &＃61; echarts.init(document.getElementById(&＃39;heatmap&＃39;));


然后注册地图数据&＃xff0c;地图数据是一个json文件&＃xff0c;json数据中包含各个省份的坐标、名称、省会城市等信息&＃xff0c;在使用前需要先注册在echarts中。

echarts.registerMap(&＃39;china&＃39;&＃xff0c; &＃39;china.json&＃39;);


接下来配置数据配置
数据较多使用函数生成

function createData(){
return china.features.map(item &＃61;> {
return {
name:item.properties.shortName,
value: Math.floor(Math.random() * 361)
}
})
}


const options &＃61; {
visualMap:{
type:&＃39;piecewise&＃39;,
pieces:[{
min:0,
max:100,
color:&＃39;#10ff10&＃39;
},{
min:101,
max:190,
color:&＃39;#eeffaa&＃39;
},{
min:191,
max:360,
color:&＃39;#eeffff&＃39;
}]
},
series:[{
type:&＃39;map&＃39;,
map:&＃39;china&＃39;,
nameProperty:&＃39;shortName&＃39;,
name:&＃39;shortName&＃39;,
data:createData()
}]
};


在geo字段中我们可以看到map属性的值就是我们注册的地图的名字。

nameProperty是显示的字段&＃xff0c;该字段与JSON数据中的字段相对应。

要在geo上根据数据的大小显示不同的颜色&＃xff0c;需要使用visualMap&＃xff0c;visualMap把数据映射成对应的图元&＃xff0c;即可以显示的图像信息。

由于是显示热力图&＃xff0c;我们就使用连续的数据&＃xff0c;即数据是连续的不是离散的。

我们可以在pieces中配置不同数据需要显示的颜色。

在series中我们需要声明type为map&＃xff0c;这样就能显示不同的数据。
在map图中有一个map属性&＃xff0c;这个属性的值就是我们注册的地图名。
nameProperty是在地图上显示的值的字段名&＃xff0c;默认是name&＃xff0c;该值与地图json数据中的字段相对应。

接下来&＃xff0c;设置选项

echartsInstance.setOption(options);


效果如图所示