<script>
import { getXheliJLChart } from "@/api/index.js";
export default {
data() {
return {
mapData: [],
//流入飞线
inline: [],
// dom
chart: null,
// 初始place
place: "浙江省",
// 流入起始点
inStartPoint: {
// 大 右/大 上
浙江省: [118.552791, 31.267446],
杭州市: [118.852791, 30.867446],
湖州市: [119.452791, 31.267446],
嘉兴市: [120.482791, 31.067446],
绍兴市: [120.132791, 30.327446],
舟山市: [121.652791, 30.867446],
宁波市: [120.902791, 30.567446],
温州市: [119.852791, 28.667446],
丽水市: [118.852791, 28.967446],
台州市: [120.552791, 29.367446],
衢州市: [118.152791, 29.567446],
金华市: [119.552791, 29.767446],
},
};
},
created() {
// 调用接口 初始化市级echarts
this.init();
},
mounted() {},
methods: {
/**
* 获取区域数据
*/
init() {
getXheliJLChart({
year: 2022,
industry: "产业",
address: this.place,
}).then((res) => {
this.mapData = res.regionDetailList;
// 处理接口数据 按格式返回
this.mapData = this.mapData.map((item, index) => {
return {
name: item.regionName,
value: item.needPeopleMagnification,
};
});
if (this.chart) {
// 点击区下钻 设置option
this.setMapOption();
} else {
// 第一次进入时执行 初始化地图
this.initMap();
}
});
},
/**
* 初始化地图和事件
*/
initMap() {
let that = this;
// 获取dom元素
this.chart = this.$echarts.init(document.getElementById("map"));
// 点击空白处返回省级地图
this.chart.getZr().on("click", function (params) {
if (!params.target) {
if (that.place !== "浙江省") {
that.place = "浙江省";
that.init("浙江省");
}
}
});
// 区地图
this.chart.on("click", function (params) {
console.log(params.name);
// 子传父
that.$emit("place", params.name);
if (that.place === "浙江省") {
that.place = params.name;
// 调用区数据接口
that.init();
}
});
this.setMapOption();
},
/**
* 设置地图option
*/
setMapOption() {
// 清空
this.chart.clear();
let hz, hz_bg;
if (this.place === "浙江省") {
// 引用省地图json数据
hz = require("../../../../static/china_province/330000_full.json");
hz_bg = require("../../../../static/china_province/330000.json");
} else {
// 引用区地图json数据
hz = require(`../../../../static/zhejiang/${this.place}.json`);
hz_bg = require(`../../../../static/zhejiang/bg/${this.place}.json`);
}
// 获取区中心点
let arr = [];
hz.features.forEach((element, index) => {
arr.push([this.inStartPoint[this.place], element.properties.center]);
});
this.inline = arr;
// 注册地图
this.$echarts.registerMap("hz", hz);
this.$echarts.registerMap("hz_bg", hz_bg);
this.option = {
// 鼠标移入悬浮
tooltip: {
show: false,
formatter: "{b}:{c}",
},
geo: [
// 内部区背景色
{
geoIndex: 1,
map: "hz_bg",
itemStyle: {
areaColor: {
type: "linear",
x: 0.2,
y: 0,
x2: 1,
y2: 0.5,
colorStops: [
{
offset: 0,
color: "rgba(0, 162, 247, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0, 36, 109, 1)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
borderWidth: 2,
borderColor: "rgba(255,174,59,0.6)",
},
emphasis: {
disabled: true,
},
tooltip: {
show: false,
},
},
// 边框背景色
{
map: "hz",
show: true,
itemStyle: {
areaColor: "rgba(0,0,0,0)",
color: "rgba(0,0,0,0)",
shadowColor: "#00002A", // 外边框阴影色
shadowBlur: 10000, //外边框阴影
opacity: 1,
borderWidth: 1,
borderColor: "rgba(255,174,59,0.6)",
},
},
],
series: [
{
type: "map",
mapType: "hz",
silent: false, //鼠标移入区域变色 如果设置为true则无法高亮
label: {
show: true,
formatter: "{c}\n {b}",
color: "#fff",
},
itemStyle: {
normal: {
areaColor: "rgba(0,0,0,0)",
color: "rgba(0,0,0,0)",
},
emphasis: {
show: false,
},
// // emphasis: {
// // borderWidth: 0,
// // borderColor: "transparent",
// // //高亮区域颜色
// // // areaColor: "transparent",
// // },
},
//数据评分value
// 地图内部数据 name value
data: this.mapData,
// 名称映射
nameMap: {
临安区: "临安市",
奉化区: "奉化市",
玉环市: "玉环县",
龙港市: "龙岗市",
},
},
{
type: "lines",
coordinateSystem: "geo",
zlevel: 15,
// 图标
effect: {
show: true,
// 速度
period: 3,
delay: function () {
return Math.ceil(Math.random() * 1000);
},
// 箭头长度
trailLength: 0.3,
symbol: "arrow",
color: "#fff791",
symbolSize: 6,
},
lineStyle: {
normal: {
width: 1,
opacity: 0.1,
// 线的弧度
curveness: 0.3,
color: "#C2E9E7",
// 虚线类型
type: "solid",
},
},
data: this.inline,
},
], //各省地图颜色数据依赖value
};
this.chart.setOption(this.option);
},
},
};
</script>
echarts地图下钻&飞线
于 2022-04-07 16:48:49 首次发布