直接上源码
<template>
<div class="bg">
<div class="zindex">
<div id="mapLine"></div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import { mapJson } from "../../../../assets/js/map_js/gansu.js";
export default {
data() {
return {};
},
mounted() {
this.$nextTick(() => {
this.getMap();
});
},
methods: {
getMap() {
var dom = document.getElementById("mapLine");
var myChart = echarts.init(dom);
var option;
var geoJson = mapJson;
myChart.showLoading();
myChart.hideLoading();
echarts.registerMap("gansu", geoJson);
myChart.setOption(
(option = {
//地理坐标系组件。地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制散点图,线集。
geo: {
z: 5,
show: true,
map: "gansu",
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: "80%", //地图大小
// zoom: 0.65, //地图缩放比例
roam: false,
label: {
// show: true,
fontFamily: " Microsoft YaHei",
fontSize: 12,
color: "#fff",
},
itemStyle: {
//每一块区域的样式
normal: {
areaColor: "#00D3FD",
borderColor: "#0F5A69",
borderWidth: 1,
},
shadowColor: "rgba(5,79,94,0.9)",
shadowBlur: 2,
shadowOffsetX: -5,
shadowOffsetY: 10,
},
// 鼠标经过样式--区域颜色、和提示
emphasis: {
label: {
show: true,
color: "#00D3FD",
fontSize: "12",
},
itemStyle: {
borderColor: "#0F5A69",
borderWidth: 2,
areaColor: "#DEF0F3",
},
},
select: {
disabled: true, //不能点击地图
},
// 对不同的区块进行着色
regions: [
{
name: "兰州市",
itemStyle: {
areaColor: "#00B346",
},
},
{
name: "陇南市",
itemStyle: {
areaColor: "#00B346",
},
},
{
name: "白银市",
itemStyle: {
areaColor: "#00B346",
},
},
{
name: "金昌市",
itemStyle: {
areaColor: "#00B346",
},
},
],
},
series: [
// 地图的样式---主要是为了添加阴影
{
type: "map",
map: "gansu",
layoutCenter: ["50%", "50%"],
layoutSize: "80%",
roam: false,
itemStyle: {
normal: {
shadowColor: "rgba(5,79,94,0.9)",
shadowBlur: 2,
shadowOffsetX: -5,
shadowOffsetY: 10,
},
},
},
// 线的样式
{
type: "lines",
coordinateSystem: "geo",
zlevel: 5,
// effect: {
// show: true,
// period: 2, //箭头指向速度,值越小速度越快
// trailLength: 0.2, //特效尾迹长度[0,1]值越大,尾迹越长重
// symbol: "triangle", //箭头图标
// symbolSize: 5, //图标大小
// color: "#37F6E0", // 图标颜色
// },
lineStyle: {
normal: {
type: [3, 5],
dashOffset: 5,
show: true,
width: 2, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0, //尾迹线条曲直度
color: "#37F6E0", // 飞线颜色
},
color: "#37F6E0",
},
label: {
show: true,
position: "start",
formatter: function (params) {
//文本提示框
return (
"\n\n{title|" + "兰州市" + "}\n{value|" + "1203万" + "}"
);
},
width: 100,
height: 100,
backgroundColor: {
image:
"https://scshop-api.yuanzhankeji.com/adminApi/image/2022126/30a7b691-bdd2-4b55-b98b-28283364d671.png",
},
rich: {
//标题样式
title: {
height: 50,
width: 100,
align: "center",
lineHeight: 30,
fontSize: 14,
color: "#A7D4C6",
},
value: {
//内容样式
height: 50,
width: 100,
lineHeight: 30,
fontSize: 14,
color: "#00FFB5",
align: "center",
},
},
},
data: [
{
coords: [
[108, 40.8], // 起点
[104.173606, 36.54568], // 终点
],
},
],
},
// 线的样式
{
type: "lines",
coordinateSystem: "geo",
zlevel: 5,
// effect: {
// show: true,
// period: 2, //箭头指向速度,值越小速度越快
// trailLength: 0.2, //特效尾迹长度[0,1]值越大,尾迹越长重
// symbol: "triangle", //箭头图标
// symbolSize: 5, //图标大小
// color: "#37F6E0", // 图标颜色
// },
lineStyle: {
normal: {
type: [3, 5],
dashOffset: 5,
show: true,
width: 2, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0, //尾迹线条曲直度
color: "#37F6E0", // 飞线颜色
},
color: "#37F6E0",
},
label: {
show: true,
position: "start",
formatter: function (params) {
//文本提示框
return "\n{title|" + "甘南" + "} \n{value|" + "1203万" + "}";
},
width: 80,
height: 80,
backgroundColor: {
image:
"https://scshop-api.yuanzhankeji.com/adminApi/image/2022126/30a7b691-bdd2-4b55-b98b-28283364d671.png",
},
rich: {
//标题样式
title: {
height: 40,
width: 80,
align: "center",
lineHeight: 25,
fontSize: 14,
color: "#A7D4C6",
},
value: {
//内容样式
height: 40,
width: 80,
lineHeight: 25,
fontSize: 14,
align: "center",
color: "#00FFB5",
},
},
},
data: [
{
coords: [
[95.5, 35.5], // 起点
[103.173606, 34.54568], // 终点
],
},
],
},
// 线的样式
{
type: "lines",
coordinateSystem: "geo",
zlevel: 5,
// effect: {
// show: true,
// period: 2, //箭头指向速度,值越小速度越快
// trailLength: 0.2, //特效尾迹长度[0,1]值越大,尾迹越长重
// symbol: "triangle", //箭头图标
// symbolSize: 5, //图标大小
// color: "#37F6E0", // 图标颜色
// },
lineStyle: {
normal: {
type: [3, 5],
dashOffset: 5,
show: true,
width: 2, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0, //尾迹线条曲直度
color: "#37F6E0", // 飞线颜色
},
color: "#37F6E0",
},
label: {
show: true,
position: "start",
formatter: function (params) {
//文本提示框
return (
"\n\n{title|" + "酒泉市" + "}\n{value|" + "1203万" + "}"
);
},
width: 100,
height: 100,
backgroundColor: {
image:
"https://scshop-api.yuanzhankeji.com/adminApi/image/2022126/30a7b691-bdd2-4b55-b98b-28283364d671.png",
},
rich: {
//标题样式
title: {
height: 50,
width: 100,
align: "center",
lineHeight: 30,
fontSize: 14,
color: "#A7D4C6",
},
value: {
//内容样式
height: 50,
width: 100,
lineHeight: 30,
fontSize: 14,
color: "#00FFB5",
align: "center",
},
},
},
data: [
{
coords: [
[89, 40.5], // 起点
[95, 39.744023], // 终点 酒泉
],
},
],
},
// 线的样式
{
type: "lines",
coordinateSystem: "geo",
zlevel: 5,
// effect: {
// show: true,
// period: 2, //箭头指向速度,值越小速度越快
// trailLength: 0.2, //特效尾迹长度[0,1]值越大,尾迹越长重
// symbol: "triangle", //箭头图标
// symbolSize: 5, //图标大小
// color: "#37F6E0", // 图标颜色
// },
lineStyle: {
normal: {
type: [3, 5],
dashOffset: 5,
show: true,
width: 2, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0, //尾迹线条曲直度
color: "#37F6E0", // 飞线颜色
},
color: "#37F6E0",
},
label: {
show: true,
position: "start",
formatter: function (params) {
//文本提示框
return "\n{title|" + "陇南市" + "}\n{value|" + "1203万" + "}";
},
width: 80,
height: 80,
backgroundColor: {
image:
"https://scshop-api.yuanzhankeji.com/adminApi/image/2022126/30a7b691-bdd2-4b55-b98b-28283364d671.png",
},
rich: {
//标题样式
title: {
height: 40,
width: 80,
align: "center",
lineHeight: 25,
fontSize: 14,
color: "#A7D4C6",
},
value: {
//内容样式
height: 40,
width: 80,
lineHeight: 25,
fontSize: 14,
color: "#00FFB5",
align: "center",
},
},
},
data: [
{
coords: [
[108, 33.5], // 起点
[104.929379, 33.388598], // 终点
],
},
],
},
],
})
);
if (option && typeof option === "object") {
myChart.setOption(option);
}
},
},
};
</script>
<style scoped>
#mapLine {
width: 900px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -450px;
/* transform-origin: center bottom;
transform: rotateX(55deg) translateZ(80px) ; */
}
.bg {
width: 100%;
height: 88vh;
background-color: #000C14;
/* background: url("../../../../assets/img/bj.png") no-repeat center; */
/* background-size: 100% 100%; */
}
.zindex {
width: 500px;
height: 500px;
/* background: url("../../../../assets/img/bg.png") no-repeat center; */
/* background-size: 80% 80%; */
margin: 0 auto;
position: relative;
/* transform-style: preserve-3d;
perspective: 800px; */
}
</style>