引入地图js
import { world } from "world.js)"
在echarts中注入地图
echarts.registerMap("world", world);
let WorldMap = echarts.init(this.$refs.WorldMap);
配置地图属性:
WorldMap.setOption({
title: {
text: "世界地图",
top: "3%",
left: "center",
textStyle: {
fontSize: 20,
fontWeight: 600,
color: "#fff",
},
},
tooltip: {
// 触发类型, 数据项图形触发
trigger: "item",
backgroundColor: "#fff",
textStyle: {
color: "#000",
},
},
series: [
{
type: "map",
/* 这里的map值需要和registerMap注册的名字相一致 */
map: "world",
roam: true, //是否开启鼠标缩放和平移漫游
geoIndex: 0, // 不可缺少,否则无tooltip 指示效果
label: {
normal: {
show: true, //显示省份标签
textStyle: { color: "#fff" }, //省份标签字体颜色
},
emphasis: {
//对应的鼠标悬浮效果
show: true,
textStyle: { color: "#fff" },
},
},
itemStyle: {
normal: {
borderWidth: 1.95, //区域边框宽度
borderColor: "#0550c3", //区域边框颜色
areaColor: "#000", //区域颜色
},
emphasis: {
borderWidth: 1.95, //鼠标滑过区域,区域边框宽度
borderColor: "#fff", //鼠标滑过区域,区域边框颜色
areaColor: "#ff6511", //鼠标滑过区域背景色
},
},
/* data:[{}] */
},
],
});
window.WorldMap = WorldMap;
},
};