|
|
|
|
@ -1,15 +1,22 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div id="map">
|
|
|
|
|
<div style="width: 100%;height: 100%">
|
|
|
|
|
<div id="map">
|
|
|
|
|
</div>
|
|
|
|
|
<tooltip ref="tooltip" class="tooltip-table" :info="params"></tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import Vue from "vue";
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
import "echarts-gl";
|
|
|
|
|
import WUXI from "@/assets/wuxi.json";
|
|
|
|
|
import tooltip from "./tooltip.vue"
|
|
|
|
|
import Vue from 'vue'
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
import 'echarts-gl'
|
|
|
|
|
import WUXI from '@/assets/wuxi.json'
|
|
|
|
|
import tooltip from './tooltip.vue'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
tooltip
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
areas: new Map([
|
|
|
|
|
@ -58,14 +65,16 @@ export default {
|
|
|
|
|
echarts.registerMap("wuxi", WUXI);
|
|
|
|
|
this.chart = echarts.init(document.querySelector("#map"))
|
|
|
|
|
this.setOption()
|
|
|
|
|
this.chart.on("click", params => {
|
|
|
|
|
this.params = params?.data?.originalData;
|
|
|
|
|
this.$refs.tooltip.show()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
setTooltip () {
|
|
|
|
|
const div = document.createElement("div");
|
|
|
|
|
let mapTooltip = new Vue({
|
|
|
|
|
this.mapTooltip = new Vue({
|
|
|
|
|
render: h => h(tooltip, { props: { info: this.params?.data?.originalData } })
|
|
|
|
|
})
|
|
|
|
|
mapTooltip.$mount(div);
|
|
|
|
|
this.mapTooltip = mapTooltip.$el;
|
|
|
|
|
});
|
|
|
|
|
document.body.appendChild(this.mapTooltip.$el)
|
|
|
|
|
},
|
|
|
|
|
setOption () {
|
|
|
|
|
this.chart.setOption(this.chartOption);
|
|
|
|
|
@ -74,14 +83,14 @@ export default {
|
|
|
|
|
computed: {
|
|
|
|
|
chartOption () {
|
|
|
|
|
return {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
formatter: (params) => {
|
|
|
|
|
this.params = params;
|
|
|
|
|
|
|
|
|
|
return this.mapTooltip;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
// tooltip: {
|
|
|
|
|
// trigger: 'item',
|
|
|
|
|
// formatter: (params) => {
|
|
|
|
|
// this.params = params;
|
|
|
|
|
//
|
|
|
|
|
// return this.mapTooltip;
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
series: [{
|
|
|
|
|
type: 'map3D', // map、map3D
|
|
|
|
|
map: 'wuxi', // 注册的地图名称
|
|
|
|
|
@ -172,13 +181,13 @@ export default {
|
|
|
|
|
value: 0,
|
|
|
|
|
originalData: []
|
|
|
|
|
}))
|
|
|
|
|
houses.forEach(item => {
|
|
|
|
|
let find = temp.find(v => v.tag === item.area)
|
|
|
|
|
if (find) {
|
|
|
|
|
find.value++;
|
|
|
|
|
find.originalData.push(item)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// houses.forEach(item => {
|
|
|
|
|
// let find = temp.find(v => v.tag === item.area)
|
|
|
|
|
// if (find) {
|
|
|
|
|
// find.value++;
|
|
|
|
|
// find.originalData.push(item)
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
lands.forEach(item => {
|
|
|
|
|
let find = temp.find(v => v.tag === item.area)
|
|
|
|
|
if (find) {
|
|
|
|
|
@ -197,7 +206,6 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.initMap();
|
|
|
|
|
this.setTooltip();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
@ -208,4 +216,10 @@ export default {
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: linear-gradient(to bottom, #00000022 , #61b9ac66);
|
|
|
|
|
}
|
|
|
|
|
.tooltip-table {
|
|
|
|
|
position: fixed;
|
|
|
|
|
z-index: 99999996;
|
|
|
|
|
top: 10%;
|
|
|
|
|
left: 10%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|