@ -1,10 +1,8 @@
< template >
< div >
< div class = "carcTitle" > 省内区域劳务协作撒点 < / div >
<!-- < div ref = "map" style = "width: 17 vw; height: 14.5 vw" > < / div > -- >
< div ref = "map" style = "width: 20vw; height: 17vw;left: -2vw;top: -2vw;" > < / div >
< div ref = "map" style = "width: 19 vw; height: 16 vw" > < / div >
< / div >
< / template >
< script setup >
@ -38,91 +36,150 @@ 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.39 9 , 31.13 0 , 0 ] , count : 0 } ,
{ name : "绵阳 " , value : [ 104.684185 , 31.473263 , 0 ] , count : 0 } ,
{ name : "广元 " , value : [ 105.83 4 , 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.5 4 , 0 ] , count : 0 } ,
{ name : "广安华蓥市 " , value : [ 106.7 9 , 30.4 0 , 0 ] , count : 0 } ,
{ name : "南充顺庆区 " , value : [ 106.10 , 30.80 , 0 ] , count : 0 } ,
{ name : "遂宁市大英县 " , value : [ 105.2 4 , 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 = ( ) => ( {
tooltip : {
trigger : "item" ,
formatter : ( params ) => {
if ( params . seriesType === "scatter3D" ) {
return ` ${ params . name } <br/>合作社数量: ${ params . data . count || 0 } ` ;
// 生成随机高度值函数
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 ) => {
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 : {
color : "rgba(27, 129, 150, 0.4) " ,
borderColor : "#61cfff ",
borderWidth : 2 ,
opacity : 0.75
} ,
emphasis : {
itemStyle : { color : "rgba(27, 129, 150, 0.65)" , opacity : 0.85 } ,
label : { color : "#ffff00" }
} ,
l ight: {
main : { intensity : 1.6 , shadow : true , shadowQuality : "high" , alpha : 3 5, beta : 15 } ,
ambient : { intensity : 0.35 }
} ,
shading : "lambert" ,
viewControl : {
distance : 110 ,
alpha : 45 ,
beta : 10 ,
} ,
groundPlane : { show : false } ,
postEffect : {
enable : true ,
bloom : {
geo3D : {
type : "map3D " ,
map : "sichuan ",
regionHeight : 6 ,
boxHeight : 2 ,
roam : false ,
label : {
show : false , // 隐藏地图区域标签,只显示散点
color : "#fff" ,
fontSize : calcResponsivePX ( 10 ) ,
fontWe ight: "bold" ,
borderWidth : 5 ,
borderColor : "rgba(40,40,41,0.48)"
} ,
itemStyle : {
color : "rgba(27,129,150,0.18)" ,
borderColor : "#61cfff" ,
borderWidth : 2 ,
opacity : 0.3 // 降低地图透明度,突出散点
} ,
emphasis : {
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
} ,
ambient : { intensity : 0.35 }
} ,
shading : "lambert" ,
viewControl : {
distance : 110 ,
alpha : 45 ,
beta : 10
} ,
groundPlane : { show : false } ,
postEffect : {
enable : true ,
bloomIntensity : 0.25
bloom: {
enable : true ,
bloomIntensity : 0.25
}
}
}
} ,
series : [
} ,
series : [
{
name : "城市点位(3D)" ,
type : "scatter3D" ,
coordinateSystem : "geo3D" ,
data : initialPoin ts. map ( p => ( {
data : pointsWithRandomHeigh ts. 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 ( ( ) => {