This commit is contained in:
zmj 2023-12-18 23:03:55 +08:00
parent 56b6e695b4
commit c8805b33c5
2 changed files with 925 additions and 672 deletions

View File

@ -1,9 +1,9 @@
<template>
<div>
<div style="width: 45vw;height: 50vh;" id="chart2"></div>
<div style="width: 45vw;height: 50vh;" id="chart2" v-show="showArea"></div>
<div style="width: 45vw;height: 50vh;" id="chart3" v-show="!showArea"></div>
</div>
</template>
@ -42,9 +42,31 @@ import * as echarts from 'echarts';
import "echarts-gl"
import geoJson from "/static/jsonData/luxian_geo.js"
import { useRouter } from "vue-router"
const showArea = (ref(true))
const router = useRouter()
const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
const deepCopy = (obj) => {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
let copy = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
copy[key] = deepCopy(obj[key]);
}
}
return copy;
}
const pointerFn = () => {
let list = []
geoJson.center.forEach((item, index) => {
@ -64,12 +86,11 @@ const pointerFn = () => {
})
return list
}
onMounted(() => {
const initAreaMap=()=>{
var mapName = 'lz';
const myChart = document.getElementById("chart2")
/*获取地图数据*/
let option = {
geo: [
@ -273,17 +294,249 @@ onMounted(() => {
};
document.getElementById("chart2").removeAttribute('_echarts_instance_');
echarts.registerMap(mapName, geoJson)
const bg = echarts.init(myChart)
bg.setOption(option);
bg.on('click', function (params) {
router.push("/detail?town="+params.name||params.value)
initTownMap(params.name || params.value)
// router.push("/detail?town="+params.name||params.value)
});
}
const initTownMap=(name)=>{
const townJson = deepCopy(geoJson)
townJson.features = townJson.features.filter((item) => {
return item.properties.name == name
})
showArea.value=false
var mapName = 'town';
const myChart = document.getElementById("chart3")
let option = {
geo: [
{
type: "map",
map: mapName,
aspectScale: 1,
zoom: 1.2,
layoutCenter: ["50%", "51%"],
layoutSize: "110%",
roam: false,
label: {
emphasis: {
show: false
}
},
show: true,
map: mapName,
zoom: 1.2,
aspectScale: 1,
roam: false,
itemStyle: {
normal: {
areaColor: 'transparent',
},
emphasis: {
areaColor: {
type: 'radial', // linear 线 radial
x: 0.5, // 0.5
y: 0.5, // 0.5
r: 1,
colorStops: [
{
offset: 0, color: '#A46759' // 0%
},
{
offset: 0.1, color: '#A46759' // 0%
},
{
offset: 1, color: '#FFB821' // 100%
}],
}
// borderWidth: 0
}
},
},
{
type: "map",
map: mapName,
zlevel: -1,
aspectScale: 1,
zoom: 1.2,
layoutCenter: ["50%", "51%"],
layoutSize: "110%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(17, 149, 216,0.6)",
borderColor: "#5AD0E0",
shadowColor: "rgba(172, 122, 255,0.5)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "rgba(5,21,35,0.1)",
},
},
},
{
type: "map",
map: mapName,
zlevel: -1,
aspectScale: 1,
zoom: 1.2,
layoutCenter: ["50%", "52%"],
layoutSize: "110%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(17, 149, 216,0.6)",
borderColor: "#5AD0E0",
shadowColor: "rgba(172, 122, 255,0.5)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "rgba(5,21,35,0.1)",
},
},
},
{
type: "map",
map: mapName,
zlevel: -2,
aspectScale: 1,
zoom: 1.2,
layoutCenter: ["50%", "53%"],
layoutSize: "110%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "rgba(17, 149, 216,0.4)",
borderColor: "#5AD0E0",
shadowColor: "rgba(172, 122, 255,0.5)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "rgba(5,21,35,0.1)",
},
},
},
{
type: "map",
map: mapName,
zlevel: -4,
aspectScale: 1,
zoom: 1.2,
layoutCenter: ["50%", "54%"],
layoutSize: "110%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 5,
// borderColor: "rgba(11, 43, 97,0.8)",
borderColor: "rgba(5,9,57,0.8)",
shadowColor: "rgba(29, 111, 165,0.8)",
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: "rgba(5,21,35,0.1)",
},
},
},
],
series: [
{
name: '资产数',
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
period: 4, //
brushType: 'fill', // stroke, fill
scale: 12, //
number: 2,
},
//
symbolSize: function (val) {
return 4
// return val[2] / 10;
},
markPoint: {
// data: pointerFn()
},
// data: (() => {
// let data = {
// : geoJson.center
// }
// let finalData = []
// Object.keys(data).map((i, index) => {
// let child = data[i].map((row, index) => ({
// value: row,
// itemStyle: {
// color: index == geoJson.center.length - 1 ? '#FEB821' : '#F0733A',
// },
// }))
// finalData = [...finalData, ...child]
// })
// return finalData
// })(),
},
],
};
// document.getElementById("chart3").removeAttribute('_echarts_instance_');
echarts.registerMap(mapName, townJson)
const bg = echarts.init(myChart)
bg.setOption(option);
bg.on('click', function (params) {
initTownMap(params.name || params.value)
// router.push("/detail?town="+params.name||params.value)
});
}
onMounted(() => {
initAreaMap()
})
</script>

1326
yarn.lock

File diff suppressed because it is too large Load Diff