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> |
|||
<header class="page-header"> |
|||
<!-- 时间--> |
|||
<PageTime></PageTime> |
|||
</header> |
|||
|
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "Header" |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.page-header { |
|||
height: 115rem; |
|||
background: url("@/assets/images/top.png") no-repeat center; |
|||
background-size: 100% 114rem; |
|||
} |
|||
</style> |
|||
<template> |
|||
<header class="page-header"> |
|||
<!-- 时间--> |
|||
<PageTime></PageTime> |
|||
|
|||
<!-- 按钮组--> |
|||
<PageButtons @click-btn="onClickBtn"></PageButtons> |
|||
</header> |
|||
</template> |
|||
|
|||
<script setup> |
|||
function onClickBtn({ index: btnIndex, item }) { |
|||
console.log('btnIndex: ', btnIndex, item); |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.page-header { |
|||
position: relative; |
|||
height: 115rem; |
|||
background: url('@/assets/images/top.png') no-repeat center; |
|||
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