这里以河南地推为例
1、绘制河南地图 在DATA V里找到河南的位置信息
复制然后浏览器打开
然后在页面引用 代码如下
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import HN from "../src/api/heNan.json"; //地址一定要引入正确
type EChartsOption = echarts.EChartsOption;
onMounted(() => {
let option: EChartsOption;
let mapDom = document.getElementById("map");
let mapChart = echarts.init(mapDom);
//初始化元素
echarts.registerMap("HN", HN as any);
mapChart.setOption(
option = {
tooltip: {
trigger: "item",
formatter: "{b}<br/>{c}",
},
visualMap: {
type: "piecewise",
pieces: [{ color: "red" }],
},
series: [
{
name: "中国",
type: "map",
map: "HN",
label: {
// 省份的名称是否显示
show: true,
// 未选字体颜色
color: "#fff",
// 字体大小
fontSize: 10,
},
data: [],
itemStyle: {
normal: {
borderColor: "rgba(255, 255, 255, 0.4)",
areaColor: "rgba(18,77,178,0.2)",
borderWidth: 1,
// 虚化程度
shadowBlur: 1,
shadowColor: "rgba(189,243,249)",
},
emphasis: {
show: false,
// 每个区域的颜色
// 鼠标滑过颜色
areaColor: "#97EFF4",
// 鼠标滑过边框颜色
shadowColor: "#05EFF7",
// XY轴的偏移量
shadowOffsetX: 5,
shadowOffsetY: 5,
},
},
},
],
}
);
});
</script>
<template>
<div
class="map"
id="map"
style="height: 55vw; width: 90%; margin-top: 18vw ;background-color: black;"
></div>
</template>
<style scoped lang="less">
</style>
就得到了一个河南地图
然后添加三点标记 以标记郑州为例
要进行散点图option中必须要加上geo项 geo map要使用导出的json
geo: {
map: "HN",
// 最好这两个都关掉 否则拖拽和缩放会改变地图三点位置
// show: true,
// roam: true,
label: {
emphasis: {
show: false,
},
},
// 地图的背景色
itemStyle: {
normal: {
areaColor: "rgba(0,0,0,0.5)",
borderColor: "rgba(0,0,0,0.5)",
shadowColor: "rgba(0,0,0,0.5)",
shadowBlur: 30,
},
},
},
series中添加一个type:为 effectScatter 的图表 通过zlevel设置层级 层级大的会在层级小的上面
series: [
{
name: "河南",
type: "map",
map: "HN",
label: {
// 省份的名称是否显示
show: true,
// 未选字体颜色
color: "#fff",
// 字体大小
fontSize: 10,
},
itemStyle: {
normal: {
borderColor: "rgba(255, 255, 255, 0.4)",
areaColor: "rgba(18,77,178,0.2)",
borderWidth: 1,
// 虚化程度
shadowBlur: 1,
shadowColor: "rgba(189,243,249)",
},
emphasis: {
show: false,
// 每个区域的颜色
// 鼠标滑过颜色
areaColor: "#97EFF4",
// 鼠标滑过边框颜色
shadowColor: "#05EFF7",
// XY轴的偏移量
shadowOffsetX: 5,
shadowOffsetY: 5,
},
},
data: [],
zlevel: 0, //层级,层级大的会在层级小的上面
// 选中状态样式
select: {
itemStyle: {
color: "#97EFF4",
},
},
},
// 气泡
{
type: "effectScatter",
coordinateSystem: "geo", //使用地理坐标系
//要有对应的经纬度才显示,先经度再维度
data: [
{ name: "1", value: [113.61, 34.75] },
// { name: '2', value: [106.48,38.89] },
// { name: '3', value: [106.38,38.38] },
// { name: '4', value: [106.50,37.37] },
// { name: '5', value: [105.58,36.90] },
],
showEffectOn: "render", //绘制完成后显示特效
rippleEffect: {
scale: 10, // 波纹的最大缩放比例
brushType: "fill", // 波纹的绘制方式 stroke
},
hoverAnimation: true,
label: {
//图形上的文本标签
show: true,
formatter: "{b}",
position: "right",
fontWeight: 500,
fontSize: 10,
},
//默认样式
itemStyle: {
color: "#CC17FA",
shadowBlur: 10,
shadowColor: "#333",
},
//鼠标移入时样式
emphasis: {
show: false,
// 每个区域的颜色
// 鼠标滑过颜色
areaColor: "#97EFF4",
// 鼠标滑过边框颜色
shadowColor: "#05EFF7",
// XY轴的偏移量
shadowOffsetX: 5,
shadowOffsetY: 5,
},
zlevel: 1,
select: {
itemStyle: {
color: "#FFF",
},
},
},
],
效果 brushType: "fill",
效果 brushType: "stroke",
最后附上完整代码
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import HN from "../src/api/heNan.json";
type EChartsOption = echarts.EChartsOption;
onMounted(() => {
let option: EChartsOption;
let mapDom = document.getElementById("map");
let mapChart = echarts.init(mapDom);
//初始化元素
echarts.registerMap("HN", HN as any);
mapChart.setOption(
(option = {
tooltip: {
trigger: "item",
formatter: "{b}<br/>{c}",
},
visualMap: {
type: "piecewise",
pieces: [{ color: "#43B881" }],
},
geo: {
map: "HN",
// 最好这两个都关掉 否则拖拽和缩放会改变地图三点位置
// show: true,
// roam: true,
label: {
emphasis: {
show: false,
},
},
// 地图的背景色
itemStyle: {
normal: {
areaColor: "rgba(0,0,0,0.5)",
borderColor: "rgba(0,0,0,0.5)",
shadowColor: "rgba(0,0,0,0.5)",
shadowBlur: 30,
},
},
},
series: [
{
name: "河南",
type: "map",
map: "HN",
label: {
// 省份的名称是否显示
show: true,
// 未选字体颜色
color: "#fff",
// 字体大小
fontSize: 10,
},
itemStyle: {
normal: {
borderColor: "rgba(255, 255, 255, 0.4)",
areaColor: "rgba(18,77,178,0.2)",
borderWidth: 1,
// 虚化程度
shadowBlur: 1,
shadowColor: "rgba(189,243,249)",
},
emphasis: {
show: false,
// 每个区域的颜色
// 鼠标滑过颜色
areaColor: "#97EFF4",
// 鼠标滑过边框颜色
shadowColor: "#05EFF7",
// XY轴的偏移量
shadowOffsetX: 5,
shadowOffsetY: 5,
},
},
data: [],
zlevel: 0, //层级,层级大的会在层级小的上面
// 选中状态样式
select: {
itemStyle: {
color: "#97EFF4",
},
},
},
// 气泡
{
type: "effectScatter",
coordinateSystem: "geo", //使用地理坐标系
//要有对应的经纬度才显示,先经度再维度
data: [
{ name: "1", value: [113.61, 34.75] },
// { name: '2', value: [106.48,38.89] },
// { name: '3', value: [106.38,38.38] },
// { name: '4', value: [106.50,37.37] },
// { name: '5', value: [105.58,36.90] },
],
showEffectOn: "render", //绘制完成后显示特效
rippleEffect: {
scale: 10, // 波纹的最大缩放比例
brushType: "fill", // 波纹的绘制方式 stroke
},
hoverAnimation: true,
label: {
//图形上的文本标签
show: true,
formatter: "{b}",
position: "right",
fontWeight: 500,
fontSize: 10,
},
//默认样式
itemStyle: {
color: "#CC17FA",
shadowBlur: 10,
shadowColor: "#333",
},
//鼠标移入时样式
emphasis: {
show: false,
// 每个区域的颜色
// 鼠标滑过颜色
areaColor: "#97EFF4",
// 鼠标滑过边框颜色
shadowColor: "#05EFF7",
// XY轴的偏移量
shadowOffsetX: 5,
shadowOffsetY: 5,
},
zlevel: 1,
select: {
itemStyle: {
color: "#FFF",
},
},
},
],
})
);
});
</script>
<template>
<div
class="map"
id="map"
style="height: 55vw; width: 90%; margin-top: 18vw; background-color: black"
></div>
</template>
<style scoped lang="less"></style>