diff --git a/src/views/AppMap.vue b/src/views/AppMap.vue
index b682db0..9bdf9f8 100644
--- a/src/views/AppMap.vue
+++ b/src/views/AppMap.vue
@@ -64,65 +64,63 @@ export default {
})
},
async initMap() {
- const {echarts, turf} = window
+ const {echarts, turf, $waitFor} = window
const boundary = turf.union(this.geoJson)
boundary.properties.name = "boundary"
this.geoJson.features.unshift(boundary)
echarts.registerMap('zhengzhou', this.geoJson)
- this.map = echarts.init(this.$el)
- while (!this.map) {
- await new Promise(resolve => setTimeout(resolve, 500))
+ $waitFor(this.$el).then(() => {
this.map = echarts.init(this.$el)
- }
- const areaColor = {
- type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
- {offset: 0, color: 'rgba(61,127,255,0.35)'},
- {offset: 1, color: '#09E2F8'},
- ]
- }
- const label = {
- show: true,
- backgroundColor: {type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{offset: 0, color: 'rgba(9,63,107,0.79)'}, {offset: 1, color: 'rgba(13,58,99,0.03)'}]},
- borderRadius: 2,
- padding: 8,
- position: 'right',
- formatter: (params) => {
- const {name, value} = params
- return `{a|${name}\n${this.getContent(value).join("\n")}}`
- },
- rich: {
- a: {color: '#fff', fontSize: 12, lineHeight: 14}
+ const areaColor = {
+ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
+ {offset: 0, color: 'rgba(61,127,255,0.35)'},
+ {offset: 1, color: '#09E2F8'},
+ ]
}
- }
- this.map.setOption({
- geo: {
- map: 'zhengzhou', roam: true, emphasis: {disabled: true},
- itemStyle: {areaColor: "transparent", borderColor: '#97CAE6'},
- silent: true,
- label: {show: true, color: '#fff'},
- regions: [
- {name: "boundary", itemStyle: {areaColor, shadowColor: "#1A80BF", shadowOffsetY: 2}, label: {show: false}}
- ],
- },
- series: [
- {type: 'scatter', coordinateSystem: 'geo', itemStyle: {color: '#66FFFF'}, label},
- {type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#FFD15C'}, label}
- ],
- tooltip: {
- trigger: 'item', formatter: params => {
- const {name, marker, value} = params
- return `${marker} ${name}
${this.getContent(value).join("
")}`
+ const label = {
+ show: true,
+ backgroundColor: {type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{offset: 0, color: 'rgba(9,63,107,0.79)'}, {offset: 1, color: 'rgba(13,58,99,0.03)'}]},
+ borderRadius: 2,
+ padding: 8,
+ position: 'right',
+ formatter: (params) => {
+ const {name, value} = params
+ return `{a|${name}\n${this.getContent(value).join("\n")}}`
},
- },
- })
- this.map.on('click', evt => {
- const storeCode = evt.data.storeCode
- if (storeCode) {
- this.$storeBoard.search.storeCode = storeCode
- this.$marketBoard.screenId = 'a90522ef-869b-40ea-8542-d1fc9674a1e8'
+ rich: {
+ a: {color: '#fff', fontSize: 12, lineHeight: 14}
+ }
}
+ this.map.setOption({
+ geo: {
+ map: 'zhengzhou', roam: true, emphasis: {disabled: true},
+ itemStyle: {areaColor: "transparent", borderColor: '#97CAE6'},
+ silent: true,
+ label: {show: true, color: '#fff'},
+ regions: [
+ {name: "boundary", itemStyle: {areaColor, shadowColor: "#1A80BF", shadowOffsetY: 2}, label: {show: false}}
+ ],
+ },
+ series: [
+ {type: 'scatter', coordinateSystem: 'geo', itemStyle: {color: '#66FFFF'}, label},
+ {type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#FFD15C'}, label}
+ ],
+ tooltip: {
+ trigger: 'item', formatter: params => {
+ const {name, marker, value} = params
+ return `${marker} ${name}
${this.getContent(value).join("
")}`
+ },
+ },
+ })
+ this.map.on('click', evt => {
+ const storeCode = evt.data.storeCode
+ if (storeCode) {
+ this.$storeBoard.search.storeCode = storeCode
+ this.$marketBoard.screenId = 'a90522ef-869b-40ea-8542-d1fc9674a1e8'
+ }
+ })
+ this.refreshData()
})
- this.refreshData()
},
convertData(layers) {
const result = {normal: [], abnormal: []}