修改地图撒点数据处理
This commit is contained in:
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="carcTitle">省内区域劳务协作撒点</div>
|
<div class="carcTitle">省内区域劳务协作撒点</div>
|
||||||
<div ref="map" style="width: 17vw; height: 14.5vw"></div>
|
<div ref="map" style="width: 19vw; height: 16vw"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -36,91 +36,150 @@ const calcResponsivePX = (pxValue) => {
|
|||||||
|
|
||||||
// 初始点位数据
|
// 初始点位数据
|
||||||
const initialPoints = [
|
const initialPoints = [
|
||||||
{ name: "攀枝花", value: [101.718, 26.582, 0], count: 0 },
|
{ name: "绵阳市", value: [104.69,31.47, 0], count: 0 },
|
||||||
{ name: "雅安", value: [103.009, 29.988, 0], count: 0 },
|
{ name: "广元市昭化区", value: [105.97,32.33, 0], count: 0 },
|
||||||
{ name: "眉山", value: [103.848, 30.082, 0], count: 0 },
|
{ name: "巴中市恩阳区", value: [106.64,31.80, 0], count: 0 },
|
||||||
{ name: "自贡", value: [104.777, 29.350, 0], count: 0 },
|
{ name: "达州市渠县", value: [106.98,30.84, 0], count: 0 },
|
||||||
{ name: "泸州", value: [105.442, 28.871, 0], count: 0 },
|
{ name: "达州市开江县", value: [107.88,31.09, 0], count: 0 },
|
||||||
{ name: "资阳", value: [104.628, 30.122, 0], count: 0 },
|
{ name: "达州市大竹县", value: [107.21,30.74, 0], count: 0 },
|
||||||
{ name: "遂宁", value: [105.576, 30.523, 0], count: 0 },
|
{ name: "广安市", value: [106.64,30.46, 0], count: 0 },
|
||||||
{ name: "广安", value: [106.636, 30.463, 0], count: 0 },
|
{ name: "广安市岳池县", value: [106.45,30.54, 0], count: 0 },
|
||||||
{ name: "德阳", value: [104.399, 31.130, 0], count: 0 },
|
{ name: "广安华蓥市", value: [106.79,30.40, 0], count: 0 },
|
||||||
{ name: "绵阳", value: [104.684185, 31.473263, 0], count: 0 },
|
{ name: "南充顺庆区", value: [106.10,30.80, 0], count: 0 },
|
||||||
{ name: "广元", value: [105.834, 32.435, 0], count: 0 },
|
{ name: "遂宁市大英县", value: [105.24,30.60, 0], count: 0 },
|
||||||
{ name: "巴中", value: [106.753, 31.857, 0], count: 0 },
|
{ name: "德阳市中江县", value: [104.69,31.04, 0], count: 0 },
|
||||||
{ name: "达州", value: [107.467, 31.209, 0], count: 0 },
|
{ name: "资阳市雁江区", value: [104.68,30.11, 0], count: 0 },
|
||||||
{ name: "南充", value: [106.110, 30.837, 0], count: 0 }
|
{ name: "雅安市荥经县", value: [102.85,29.80, 0], count: 0 },
|
||||||
|
{ name: "雅安市天全县", value: [102.76,30.07, 0], count: 0 },
|
||||||
|
{ name: "眉山市青神县", value: [103.85,29.84, 0], count: 0 },
|
||||||
|
{ name: "自贡贡井区", value: [104.72,29.35, 0], count: 0 },
|
||||||
|
{ name: "泸州市", value: [105.45,28.88, 0], count: 0 },
|
||||||
|
{ name: "攀枝花市", value: [101.73,26.59, 0], count: 0 },
|
||||||
];
|
];
|
||||||
|
|
||||||
// 获取动态配置
|
// 生成随机高度值函数
|
||||||
const getChartOption = () => ({
|
const generateRandomHeights = (points, minHeight = 10, maxHeight = 25) => {
|
||||||
tooltip: {
|
return points.map(point => ({
|
||||||
trigger: "item",
|
...point,
|
||||||
formatter: (params) => {
|
value: [point.value[0], point.value[1], Math.random() * (maxHeight - minHeight) + minHeight]
|
||||||
if (params.seriesType === "scatter3D") {
|
}));
|
||||||
return `${params.name}<br/>合作社数量:${params.data.count || 0}`;
|
};
|
||||||
|
|
||||||
|
// 获取动态配置 - 只展示 initialPoints 中的数据
|
||||||
|
const getChartOption = () => {
|
||||||
|
// 每次调用生成新的随机高度
|
||||||
|
const pointsWithRandomHeights = generateRandomHeights(initialPoints);
|
||||||
|
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
formatter: (params) => {
|
||||||
|
if (params.seriesType === "scatter3D") {
|
||||||
|
return `${params.name}<br/>合作社数量:${params.data.count || 0}`;
|
||||||
|
}
|
||||||
|
return params.name;
|
||||||
|
},
|
||||||
|
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||||
|
borderColor: "#30DCFF",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: calcResponsivePX(12)
|
||||||
}
|
}
|
||||||
return params.name;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
geo3D: {
|
|
||||||
type: "map3D",
|
|
||||||
map: "sichuan",
|
|
||||||
regionHeight: 6,
|
|
||||||
boxHeight: 2,
|
|
||||||
roam: false,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
color: "#CBF2FA",
|
|
||||||
fontSize: calcResponsivePX(10),
|
|
||||||
fontWeight: "bold"
|
|
||||||
},
|
},
|
||||||
itemStyle: {
|
geo3D: {
|
||||||
color: "rgba(27, 129, 150, 0.4)",
|
type: "map3D",
|
||||||
borderColor: "#61cfff",
|
map: "sichuan",
|
||||||
borderWidth: 2,
|
regionHeight: 6,
|
||||||
opacity: 0.75
|
boxHeight: 2,
|
||||||
},
|
roam: false,
|
||||||
emphasis: {
|
label: {
|
||||||
itemStyle: { color: "rgba(27, 129, 150, 0.65)", opacity: 0.85 },
|
show: false, // 隐藏地图区域标签,只显示散点
|
||||||
label: { color: "#ffff00" }
|
color: "#fff",
|
||||||
},
|
fontSize: calcResponsivePX(10),
|
||||||
light: {
|
fontWeight: "bold",
|
||||||
main: { intensity: 1.6, shadow: true, shadowQuality: "high", alpha: 35, beta: 15 },
|
borderWidth: 5,
|
||||||
ambient: { intensity: 0.35 }
|
borderColor: "rgba(40,40,41,0.48)"
|
||||||
},
|
},
|
||||||
shading: "lambert",
|
itemStyle: {
|
||||||
viewControl: {
|
color: "rgba(27,129,150,0.18)",
|
||||||
distance: 110,
|
borderColor: "#61cfff",
|
||||||
alpha: 45,
|
borderWidth: 2,
|
||||||
beta: 10,
|
opacity: 0.3 // 降低地图透明度,突出散点
|
||||||
},
|
},
|
||||||
groundPlane: { show: false },
|
emphasis: {
|
||||||
postEffect: {
|
itemStyle: {
|
||||||
enable: true,
|
color: "rgba(27, 129, 150, 0.3)",
|
||||||
bloom: {
|
opacity: 0.5
|
||||||
|
},
|
||||||
|
label: { show: false }
|
||||||
|
},
|
||||||
|
light: {
|
||||||
|
main: {
|
||||||
|
intensity: 1.6,
|
||||||
|
shadow: true,
|
||||||
|
shadowQuality: "high",
|
||||||
|
alpha: 35,
|
||||||
|
beta: 15
|
||||||
|
},
|
||||||
|
ambient: { intensity: 0.35 }
|
||||||
|
},
|
||||||
|
shading: "lambert",
|
||||||
|
viewControl: {
|
||||||
|
distance: 110,
|
||||||
|
alpha: 45,
|
||||||
|
beta: 10
|
||||||
|
},
|
||||||
|
groundPlane: { show: false },
|
||||||
|
postEffect: {
|
||||||
enable: true,
|
enable: true,
|
||||||
bloomIntensity: 0.25
|
bloom: {
|
||||||
|
enable: true,
|
||||||
|
bloomIntensity: 0.25
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
series: [
|
||||||
series: [
|
|
||||||
{
|
{
|
||||||
name: "城市点位(3D)",
|
name: "城市点位(3D)",
|
||||||
type: "scatter3D",
|
type: "scatter3D",
|
||||||
coordinateSystem: "geo3D",
|
coordinateSystem: "geo3D",
|
||||||
data: initialPoints.map(p => ({
|
data: pointsWithRandomHeights.map(p => ({
|
||||||
name: p.name,
|
name: p.name,
|
||||||
value: [p.value[0], p.value[1], 6],
|
value: p.value,
|
||||||
count: p.count
|
count: p.count,
|
||||||
|
// 为每个点单独配置 label
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: [0, 0, p.value[2] + 3], // 3D坐标 [x, y, z],在点上方3个单位
|
||||||
|
formatter: p.name,
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||||
|
borderWidth: 1,
|
||||||
|
padding: [2, 6],
|
||||||
|
borderRadius: 3,
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 10
|
||||||
|
}
|
||||||
})),
|
})),
|
||||||
symbol: "triangle",
|
symbol: "triangle", // 改为圆形,更明显
|
||||||
symbolSize: calcResponsivePX(12),
|
symbolSize: calcResponsivePX(12), // 增大符号尺寸
|
||||||
itemStyle: { color: "#FFBE34" },
|
itemStyle: { color: "#FFBE34" },
|
||||||
label: { show: false }
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// position: "top",
|
||||||
|
// formatter: "{b}", // 只显示名称
|
||||||
|
// color: "#FFF",
|
||||||
|
// fontSize: calcResponsivePX(11),
|
||||||
|
// fontWeight: "bold",
|
||||||
|
// backgroundColor: "rgba(0,0,0,0.8)",
|
||||||
|
// // borderColor: "#FFBE34",
|
||||||
|
// borderWidth: calcResponsivePX(1),
|
||||||
|
// padding: [4, 6],
|
||||||
|
// borderRadius: calcResponsivePX(1)
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 处理图表重绘(防抖优化)
|
// 处理图表重绘(防抖优化)
|
||||||
const handleChartResize = debounce(() => {
|
const handleChartResize = debounce(() => {
|
||||||
|
|||||||
@ -59,18 +59,18 @@
|
|||||||
:type1="cardFourInfo.type1"
|
:type1="cardFourInfo.type1"
|
||||||
:type2="cardFourInfo.type2"
|
:type2="cardFourInfo.type2"
|
||||||
>
|
>
|
||||||
<el-carousel
|
<!-- <el-carousel-->
|
||||||
:interval="8000"
|
<!-- :interval="8000"-->
|
||||||
type="card"
|
<!-- type="card"-->
|
||||||
height="17vw"
|
<!-- height="17vw"-->
|
||||||
indicator-position="none"
|
<!-- indicator-position="none"-->
|
||||||
:autoplay="true"
|
<!-- :autoplay="true"-->
|
||||||
>
|
<!-- >-->
|
||||||
<!-- <el-carousel-item><LaborSystemOne /></el-carousel-item> -->
|
<!-- <el-carousel-item><LaborSystemOne /></el-carousel-item> -->
|
||||||
<el-carousel-item class="isVisibleImg"><LaborSystemTwo /></el-carousel-item>
|
<div class="isVisibleImg"><LaborSystemTwo /></div>
|
||||||
<!-- <el-carousel-item><LaborSystemThree /></el-carousel-item> -->
|
<!-- <el-carousel-item><LaborSystemThree /></el-carousel-item> -->
|
||||||
<!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> -->
|
<!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> -->
|
||||||
</el-carousel>
|
<!-- </el-carousel>-->
|
||||||
</enterprise-employment-card>
|
</enterprise-employment-card>
|
||||||
<enterprise-employment-card
|
<enterprise-employment-card
|
||||||
style="margin-top: 0.625vw"
|
style="margin-top: 0.625vw"
|
||||||
|
|||||||
Reference in New Issue
Block a user