Compare commits

...

2 Commits

2 changed files with 139 additions and 82 deletions

View File

@ -1,10 +1,8 @@
<template>
<div>
<div class="carcTitle">省内区域劳务协作撒点</div>
<!-- <div ref="map" style="width: 17vw; height: 14.5vw"></div> -->
<div ref="map" style="width: 20vw; height: 17vw;left: -2vw;top: -2vw;"></div>
<div ref="map" style="width: 19vw; height: 16vw"></div>
</div>
</template>
<script setup>
@ -38,24 +36,41 @@ const calcResponsivePX = (pxValue) => {
// 初始点位数据
const initialPoints = [
{ name: "攀枝花", value: [101.718, 26.582, 0], count: 0 },
{ name: "雅安", value: [103.009, 29.988, 0], count: 0 },
{ name: "眉山", value: [103.848, 30.082, 0], count: 0 },
{ name: "自贡", value: [104.777, 29.350, 0], count: 0 },
{ name: "泸州", value: [105.442, 28.871, 0], count: 0 },
{ name: "资阳", value: [104.628, 30.122, 0], count: 0 },
{ name: "遂宁", value: [105.576, 30.523, 0], count: 0 },
{ name: "广安", value: [106.636, 30.463, 0], count: 0 },
{ name: "德阳", value: [104.399, 31.130, 0], count: 0 },
{ name: "绵阳", value: [104.684185, 31.473263, 0], count: 0 },
{ name: "广元", value: [105.834, 32.435, 0], count: 0 },
{ name: "巴中", value: [106.753, 31.857, 0], count: 0 },
{ name: "达州", value: [107.467, 31.209, 0], count: 0 },
{ name: "南充", value: [106.110, 30.837, 0], count: 0 }
{ name: "绵阳市", value: [104.69,31.47, 0], count: 0 },
{ name: "广元市昭化区", value: [105.97,32.33, 0], count: 0 },
{ name: "巴中市恩阳区", value: [106.64,31.80, 0], count: 0 },
{ name: "达州市渠县", value: [106.98,30.84, 0], count: 0 },
{ name: "达州市开江县", value: [107.88,31.09, 0], count: 0 },
{ name: "达州市大竹县", value: [107.21,30.74, 0], count: 0 },
{ name: "广安市", value: [106.64,30.46, 0], count: 0 },
{ name: "广安市岳池县", value: [106.45,30.54, 0], count: 0 },
{ name: "广安华蓥市", value: [106.79,30.40, 0], count: 0 },
{ name: "南充顺庆区", value: [106.10,30.80, 0], count: 0 },
{ name: "遂宁市大英县", value: [105.24,30.60, 0], count: 0 },
{ name: "德阳市中江县", value: [104.69,31.04, 0], count: 0 },
{ name: "资阳市雁江区", value: [104.68,30.11, 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) => {
return points.map(point => ({
...point,
value: [point.value[0], point.value[1], Math.random() * (maxHeight - minHeight) + minHeight]
}));
};
// 获取动态配置 - 只展示 initialPoints 中的数据
const getChartOption = () => {
// 每次调用生成新的随机高度
const pointsWithRandomHeights = generateRandomHeights(initialPoints);
return {
tooltip: {
trigger: "item",
formatter: (params) => {
@ -63,6 +78,12 @@ const getChartOption = () => ({
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)
}
},
geo3D: {
@ -72,30 +93,41 @@ const getChartOption = () => ({
boxHeight: 2,
roam: false,
label: {
show: true,
color: "#CBF2FA",
show: false, // 隐藏地图区域标签,只显示散点
color: "#fff",
fontSize: calcResponsivePX(10),
fontWeight: "bold"
fontWeight: "bold",
borderWidth: 5,
borderColor: "rgba(40,40,41,0.48)"
},
itemStyle: {
color: "rgba(27, 129, 150, 0.4)",
color: "rgba(27,129,150,0.18)",
borderColor: "#61cfff",
borderWidth: 2,
opacity: 0.75
opacity: 0.3 // 降低地图透明度,突出散点
},
emphasis: {
itemStyle: { color: "rgba(27, 129, 150, 0.65)", opacity: 0.85 },
label: { color: "#ffff00" }
itemStyle: {
color: "rgba(27, 129, 150, 0.3)",
opacity: 0.5
},
label: { show: false }
},
light: {
main: { intensity: 1.6, shadow: true, shadowQuality: "high", alpha: 35, beta: 15 },
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,
beta: 10
},
groundPlane: { show: false },
postEffect: {
@ -111,18 +143,43 @@ const getChartOption = () => ({
name: "城市点位(3D)",
type: "scatter3D",
coordinateSystem: "geo3D",
data: initialPoints.map(p => ({
data: pointsWithRandomHeights.map(p => ({
name: p.name,
value: [p.value[0], p.value[1], 6],
count: p.count
value: p.value,
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",
symbolSize: calcResponsivePX(12),
symbol: "triangle", // 改为圆形,更明显
symbolSize: calcResponsivePX(12), // 增大符号尺寸
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(() => {

View File

@ -59,18 +59,18 @@
:type1="cardFourInfo.type1"
:type2="cardFourInfo.type2"
>
<el-carousel
:interval="8000"
type="card"
height="17vw"
indicator-position="none"
:autoplay="true"
>
<!-- <el-carousel-->
<!-- :interval="8000"-->
<!-- type="card"-->
<!-- height="17vw"-->
<!-- indicator-position="none"-->
<!-- :autoplay="true"-->
<!-- >-->
<!-- <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><LaborSystemFour /></el-carousel-item> -->
</el-carousel>
<!-- </el-carousel>-->
</enterprise-employment-card>
<enterprise-employment-card
style="margin-top: 0.625vw"