|
|
|
@ -5,6 +5,16 @@
|
|
|
|
|
<Numbox class="num-box block-box" /> |
|
|
|
|
<Tabber class="tabber-box" /> |
|
|
|
|
<Norm class="block-box nomr-box" /> |
|
|
|
|
<section class="legend"> |
|
|
|
|
<div class="legend-item"> |
|
|
|
|
<span class="legend-text color-#58D764">绿色柱</span> |
|
|
|
|
<span class="legend-label">区域企业数占比</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="legend-item"> |
|
|
|
|
<span class="legend-text color-#FBE947">黄色柱</span> |
|
|
|
|
<span class="legend-label">区域任务数占比</span> |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
<section class="map z-2"> |
|
|
|
|
<charts :options="mapOption" ref="mapChartRef" class="mapChart" /> |
|
|
|
|
</section> |
|
|
|
@ -134,7 +144,7 @@ const mapOption: any = ref({
|
|
|
|
|
fontWeight: 'bold', |
|
|
|
|
fontSize: 14, |
|
|
|
|
fontStyle: 'italic', |
|
|
|
|
formatter: (v) => { |
|
|
|
|
formatter: () => { |
|
|
|
|
return `AQI 25` |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
@ -321,7 +331,10 @@ const initMap = () => {
|
|
|
|
|
color: '#fff', |
|
|
|
|
fontSize: 10 |
|
|
|
|
}, |
|
|
|
|
data: [dataItem.name] |
|
|
|
|
nameTextStyle: { |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
data: [dataItem.name, ''] |
|
|
|
|
}) |
|
|
|
|
//针对每个城市数据添加y轴 |
|
|
|
|
mapOption.value.yAxis.push({ |
|
|
|
@ -366,12 +379,53 @@ const initMap = () => {
|
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#56ca00' |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
show: true, |
|
|
|
|
position: 'top', |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
data: [value1] |
|
|
|
|
label: { |
|
|
|
|
show: true, |
|
|
|
|
position: 'top', |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{ |
|
|
|
|
value: value1, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(251, 233, 71, 1)' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: value2, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(88, 215, 100, 1)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}) |
|
|
|
|
mapOption.value.series.push({ |
|
|
|
|
name: `${dataItem.name}1`, |
|
|
|
|
type: 'pictorialBar', |
|
|
|
|
coordinateSystem: 'cartesian2d', |
|
|
|
|
xAxisIndex: idx, |
|
|
|
|
yAxisIndex: idx, |
|
|
|
|
symbolSize: [6, 3], |
|
|
|
|
symbolOffset: [0, -1], |
|
|
|
|
symbolPosition: 'end', |
|
|
|
|
symbol: 'circle', |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
}, |
|
|
|
|
data: [ |
|
|
|
|
{ |
|
|
|
|
value: value1, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(251, 233, 71, 1)' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: value2, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(88, 215, 100, 1)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}) |
|
|
|
|
mapOption.value.series.push({ |
|
|
|
|
name: `${dataItem.name}2`, |
|
|
|
@ -381,24 +435,97 @@ const initMap = () => {
|
|
|
|
|
yAxisIndex: idx, |
|
|
|
|
zLevel: 3, |
|
|
|
|
barWidth: 6, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#ffe700', |
|
|
|
|
fontSize:10, |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
show: true, |
|
|
|
|
show: false, |
|
|
|
|
position: 'top', |
|
|
|
|
color: '#fff' |
|
|
|
|
}, |
|
|
|
|
data: [value2] |
|
|
|
|
barGap: '-100%', |
|
|
|
|
data: [ |
|
|
|
|
{ |
|
|
|
|
value: 100, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(251, 233, 71, .2)' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 100, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(88, 215, 100, .2)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}) |
|
|
|
|
mapOption.value.series.push({ |
|
|
|
|
name: `${dataItem.name}3`, |
|
|
|
|
type: 'pictorialBar', |
|
|
|
|
coordinateSystem: 'cartesian2d', |
|
|
|
|
xAxisIndex: idx, |
|
|
|
|
yAxisIndex: idx, |
|
|
|
|
symbolPosition: 'end', |
|
|
|
|
symbol: 'circle', |
|
|
|
|
zLevel: 3, |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
}, |
|
|
|
|
symbolSize: [6, 3], |
|
|
|
|
symbolOffset: [0, -1], |
|
|
|
|
barGap: '-100%', |
|
|
|
|
data: [ |
|
|
|
|
{ |
|
|
|
|
value: 100, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(251, 233, 71, .2)' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 100, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(88, 215, 100, .2)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}) |
|
|
|
|
mapOption.value.series.push({ |
|
|
|
|
name: `${dataItem.name}3`, |
|
|
|
|
type: 'pictorialBar', |
|
|
|
|
coordinateSystem: 'cartesian2d', |
|
|
|
|
xAxisIndex: idx, |
|
|
|
|
yAxisIndex: idx, |
|
|
|
|
zLevel: 3, |
|
|
|
|
symbolPosition: 'end', |
|
|
|
|
symbol: 'circle', |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
}, |
|
|
|
|
barGap: '-100%', |
|
|
|
|
symbolSize: [6, 3], |
|
|
|
|
symbolOffset: [0, -1], |
|
|
|
|
data: [ |
|
|
|
|
{ |
|
|
|
|
value: 0, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(251, 233, 71, 1)' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
value: 0, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: 'rgba(88, 215, 100, 1)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
observer = new ResizeObserver(handlerResize) |
|
|
|
|
observer.observe(mapWrapperRef.value) |
|
|
|
|
initMap() |
|
|
|
|
nextTick(() => { |
|
|
|
|
initMap() |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
onUnmounted(() => { |
|
|
|
@ -411,6 +538,7 @@ onUnmounted(() => {
|
|
|
|
|
position: relative; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
|
|
&::before { |
|
|
|
|
content: ''; |
|
|
|
|
position: absolute; |
|
|
|
@ -419,8 +547,8 @@ onUnmounted(() => {
|
|
|
|
|
background-size: contain; |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-position: center; |
|
|
|
|
//animation: rotate 5s linear infinite; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&::after { |
|
|
|
|
content: ''; |
|
|
|
|
position: absolute; |
|
|
|
@ -431,6 +559,7 @@ onUnmounted(() => {
|
|
|
|
|
background-position: center; |
|
|
|
|
//animation: rotate 5s linear infinite; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.map { |
|
|
|
|
position: absolute; |
|
|
|
|
inset: 0; |
|
|
|
@ -438,51 +567,70 @@ onUnmounted(() => {
|
|
|
|
|
flex-flow: column nowrap; |
|
|
|
|
padding: 12px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.air-quality { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 12px; |
|
|
|
|
top: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.nomr-box { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 12px; |
|
|
|
|
top: 50%; |
|
|
|
|
top: 68%; |
|
|
|
|
transform: translateY(-50%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.weather { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 50%; |
|
|
|
|
top: 0; |
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.num-box { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 12px; |
|
|
|
|
top: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tabber-box { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 50%; |
|
|
|
|
bottom: 0; |
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
z-index: 2; |
|
|
|
|
z-index: 3; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.block-box { |
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.15); |
|
|
|
|
background: rgba(255, 255, 255, 0.02); |
|
|
|
|
backdrop-filter: blur(3px); |
|
|
|
|
z-index: 2; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@keyframes rotate { |
|
|
|
|
from { |
|
|
|
|
transform: rotateX(0deg) rotateZ(0); |
|
|
|
|
} |
|
|
|
|
50% { |
|
|
|
|
transform: rotateX(-30deg) rotateZ(30deg); |
|
|
|
|
} |
|
|
|
|
to { |
|
|
|
|
transform: rotateX(0deg) rotateZ(0deg); |
|
|
|
|
|
|
|
|
|
.legend { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 20%; |
|
|
|
|
top: 20%; |
|
|
|
|
display: flex; |
|
|
|
|
flex-flow: column nowrap; |
|
|
|
|
gap: 12px; |
|
|
|
|
z-index: 2; |
|
|
|
|
|
|
|
|
|
.legend-item { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
gap: 8px; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
|
|
.legend-text { |
|
|
|
|
opacity: 0.8; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|