|
|
|
|
@ -2,7 +2,7 @@
|
|
|
|
|
<div style="width: 100%;height: 100%">
|
|
|
|
|
<div id="map">
|
|
|
|
|
</div>
|
|
|
|
|
<tooltip ref="tooltip" class="tooltip-table" :info="params" :style="{ left: mapTooltipPos.x + 'px', top: mapTooltipPos.y + 'px' }"></tooltip>
|
|
|
|
|
<tooltip ref="tooltip" class="tooltip-table" :info="params" :area="areaName" :style="{ left: mapTooltipPos.x + 'px', top: mapTooltipPos.y + 'px' }"></tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -19,6 +19,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
areaName: "",
|
|
|
|
|
areas: new Map([
|
|
|
|
|
[1,"宜兴市"],
|
|
|
|
|
[2,"惠山区"],
|
|
|
|
|
@ -53,7 +54,7 @@ export default {
|
|
|
|
|
backgroundColor: {
|
|
|
|
|
image: require('@/assets/point.png')
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
params: [],
|
|
|
|
|
mapTooltip: "",
|
|
|
|
|
@ -72,6 +73,7 @@ export default {
|
|
|
|
|
this.chart.on("click", params => {
|
|
|
|
|
this.mapTooltipPos.x = params.event.offsetX;
|
|
|
|
|
this.mapTooltipPos.y = params.event.offsetY;
|
|
|
|
|
this.areaName = params.name;
|
|
|
|
|
this.params = params?.data?.originalData;
|
|
|
|
|
this.$refs.tooltip.show()
|
|
|
|
|
})
|
|
|
|
|
@ -101,6 +103,10 @@ export default {
|
|
|
|
|
type: 'map3D', // map、map3D
|
|
|
|
|
map: 'wuxi', // 注册的地图名称
|
|
|
|
|
name: "无锡",
|
|
|
|
|
// viewControl: {
|
|
|
|
|
// alpha: 54,// 倾斜角度
|
|
|
|
|
// beta: 20
|
|
|
|
|
// },
|
|
|
|
|
label: {
|
|
|
|
|
// 标签的相关设置
|
|
|
|
|
show: false, // (地图上的城市名称)是否显示标签 [ default: false ]
|
|
|
|
|
@ -170,7 +176,7 @@ export default {
|
|
|
|
|
data: this.labelData.map(v => {
|
|
|
|
|
v.label = this.label;
|
|
|
|
|
v.emphasis = {
|
|
|
|
|
label: this.label
|
|
|
|
|
label: this.label,
|
|
|
|
|
}
|
|
|
|
|
return v
|
|
|
|
|
})
|
|
|
|
|
|