echarts地图绘制
echarts地图绘制
前提
1、需要引入echarts.js(echarts.min.js) 和 china.js
2、需要有一个有宽高的dom容器来放置地图
1、简单的地图绘制
1.1代码实现
(function () {
//1、实例化对象
var myChart = echarts.init(document.querySelector(".map .chart"))
var option = {
//设置标题
title: {
text: '地图绘制', // 主标题名称
textStyle: {
color: '#bce2e8',
fontStyle: 'oblique', //斜体
fontFamily: 'monospace', //字体
},
top: 20,
left: 20
},
// 地图配置
geo: {
map: "china",
//放大地图
zoom: 1.25,
//开启漫游
roam: true,
//让其文字出现在外地图上
label: {
// 通常状态下的文字样式
normal: {
show: true,
textStyle: {
color: "#fff",
},
},
// 鼠标放上去的样式
emphasis: {
textStyle: {
color: "red",
},
},
},
// 地图区域的样式设置
itemStyle: {
//配置正常状态下的样式
normal: {
borderColor: "rgba(147, 235, 248, .5)", //设置地图区域边框的颜色
borderWidth: 1, //设置地图区域边框的宽度
areaColor: { //设置地图区域的填充色 -> 渐变色
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
// 鼠标放上去高亮的样式（在鼠标悬停状态下）
emphasis: {
areaColor: "#389BB7",
borderWidth: 0,
},
},
},
}
//3、把配置项给实例对象
myChart.setOption(option)
})()
1.2 代码讲解
这段代码是使用ECharts库来绘制一个地图，并设置地图的样式和配置。下面是代码的解释：
- 首先，通过
echarts.init方法实例化一个 ECharts 对象，并传入一个 DOM 元素作为容器。这个容器将用来展示地图。 - 定义了一个
option对象，用于配置地图的样式和行为。 - 设置地图的标题，包括文本内容和样式。
- 配置地图的基本属性，通过
geo字段来设置。其中map属性指定了要使用的地图类型，这里是中国地图；zoom属性设置地图的缩放级别；roam属性开启了地图的漫游，可以通过鼠标拖拽和缩放来浏览地图；label字段设置了地图区域上的标签样式，包括通常状态和鼠标悬停状态下的样式。 - 设置地图区域的样式，通过
itemStyle字段来配置。normal属性设置了正常状态下的样式，包括边框颜色、边框宽度和填充色。填充色使用渐变色，从透明到某个颜色的渐变。emphasis属性设置了鼠标悬停状态下的样式，包括区域颜色和边框宽度。 - 最后，通过
myChart.setOption(option)方法把配置项应用到实例对象，实现地图的绘制。
2、给地图加上标注
给地图加上标注只需要在series中添加：
coordinateSystem: "geo"→ 使用地理坐标系进行展示，type: "scatter"→设置为散点类型data→ 数据格式：其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
例如：data: [{ name: “广东”, value: [113.23, 23.16, 12656.80] }]
2.1 代码演示
(function () {
//1、实例化对象
var myChart = echarts.init(document.querySelector(".map .chart"))
var option = {
//设置标题
title: {
text: '地图绘制', // 主标题名称
textStyle: {
color: '#bce2e8',
fontStyle: 'oblique', //斜体
fontFamily: 'monospace', //字体
},
top: 20,
left: 20
},
// 地图配置
geo: {
map: "china",
//放大地图
zoom: 1.25,
//开启漫游
roam: true,
//让其文字出现在外地图上
label: {
// 通常状态下的文字样式
normal: {
show: true,
textStyle: {
color: "#fff",
},
},
// 鼠标放上去的样式
emphasis: {
textStyle: {
color: "red",
},
},
},
// 地图区域的样式设置
itemStyle: {
//配置正常状态下的样式
normal: {
borderColor: "rgba(147, 235, 248, .5)", //设置地图区域边框的颜色
borderWidth: 1, //设置地图区域边框的宽度
areaColor: { //设置地图区域的填充色 -> 渐变色
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
// 鼠标放上去高亮的样式（在鼠标悬停状态下）
emphasis: {
areaColor: "#389BB7",
borderWidth: 0,
},
},
},
series: [
{
type: "scatter", //设置为散点类型
coordinateSystem: "geo", //表示使用地理坐标系进行展示
symbol: "pin", //表示使用图钉形状的标记符号
symbolSize: [80, 80], //表示标记符号的尺寸为 50x50
// 这里渲染标志里的内容以及样式
label: {
show: true,
formatter(value) {//让他显示[113.23, 23.16, 12656.80]这个列表中的值
return value.data.value[2];
},
color: "#fff",
},
// 标志的样式
itemStyle: {
normal: {
color: "rgba(255,0,0,.7)",
shadowBlur: 2, //设置图表的阴影模糊大小为 2
shadowColor: "D8BC37", //表示设置图表的阴影颜色为深黄色
},
},
// 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
// 至于如何展示，完全是靠上面的formatter来自己定义的
data: [
{ name: "广东", value: [113.23, 23.16, 12656.80] },
{ name: "山东", value: [117.19, 36.65, 10162.79] },
],
},
]
}
//3、把配置项给实例对象
myChart.setOption(option)
})()
2.2 注意事项
- 数据格式：其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义, 至于如何展示，完全是靠上面的formatter来自己定义的
- 至于如何展示，完全是靠上面的formatter来自己定义的
2.3 图形展示
3、涟漪标注
3.1 注意点：
series中：
type:"effectScatter"→ 表示采用带有涟漪效果的散点图（effectScatter）类型的图表。coordinateSystem: “geo”, → 使用地理坐标系进行展示。effectType: "ripple", → 表示采用涟漪效果。
3.2 代码展示
{
type: "effectScatter", //表示采用带有涟漪效果的散点图（effectScatter）类型的图表。
coordinateSystem: "geo", //使用地理坐标系进行展示。
effectType: "ripple", //表示采用涟漪效果。
showEffectOn: "render", //表示图表渲染时显示效果。
rippleEffect: { //表示图表渲染时显示效果
period: 10, //涟漪的周期大小为 10。
scale: 10, //涟漪的缩放比例为 10。
brushType: "fill", //表示涟漪效果的画笔类型为填充
},
hoverAnimation: true, //表示鼠标悬停时启用动画效果。
itemStyle: { // 设置标记符号的样式。
normal: { // 表示普通状态下的样式
color: "rgba(255, 205, 59, .7)",
shadowBlur: 10,
shadowColor: "#333",
},
},
data: [
{ name: "西藏", value: [91.14, 29.64, 364] },
{ name: "澳门", value: [113.57, 22.16, 67.28] },
],
},
3.3 效果图
4、用series为地图添加数据 → 不用geo
- 将series中的type设置为map，就不需要给data添加经纬度了,
常用来绘制地图的热力图
4.1 热力地图代码：
注意:
- 需要添加视觉映射，为热力图做准备
(function () {
//1、实例化对象
var myChart = echarts.init(document.querySelector(".map .chart"))
var option = {
//设置标题
title: {
text: '地图绘制', // 主标题名称
textStyle: {
color: '#bce2e8',
fontStyle: 'oblique', //斜体
fontFamily: 'monospace', //字体
},
top: 20,
left: 20
},
// 提示浮窗样式
tooltip: {
show: true,
trigger: "item",
//设置显示内容
formatter(params) {
return `地区：${params.name}</br>数值(万)：${params.value}`;
},
},
// 地图配置
geo: {
map: "china",
//放大地图
zoom: 1.25,
//开启漫游
roam: true,
//让其文字出现在外地图上
label: {
// 通常状态下的文字样式
normal: {
show: true,
textStyle: {
color: "#fff",
},
},
// 鼠标放上去的样式
emphasis: {
textStyle: {
color: "red",
},
},
},
// 地图区域的样式设置
itemStyle: {
//配置正常状态下的样式
normal: {
borderColor: "rgba(147, 235, 248, .5)", //设置地图区域边框的颜色
borderWidth: 1, //设置地图区域边框的宽度
areaColor: { //设置地图区域的填充色 -> 渐变色
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
// 鼠标放上去高亮的样式（在鼠标悬停状态下）
emphasis: {
areaColor: "#389BB7",
borderWidth: 0,
},
},
},
//视觉映射，为热力图做准备
visualMap: {
// 是否展示左下角，即是是false，也仅是不显示，不影响数据的映射
show: true,
// 上下端文字
// text: ["多", "少"],
// 最小值和最大值，必须指定
min: 0,
max: 11000,
// 位置
left: "10%",
bottom: "0%",
//水平放置
orient: 'horizontal',
// 是否展示滑块
calculable: true,
// 从下到上的颜色(红黄绿)
inRange: {
color: ['rgb(168, 201, 127, .5)', 'rgb(248, 184, 98,.5)', 'rgb(237, 109, 61,.5)', 'rgb(217, 51, 63,.5)']
},
//字体颜色
textStyle: {
color: "#fff",
map: "china",
},
},
series: [
{
map: "china",
type: "map",
//放大地图
zoom: 1.25,
//不开启缩放漫游
roam: false,
label: {
// 通常状态下的样式
normal: {
show: true,
textStyle: {
color: "#fff",
},
},
// 鼠标放上去的样式
emphasis: {
textStyle: {
color: "#fff",
},
},
},
// 地图区域的样式设置
itemStyle: {
normal: {
borderColor: "rgba(147, 235, 248, .5)",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .3)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: "rgba(128, 217, 248, .7)",
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10,
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: "#389BB7",
borderWidth: 0,
},
},
data: [
{name:"新疆",value:2333},
{name:"内蒙古",value:5333},
]
}
]
}
//3、把配置项给实例对象
myChart.setOption(option)
})()
4.2效果图展示
5、地图标注加地图热力图
注意事项：
- 当我们需要在地图热力图上标注时，其实将上面的代码结合就可以了，本质上是画了两个图，将两图重叠在一起
- 所以，geo的配置要和series中type为map的配置一样，不然会导致一些问题而使图不美观，
- 我们应该将漫游关了，不然也非常不美观！
5.1代码展示
(function () {
//1、实例化对象
var myChart = echarts.init(document.querySelector(".map .chart"))
var option = {
//设置标题
title: {
text: '地图绘制', // 主标题名称
textStyle: {
color: '#bce2e8',
fontStyle: 'oblique', //斜体
fontFamily: 'monospace', //字体
},
top: 20,
left: 20
},
// 提示浮窗样式
tooltip: {
show: true,
trigger: "item",
//设置显示内容
formatter(params) {
return `地区：${params.name}</br>数值(万)：${params.value}`;
},
},
// 地图配置
geo: {
map: "china",
//放大地图
zoom: 1.25,
//开启漫游
roam: true,
//让其文字出现在外地图上
label: {
// 通常状态下的文字样式
normal: {
show: true,
textStyle: {
color: "#fff",
},
},
// 鼠标放上去的样式
emphasis: {
textStyle: {
color: "red",
},
},
},
// 地图区域的样式设置
itemStyle: {
//配置正常状态下的样式
normal: {
borderColor: "rgba(147, 235, 248, .5)", //设置地图区域边框的颜色
borderWidth: 1, //设置地图区域边框的宽度
areaColor: { //设置地图区域的填充色 -> 渐变色
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
},
// 鼠标放上去高亮的样式（在鼠标悬停状态下）
emphasis: {
areaColor: "#389BB7",
borderWidth: 0,
},
},
},
//视觉映射，为热力图做准备
visualMap: {
// 是否展示左下角，即是是false，也仅是不显示，不影响数据的映射
show: true,
// 上下端文字
// text: ["多", "少"],
// 最小值和最大值，必须指定
min: 0,
max: 11000,
// 位置
left: "10%",
bottom: "0%",
//水平放置
orient: 'horizontal',
// 是否展示滑块
calculable: true,
// 从下到上的颜色(红黄绿)
inRange: {
color: ['rgb(168, 201, 127, .5)', 'rgb(248, 184, 98,.5)', 'rgb(237, 109, 61,.5)', 'rgb(217, 51, 63,.5)']
},
//字体颜色
textStyle: {
color: "#fff",
map: "china",
},
},
series: [
{ // --> 红色小标签设置
type: "scatter", //设置为散点类型
coordinateSystem: "geo", //表示使用地理坐标系进行展示
symbol: "pin", //表示使用图钉形状的标记符号
symbolSize: [80, 80], //表示标记符号的尺寸为 80x80
// 这里渲染标志里的内容以及样式
label: {
show: true,
formatter(value) {//让他显示[113.23, 23.16, 12656.80]这个列表中的值
return value.data.value[2];
},
color: "#fff",
},
// 标志的样式
itemStyle: {
normal: {
color: "rgba(255,0,0,.7)",
shadowBlur: 2, //设置图表的阴影模糊大小为 2
shadowColor: "D8BC37", //表示设置图表的阴影颜色为深黄色
},
},
// 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
// 至于如何展示，完全是靠上面的formatter来自己定义的
data: [
{ name: "广东", value: [113.23, 23.16, 12656.80] },
{ name: "山东", value: [117.19, 36.65, 10162.79] },
],
},
{
type: "effectScatter", //表示采用带有涟漪效果的散点图（effectScatter）类型的图表。
coordinateSystem: "geo", //使用地理坐标系进行展示。
effectType: "ripple", //表示采用涟漪效果。
showEffectOn: "render", //表示图表渲染时显示效果。
rippleEffect: { //表示图表渲染时显示效果
period: 10, //涟漪的周期大小为 10。
scale: 10, //涟漪的缩放比例为 10。
brushType: "fill", //表示涟漪效果的画笔类型为填充
},
hoverAnimation: true, //表示鼠标悬停时启用动画效果。
itemStyle: { // 设置标记符号的样式。
normal: { // 表示普通状态下的样式
color: "rgba(255, 235, 59, .7)",
shadowBlur: 10,
shadowColor: "#333",
},
},
data: [
{ name: "西藏", value: [91.14, 29.64, 364] },
{ name: "澳门", value: [113.57, 22.16, 67.28] },
],
},
{
map: "china",
type: "map",
//放大地图
zoom: 1.25,
//不开启缩放漫游
roam: false,
label: {
// 通常状态下的样式
normal: {
show: true,
textStyle: {
color: "#fff",
},
},
// 鼠标放上去的样式
emphasis: {
textStyle: {
color: "#fff",
},
},
},
// 地图区域的样式设置
itemStyle: {
normal: {
borderColor: "rgba(147, 235, 248, .5)",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(147, 235, 248, .3)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: "rgba(128, 217, 248, .7)",
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10,
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: "#389BB7",
borderWidth: 0,
},
},
data: [
{name:"新疆",value:2333},
{name:"内蒙古",value:5333},
]
}
]
}
//3、把配置项给实例对象
myChart.setOption(option)
})()
5.2效果图展示
- 其实就是将以上的代码结合
- 具体配置可以按自己调整
