17 changed files with 3182 additions and 45 deletions
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,31 @@ |
|||||
|
<template> |
||||
|
<div id="map" class="map"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { initOptions } from '@/utils/map'; |
||||
|
import { onMounted } from 'vue'; |
||||
|
import ShanXiMap from 'config/map/shanxi'; |
||||
|
|
||||
|
console.log('ShanXiMap: ', ShanXiMap); |
||||
|
|
||||
|
// |
||||
|
onMounted(() => { |
||||
|
// console.log(111); |
||||
|
const chartDom = document.getElementById('map'); |
||||
|
console.log('chartDom: ', chartDom); |
||||
|
const myChart = echarts.init(chartDom); |
||||
|
// console.log('myChart: ', myChart); |
||||
|
// |
||||
|
echarts.registerMap('shanxi', ShanXiMap); |
||||
|
// |
||||
|
myChart.setOption(initOptions()); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.map { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,5 @@ |
|||||
|
<template>综合曲线</template> |
||||
|
|
||||
|
<script setup></script> |
||||
|
|
||||
|
<style scoped></style> |
||||
@ -0,0 +1,7 @@ |
|||||
|
<template> |
||||
|
<CommonMap></CommonMap> |
||||
|
</template> |
||||
|
|
||||
|
<script setup></script> |
||||
|
|
||||
|
<style scoped></style> |
||||
@ -0,0 +1,57 @@ |
|||||
|
<template> |
||||
|
<div class="container clear"> |
||||
|
<div |
||||
|
class="item" |
||||
|
v-for="(item, index) in buttons" |
||||
|
:key="item" |
||||
|
@click="$emit('click-btn', { item, index })" |
||||
|
> |
||||
|
{{ item }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { defineEmits } from 'vue'; |
||||
|
|
||||
|
const buttons = ['农场连线', '时物链', '数据监控', '导出统计']; |
||||
|
defineEmits(['click-btn']); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.container { |
||||
|
height: 45rem; |
||||
|
position: absolute; |
||||
|
bottom: 14rem; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
width: 144rem; |
||||
|
height: 45rem; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
background: url('assets/images/btn-border.png') no-repeat center; |
||||
|
background-size: 100%; |
||||
|
color: #01f6ff; |
||||
|
font-size: 15rem; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.item:nth-of-type(1) { |
||||
|
float: left; |
||||
|
margin-left: 20rem; |
||||
|
} |
||||
|
.item:nth-of-type(2) { |
||||
|
float: left; |
||||
|
margin-left: 24rem; |
||||
|
} |
||||
|
.item:nth-of-type(3) { |
||||
|
float: right; |
||||
|
margin-right: 24rem; |
||||
|
margin-left: 24rem; |
||||
|
} |
||||
|
.item:nth-of-type(4) { |
||||
|
float: right; |
||||
|
} |
||||
|
</style> |
||||
@ -1,22 +1,24 @@ |
|||||
<template> |
<template> |
||||
<header class="page-header"> |
<header class="page-header"> |
||||
<!-- 时间--> |
<!-- 时间--> |
||||
<PageTime></PageTime> |
<PageTime></PageTime> |
||||
</header> |
|
||||
|
<!-- 按钮组--> |
||||
|
<PageButtons @click-btn="onClickBtn"></PageButtons> |
||||
</template> |
</header> |
||||
|
</template> |
||||
<script> |
|
||||
export default { |
<script setup> |
||||
name: "Header" |
function onClickBtn({ index: btnIndex, item }) { |
||||
} |
console.log('btnIndex: ', btnIndex, item); |
||||
</script> |
} |
||||
|
</script> |
||||
<style scoped> |
|
||||
.page-header { |
<style scoped> |
||||
height: 115rem; |
.page-header { |
||||
background: url("@/assets/images/top.png") no-repeat center; |
position: relative; |
||||
background-size: 100% 114rem; |
height: 115rem; |
||||
} |
background: url('@/assets/images/top.png') no-repeat center; |
||||
</style> |
background-size: 100% 114rem; |
||||
|
} |
||||
|
</style> |
||||
|
|||||
File diff suppressed because it is too large
@ -0,0 +1,46 @@ |
|||||
|
export const values = [ |
||||
|
{ |
||||
|
name: '太原市', |
||||
|
value: 12, |
||||
|
}, |
||||
|
{ |
||||
|
name: '大同市', |
||||
|
value: 4, |
||||
|
}, |
||||
|
{ |
||||
|
name: '阳泉市', |
||||
|
value: 5, |
||||
|
}, |
||||
|
{ |
||||
|
name: '长治市', |
||||
|
value: 6, |
||||
|
}, |
||||
|
{ |
||||
|
name: '晋城市', |
||||
|
value: 2, |
||||
|
}, |
||||
|
{ |
||||
|
name: '朔州市', |
||||
|
value: 1, |
||||
|
}, |
||||
|
{ |
||||
|
name: '晋中市', |
||||
|
value: 7, |
||||
|
}, |
||||
|
{ |
||||
|
name: '运城市', |
||||
|
value: 3, |
||||
|
}, |
||||
|
{ |
||||
|
name: '忻州市', |
||||
|
value: 3, |
||||
|
}, |
||||
|
{ |
||||
|
name: '临汾市', |
||||
|
value: 1, |
||||
|
}, |
||||
|
{ |
||||
|
name: '吕梁市', |
||||
|
value: 2, |
||||
|
}, |
||||
|
]; |
||||
@ -0,0 +1,46 @@ |
|||||
|
const values = [ |
||||
|
{ |
||||
|
name: '太原市', |
||||
|
value: 12, |
||||
|
}, |
||||
|
{ |
||||
|
name: '大同市', |
||||
|
value: 4, |
||||
|
}, |
||||
|
{ |
||||
|
name: '阳泉市', |
||||
|
value: 5, |
||||
|
}, |
||||
|
{ |
||||
|
name: '长治市', |
||||
|
value: 6, |
||||
|
}, |
||||
|
{ |
||||
|
name: '晋城市', |
||||
|
value: 2, |
||||
|
}, |
||||
|
{ |
||||
|
name: '朔州市', |
||||
|
value: 1, |
||||
|
}, |
||||
|
{ |
||||
|
name: '晋中市', |
||||
|
value: 7, |
||||
|
}, |
||||
|
{ |
||||
|
name: '运城市', |
||||
|
value: 3, |
||||
|
}, |
||||
|
{ |
||||
|
name: '忻州市', |
||||
|
value: 3, |
||||
|
}, |
||||
|
{ |
||||
|
name: '临汾市', |
||||
|
value: 1, |
||||
|
}, |
||||
|
{ |
||||
|
name: '吕梁市', |
||||
|
value: 2, |
||||
|
}, |
||||
|
]; |
||||
@ -0,0 +1,94 @@ |
|||||
|
import ShanXiMap from 'config/map/shanxi'; |
||||
|
import { values as ShanXiValues } from 'config/map/values'; |
||||
|
|
||||
|
/** |
||||
|
* 获取城市的value |
||||
|
* @param {string} cityName 城市名称 |
||||
|
* @returns {string|*} |
||||
|
*/ |
||||
|
function getValueByCity(cityName) { |
||||
|
try { |
||||
|
const city = ShanXiValues.find(item => item.name === cityName); |
||||
|
return city.value; |
||||
|
} catch (error) { |
||||
|
console.log('getValueByCity value: ', error); |
||||
|
return ''; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 初始化城市value及height等值
|
||||
|
function initValues() { |
||||
|
const regions = ShanXiMap.features.map(feature => { |
||||
|
const value = getValueByCity(feature.properties.name); |
||||
|
return { |
||||
|
name: feature.properties.name, |
||||
|
value, |
||||
|
height: value, |
||||
|
label: { |
||||
|
show: true, |
||||
|
textStyle: { color: '#000' }, |
||||
|
}, |
||||
|
}; |
||||
|
}); |
||||
|
return regions; |
||||
|
} |
||||
|
|
||||
|
export function initOptions() { |
||||
|
return { |
||||
|
zoom: 0.4, |
||||
|
|
||||
|
visualMap: { |
||||
|
show: true, |
||||
|
min: 0, |
||||
|
max: 12, |
||||
|
inRange: { |
||||
|
color: [ |
||||
|
'#313695', |
||||
|
'#4575b4', |
||||
|
'#74add1', |
||||
|
'#abd9e9', |
||||
|
'#e0f3f8', |
||||
|
'#ffffbf', |
||||
|
'#fee090', |
||||
|
'#fdae61', |
||||
|
'#f46d43', |
||||
|
'#d73027', |
||||
|
'#a50026', |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'map3D', |
||||
|
map: 'shanxi', |
||||
|
shading: 'realistic', |
||||
|
realisticMaterial: { |
||||
|
roughness: 0.6, |
||||
|
textureTiling: 20, |
||||
|
}, |
||||
|
environment: new echarts.graphic.LinearGradient( |
||||
|
0, |
||||
|
0, |
||||
|
0, |
||||
|
1, |
||||
|
[ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#00aa32', // 天空颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 0.7, |
||||
|
color: '#998866', // 地面颜色
|
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#000', // 地面颜色
|
||||
|
}, |
||||
|
], |
||||
|
false, |
||||
|
), |
||||
|
data: initValues(), |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
} |
||||
Loading…
Reference in new issue