Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增阿克苏 echart地图json

Browse Source
This commit is contained in:
guanj
2025-10-14 15:00:13 +08:00
parent 1bde44902f
commit 1496b64c76
54 changed files with 182654 additions and 174008 deletions
Download Patch File Download Diff File Expand all files Collapse all files

506
src/components/echarts/MyEchartMap.vue
View File

@@ -1,251 +1,255 @@
<!-- 地图组件 -->
<template>
<div style="position: relative">
<div class="bars_w" ref="chartMap" id="chartMap"></div>
<!-- <span @click="circle" v-show="showCircle" class="iconfont icon-back"></span> -->
</div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'
import 'echarts-liquidfill'
import 'echarts/lib/component/dataZoom'
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.replace(/市$/, "")}.json`)
return res.default
// GetEchar(res.default)
}
// fetchConfig()
const emit = defineEmits(['getRegionByRegion', 'eliminate', 'clickMap'])
onMounted(() => {})
const GetEchar = async (name: string) => {
let chartDom = document.getElementById('chartMap')
myCharts.value?.dispose()
myCharts.value = echarts.init(chartDom)
name == dictData.state.area?.[0].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.55)',
...(props.options.tooltip || null)
},
legend: {
orient: 'vertical',
left: 25,
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.1,
// top: 10,
// 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
}
if (props.options.geo3D) {
option.geo = null
option.geo3D = {
map: name,
...(props.options.geo3D || null)
}
}
myCharts.value.setOption(option)
window.addEventListener('resize', resizeHandler)
const flag1 = ref(true)
// 点击事件
myCharts.value.off('click')
myCharts.value.on('click', (e: any) => {
if (props.options.geo3D) {
// emit('clickMap', e)
if (flag1.value) {
flag1.value = false
setTimeout(() => {
emit('clickMap', e)
flag1.value = true
}, 100)
}
} else {
// if (name == dictData.state.area?.[0].name && e.componentIndex == 0) {
if (name == '中国' && e.componentIndex == 0) {
MapReturn(e.name)
// console.log('🚀 ~ file: MyEchartMap.vue:156 ~ myCharts.value.on ~ MapReturn(e.name):', MapReturn(e.name))
}
}
})
myCharts.value.on('datarangeselected', function (params: any) {
// 手动调用restore方法恢复地图的默认颜色映射
myCharts.value.dispatchAction({
type: 'restore'
})
})
}
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()
myCharts.value?.setOption(myCharts.value.getOption()) // 强制更新配置
}
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;
color: var(--el-color-primary) !important;
}
</style>
<!-- 地图组件 -->
<template>
<div style="position: relative">
<div class="bars_w" ref="chartMap" id="chartMap"></div>
<!-- <span @click="circle" v-show="showCircle" class="iconfont icon-back"></span> -->
</div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'
import 'echarts-liquidfill'
import 'echarts/lib/component/dataZoom'
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.replace(/市$/, "")}.json`)
return res.default
// GetEchar(res.default)
}
// fetchConfig()
const emit = defineEmits(['getRegionByRegion', 'eliminate', 'clickMap'])
onMounted(() => { })
const GetEchar = async (name: string) => {
let chartDom = document.getElementById('chartMap')
myCharts.value?.dispose()
myCharts.value = echarts.init(chartDom)
name == dictData.state.area?.[0].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.55)',
...(props.options.tooltip || null)
},
legend: {
orient: 'vertical',
left: 25,
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.1,
// top: 10,
// 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
}
if (props.options.geo3D) {
option.geo = null
option.geo3D = {
map: name,
...(props.options.geo3D || null)
}
}
myCharts.value.setOption(option)
setTimeout(() => {
// 刷新地图
myCharts.value.setOption(option)
}, 0)
window.addEventListener('resize', resizeHandler)
const flag1 = ref(true)
// 点击事件
myCharts.value.off('click')
myCharts.value.on('click', (e: any) => {
if (props.options.geo3D) {
// emit('clickMap', e)
if (flag1.value) {
flag1.value = false
setTimeout(() => {
emit('clickMap', e)
flag1.value = true
}, 100)
}
} else {
// if (name == dictData.state.area?.[0].name && e.componentIndex == 0) {
if (name == '中国' && e.componentIndex == 0) {
MapReturn(e.name)
// console.log('🚀 ~ file: MyEchartMap.vue:156 ~ myCharts.value.on ~ MapReturn(e.name):', MapReturn(e.name))
}
}
})
myCharts.value.on('datarangeselected', function (params: any) {
// 手动调用restore方法恢复地图的默认颜色映射
myCharts.value.dispatchAction({
type: 'restore'
})
})
}
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()
myCharts.value?.setOption(myCharts.value.getOption()) // 强制更新配置
}
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;
color: var(--el-color-primary) !important;
}
</style>