129 lines
3.4 KiB
Vue
129 lines
3.4 KiB
Vue
<template>
|
|
<div class="AiEchartMap" v-resize="onDomResize">
|
|
<div class="chart-map" ref="dvMap"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import http from "dui/lib/js/request";
|
|
import {mapState} from "vuex";
|
|
import "../../lib/cdn/turf.min.js";
|
|
|
|
export default {
|
|
name: 'AiEchartMap',
|
|
props: {
|
|
geoJson: String,
|
|
data: Array,
|
|
ops: Object
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
geo: null
|
|
}
|
|
},
|
|
directives: {
|
|
resize: {
|
|
bind(el, binding) {
|
|
let width = ''
|
|
let height = ''
|
|
|
|
function isResize() {
|
|
const style = document.defaultView.getComputedStyle(el)
|
|
if (width !== style.width || height !== style.height) {
|
|
binding.value({
|
|
width: style.width,
|
|
height: style.height
|
|
})
|
|
}
|
|
width = style.width
|
|
height = style.height
|
|
}
|
|
|
|
el.__vueSetInterval__ = setInterval(isResize, 300)
|
|
},
|
|
unbind(el) {
|
|
clearInterval(el.__vueSetInterval__)
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user'])
|
|
},
|
|
mounted() {
|
|
this.$load(this.$refs.dvMap).then(() => this.initChart())
|
|
},
|
|
methods: {
|
|
onDomResize() {
|
|
this.$nextTick(() => {
|
|
this.chart.resize()
|
|
})
|
|
},
|
|
loadLibs() {
|
|
return Promise.all([
|
|
this.getData(this.geoJson).then(res => this.geo = res?.data)
|
|
])
|
|
},
|
|
initChart() {
|
|
const {echarts, turf} = window
|
|
this.chart = echarts.init(this.$refs.dvMap)
|
|
this.chart.showLoading({
|
|
text: "数据加载中...", textColor: "#fff",
|
|
maskColor: 'rgba(0, 0, 0, 0.2)'
|
|
})
|
|
this.loadLibs().then(() => {
|
|
const geoJson = this.geo
|
|
const boundary = geoJson.features?.length > 1 ? turf.union(geoJson) : this.$copy(geoJson.features[0])
|
|
boundary.properties = {...boundary.properties}
|
|
boundary.properties.name = "boundary"
|
|
geoJson.features.unshift(boundary)
|
|
console.log(geoJson)
|
|
echarts.registerMap('customMap', geoJson)
|
|
const option = {
|
|
geo: {
|
|
map: 'customMap', roam: true, emphasis: {disabled: true},
|
|
itemStyle: {areaColor: "transparent", borderColor: '#97CAE6'},
|
|
silent: true,
|
|
label: {show: true, color: '#fff'},
|
|
regions: [
|
|
{
|
|
name: "boundary", itemStyle: {
|
|
areaColor: "rgba(2,188,255,0.16)", shadowColor: "#02F0FF21", shadowOffsetY: 20, shadowBlur: 20,
|
|
borderColor: '#02F0FF', borderWidth: 3
|
|
}, label: {show: false}
|
|
}
|
|
],
|
|
},
|
|
series: [
|
|
{type: 'scatter', coordinateSystem: 'geo', itemStyle: {color: '#66FFFF'}},
|
|
{type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#FFD15C'}}
|
|
],
|
|
...this.ops
|
|
}
|
|
this.chart.setOption(option)
|
|
}).finally(() => this.chart.hideLoading())
|
|
},
|
|
getData(url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${this.user.info.areaId?.substring(0, 6)}`) {
|
|
return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(url)}`)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiEchartMap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
.chart-map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|