282 lines
11 KiB
Vue
282 lines
11 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<div
|
|
v-if="isBack"
|
|
@click="onBack"
|
|
class="absolute left-25px top-25px z-999 text-white border rounded-2px px-30px py-6px text-12px cursor-pointer"
|
|
>返回</div
|
|
>
|
|
<div ref="chartRef" :style="{ height, width }"> </div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent, PropType, ref, Ref, onMounted } from 'vue'
|
|
|
|
import { useECharts } from '/@/hooks/web/useECharts'
|
|
import { registerMap } from 'echarts'
|
|
import { deepMerge } from '/@/utils'
|
|
// import icon from '/@/assets/images/data-address.png'
|
|
|
|
const domImg = document.createElement('img')
|
|
domImg.style.height = '8px'
|
|
domImg.src =
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE4MTE0OTgyQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE4MTE0OTgzQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTgxMTQ5ODBBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTgxMTQ5ODFBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4v4trwAAAAVklEQVR42mL0D225cu0hAzWAjpY8C9CsL19/wIV4uDnI5gKNYmKgKhjcxrFAggBZiBIuyDhqRQWQOxoVo1ExGhWjUTEaFYMiKoB1LVq1TXZUAI0CCDAAcAlaxCt7dtQAAAAASUVORK5CYII='
|
|
|
|
const domImgHover = document.createElement('img')
|
|
domImgHover.style.height = '8px'
|
|
domImgHover.src =
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFDQ0Q2RjYyQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFDQ0Q2RjYzQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUNDRDZGNjBBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUNDRDZGNjFBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6FboimAAAASklEQVR42mIUnL9XtHsDAzXA69IARjWtXJYX7+FCfyQEKeEyMVAVDG7jWCB+RhaihAsybjQqRqNiNCpGo2I0KoZZVDBSt9oGCDAAhYNrvRu3DWEAAAAASUVORK5CYII='
|
|
const img2 = 'image://https://www.makeapie.cn/asset/get/s/data-1619318279159-o6ZbTGoO0.png'
|
|
export default defineComponent({
|
|
props: {
|
|
width: {
|
|
type: String as PropType<string>,
|
|
default: '100%',
|
|
},
|
|
height: {
|
|
type: String as PropType<string>,
|
|
default: 'calc(100vh - 0px)',
|
|
},
|
|
},
|
|
setup() {
|
|
const chartRef = ref<HTMLDivElement | null>(null)
|
|
const isBack = ref<boolean>(false)
|
|
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
|
|
const mapJSON = ref()
|
|
const tempMapJSON = ref()
|
|
const mapData = [
|
|
{
|
|
name: '古湖街道',
|
|
value: [105.243227, 29.340601],
|
|
datas: 768,
|
|
img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
|
|
},
|
|
]
|
|
|
|
function onBack() {
|
|
isBack.value = false
|
|
tempMapJSON.value = deepMerge(mapJSON.value)
|
|
mapInit()
|
|
}
|
|
|
|
function mapInit() {
|
|
registerMap('lcxz', tempMapJSON.value)
|
|
setOptions({
|
|
backgroundColor: '#012248',
|
|
stateAnimation: {
|
|
duration: 100,
|
|
},
|
|
geo: {
|
|
map: 'lcxz',
|
|
roam: false,
|
|
silent: false,
|
|
label: {
|
|
color: '#fff',
|
|
show: true,
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#53D9FF',
|
|
borderWidth: 1.3,
|
|
shadowBlur: 15,
|
|
shadowColor: 'rgb(58,115,192)',
|
|
shadowOffsetX: 7,
|
|
shadowOffsetY: 6,
|
|
areaColor: {
|
|
image: domImg,
|
|
},
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
areaColor: '#8dd7fc',
|
|
color: '#fff',
|
|
},
|
|
label: {
|
|
color: '#012248',
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'map',
|
|
roam: false,
|
|
map: 'lcxz',
|
|
select: {
|
|
disabled: true,
|
|
},
|
|
label: {
|
|
// show: false,
|
|
color: '#fff',
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#2ab8ff',
|
|
areaColor: {
|
|
image: domImg,
|
|
},
|
|
borderWidth: 1,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
shadowBlur: 0,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 1,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
color: '#fff',
|
|
},
|
|
itemStyle: {
|
|
areaColor: {
|
|
image: domImgHover,
|
|
repeat: 'repeat',
|
|
},
|
|
borderColor: '#2ab8ff',
|
|
borderWidth: 1,
|
|
shadowColor: 'rgba(0, 255, 255, 0.7)',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 1,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
rippleEffect: {
|
|
scale: 10,
|
|
brushType: 'stroke',
|
|
},
|
|
showEffectOn: 'render',
|
|
symbol: 'circle',
|
|
zlevel: 1,
|
|
symbolSize: [10, 5],
|
|
itemStyle: {
|
|
color: (params): any => {
|
|
var colorList = [
|
|
{
|
|
type: 'linear',
|
|
x: 1,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 0,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#64fbc5',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#018ace',
|
|
},
|
|
],
|
|
global: false,
|
|
},
|
|
{
|
|
type: 'linear',
|
|
x: 1,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 0,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#61c0f1 ',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#6f2eb6',
|
|
},
|
|
],
|
|
global: false,
|
|
},
|
|
]
|
|
return colorList[params.dataIndex % colorList.length]
|
|
},
|
|
},
|
|
data: mapData,
|
|
},
|
|
{
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
symbol: (_, params) => {
|
|
return mapData[params.dataIndex].img
|
|
},
|
|
symbolSize: [32, 41],
|
|
symbolOffset: [0, -20],
|
|
z: 9999,
|
|
data: mapData,
|
|
},
|
|
{
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
stateAnimation: {
|
|
duration: 300,
|
|
easing: 'bounceOut',
|
|
},
|
|
label: {
|
|
show: true,
|
|
align: 'center',
|
|
formatter: function (params) {
|
|
var name = params.name
|
|
var value = mapData[params.dataIndex].datas
|
|
var text = `{fline|${value}}\n{tline|${name}}`
|
|
return text
|
|
},
|
|
color: '#fff',
|
|
rich: {
|
|
fline: {
|
|
padding: [0, 25],
|
|
color: '#fff',
|
|
textShadowColor: '#030615',
|
|
textShadowOffsetX: 1,
|
|
textShadowOffsetY: 1,
|
|
fontSize: 14,
|
|
fontWeight: 400,
|
|
},
|
|
tline: {
|
|
padding: [0, 27],
|
|
color: '#ABF8FF',
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: '#00FFF6',
|
|
},
|
|
symbol: img2,
|
|
symbolSize: [100, 50],
|
|
symbolOffset: [0, -60],
|
|
z: 999,
|
|
data: mapData,
|
|
},
|
|
],
|
|
})
|
|
}
|
|
|
|
onMounted(async () => {
|
|
mapJSON.value = (await (await import('./lcxz.json')).default) as any
|
|
tempMapJSON.value = deepMerge(mapJSON.value)
|
|
mapInit()
|
|
getInstance()?.on('click', (e) => {
|
|
if (e.seriesType == 'map') {
|
|
const temp = mapJSON.value.features.filter((obj) => obj.properties.name == e.name)
|
|
if (temp) {
|
|
isBack.value = true
|
|
tempMapJSON.value = deepMerge({
|
|
type: 'FeatureCollection',
|
|
features: temp,
|
|
})
|
|
mapInit()
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
return { chartRef, isBack, onBack }
|
|
},
|
|
})
|
|
</script>
|