echarts 地图制作
echarts geo 地图，以绘制浙江省地图为案例（没有下转）
浙江省数据获取 json 地址：https://datav.aliyun.com/portal/school/atlas/area_selector
点击需要省份地图，下载坐标
目录下新建一个zhengjiang.js文件
代码片段
<template>
<div class="content">
<div
ref="charts"
:style="{ width: styleList.width, height: styleList.height }"
></div>
</div>
</template>
<script>
引入echarts 和 创建好的坐标文件
import * as echarts from "echarts";
import zjData from "../../assets/js/zhejiang";
export default {
props: ["styleList"], // 根据不同地图的需求传入不同的值
data() {
return {
};
},
created() {
this.$nextTick(() => {
this.initCharts();
});
},
watch: {},
methods: {
initCharts() {
const that = this;
const charts = echarts.init(this.$refs["charts"]);
const option = {
// 背景颜色
backgroundColor: "#081629",
// 提示浮窗样式
// tooltip: {
// show: true,
// trigger: "item",
// alwaysShowContent: false,
// backgroundColor: "#0C121C",
// borderColor: "rgba(0, 0, 0, 0.16);",
// hideDelay: 100,
// triggerOn: "mousemove",
// enterable: true,
// textStyle: {
// color: "#DADADA",
// fontSize: "12",
// width: 20,
// height: 30,
// overflow: "break",
// },
// showDelay: 100,
// },
// 地图配置
geo: {
map: "zj",
roam: this.styleList.isRoam, //关闭拖拽
zoom: this.styleList.zoom || 1.2, // 缩放的大小
left: this.styleList.left, // 地图的位置
top: this.styleList.top, // 地图的位置
center:
this.styleList.content.length > 0
? this.styleList.content
: [122.99, 29.1], // 地图的中心点
label: {
// 通常状态下的样式
normal: {
show: false,
textStyle: {
color: "#fff",
},
},
// 鼠标放上去的样式
emphasis: {
textStyle: {
color: "#fff",
},
},
},
// 地图区域的样式设置
itemStyle: {
normal: {
borderColor: "rgba(147, 235, 248, 1)",
borderWidth: 1,
areaColor: "#2cc7f5",
borderColor: "#081629", //地图区域的边框
borderWidth: 0.6,
// 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
// },
// shadowColor: "rgba(128, 217, 248, 1)",
// shadowOffsetX: -2,
// shadowOffsetY: 2,
// shadowBlur: 10,
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: "#389BB7",
borderWidth: 0,
},
},
},
series: [
{
type: "scatter", //effectScatter
coordinateSystem: "geo",
// effectType: "ripple",
// showEffectOn: "render",
// rippleEffect: {
// period: 10,
// scale: 10,
// brushType: "fill",
// },
symbol: `image://${this.styleList.url}`, // 自定义散点样式
symbolSize: this.styleList.urlSize, // 散点大小
hoverAnimation: true,
itemStyle: {
normal: {
},
},
zlevel: 1,
data: that.styleList.mapData, // 散点数据
},
],
};
// 地图注册，第一个参数的名字必须和option.geo.map一致
echarts.registerMap("zj", zjData);
charts.setOption(option);
鼠标移入事件
charts.off("mousemove");
charts.on("mousemove", (params) => {
});
鼠标移出事件
charts.off("mouseout");
charts.on("mouseout", (params) => {
});
},
},
};
</script>传入地图组件数据
styleList: {
width: "100%",
height: "950px",
mapData: [],
url: require("../../assets/img/trade/address1.png"),
urlSize: [11, 11],
isRoam: false, // 缩放大小
left: "0",
top: "20%",
zoom: 3,
content: [121.0, 28.72],
},