first
This commit is contained in:
仲么了
217
src/components/echarts/MyEchartMap.vue
Normal file
217
src/components/echarts/MyEchartMap.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<!-- 地图组件 -->
|
||||
<template>
|
||||
<div style="position: relative">
|
||||
<div class="bars_w" ref="chartMap" id="chartMap"></div>
|
||||
<span @click="circle" v-show="showCircle" class="iconfont icon-back" style="color: #003078"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from 'vue'
|
||||
import * as echarts from 'echarts4'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
const props = defineProps(['options'])
|
||||
const myCharts = ref()
|
||||
const showCircle = ref(false)
|
||||
|
||||
const fetchConfig = async (name: string) => {
|
||||
const res = await import(`../../assets/map/${name}.json`)
|
||||
return res.default
|
||||
// GetEchar(res.default)
|
||||
}
|
||||
// fetchConfig()
|
||||
|
||||
const emit = defineEmits(['getRegionByRegion', 'eliminate'])
|
||||
onMounted(() => {})
|
||||
|
||||
const GetEchar = async (name: string) => {
|
||||
let chartDom = document.getElementById('chartMap')
|
||||
myCharts.value?.dispose()
|
||||
myCharts.value = echarts.init(chartDom)
|
||||
name == '中国' ? (showCircle.value = false) : (showCircle.value = true)
|
||||
|
||||
echarts.registerMap(name, await fetchConfig(name)) //注册可用的地图
|
||||
let option = {
|
||||
title: {
|
||||
left: 'center',
|
||||
top: '3%',
|
||||
...props.options.title
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
...(props.options.tooltip || null)
|
||||
},
|
||||
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 26,
|
||||
bottom: 40,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
|
||||
...(props.options.legend || null)
|
||||
},
|
||||
|
||||
color: [
|
||||
...(props.options.color || ''),
|
||||
'#07CCCA ',
|
||||
'#00BFF5',
|
||||
'#FFBF00',
|
||||
'#77DA63',
|
||||
'#D5FF6B',
|
||||
'#Ff6600',
|
||||
'#FF9100',
|
||||
'#5B6E96',
|
||||
'#66FFCC',
|
||||
'#B3B3B3'
|
||||
],
|
||||
|
||||
geo: {
|
||||
map: name,
|
||||
zoom: 1.2,
|
||||
// top: 0,
|
||||
// bottom: 0,
|
||||
roam: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: '14',
|
||||
color: 'rgba(0,0,0,0.7)'
|
||||
}
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(51, 69, 129, .8)', //地图背景色
|
||||
borderColor: '#999999',
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(147, 135, 148, .2)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(128, 217, 248, 1)',
|
||||
// shadowColor: 'rgba(255, 255, 255, 1)',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#ccc',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
// regions: [
|
||||
// {
|
||||
// name: '南海诸岛',
|
||||
// itemStyle: {
|
||||
// // 隐藏地图
|
||||
// normal: {
|
||||
// opacity: 0 // 为 0 时不绘制该图形
|
||||
// }
|
||||
// },
|
||||
// label: {
|
||||
// show: false // 隐藏文字
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
},
|
||||
...props.options.options
|
||||
}
|
||||
if (props.options.visualMap) {
|
||||
option.visualMap = props.options.visualMap
|
||||
}
|
||||
myCharts.value.setOption(option)
|
||||
window.addEventListener('resize', resizeHandler)
|
||||
|
||||
// 点击事件
|
||||
myCharts.value.off('click')
|
||||
myCharts.value.on('click', (e: any) => {
|
||||
if (name == '中国' && e.componentIndex == 0) {
|
||||
MapReturn(e.name)
|
||||
|
||||
// console.log('🚀 ~ file: MyEchartMap.vue:156 ~ myCharts.value.on ~ MapReturn(e.name):', MapReturn(e.name))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const MapReturn = (name: string) => {
|
||||
let area = dictData.state.area?.[0]?.children ?? []
|
||||
let list = {}
|
||||
let flag = true
|
||||
for (let i = 0; i < area.length; i++) {
|
||||
if (area[i].name == name) {
|
||||
list = area[i]
|
||||
flag = false
|
||||
emit('getRegionByRegion', list)
|
||||
break
|
||||
}
|
||||
}
|
||||
if (flag) {
|
||||
emit('eliminate', name)
|
||||
}
|
||||
}
|
||||
// 返回
|
||||
const circle = () => {
|
||||
emit('getRegionByRegion', dictData.state.area[0])
|
||||
showCircle.value = false
|
||||
}
|
||||
const resizeHandler = () => {
|
||||
myCharts.value?.resize()
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeHandler)
|
||||
myCharts.value?.dispose()
|
||||
})
|
||||
defineExpose({ GetEchar })
|
||||
watch(
|
||||
() => props.options,
|
||||
(newVal, oldVal) => {
|
||||
// GetEchar('中国')
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bars_w {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.iconfont {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 2;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user