989 lines
29 KiB
Vue
989 lines
29 KiB
Vue
<template>
|
|
<div class="centerTopPage">
|
|
<div class="mapBox">
|
|
<div v-if="type == 1" id="mapEcharts"></div>
|
|
<div v-if="type == 2" id="mapEcharts2"></div>
|
|
</div>
|
|
<div class="buttonTop">
|
|
<div
|
|
:class="type == 1 ? 'on' : ''"
|
|
@click="getMapSelect(1)"
|
|
class="buttom1"
|
|
>
|
|
全国
|
|
</div>
|
|
<div
|
|
:class="type == 2 ? 'on' : ''"
|
|
@click="getMapSelect(2)"
|
|
class="buttom1"
|
|
>
|
|
全市
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
let mapChinaJson = require('@/untils/china.json')
|
|
let ningxiaJson = require('@/untils/ningxia.json')
|
|
import { getEquipmentDisByMapApi } from "../../api/screen";
|
|
|
|
export default {
|
|
name: 'centerTopPage',
|
|
data() {
|
|
return {
|
|
type: 1,
|
|
zoom: 1.39,
|
|
zoom2: 1.2,
|
|
mapEcharts: null,
|
|
mapEcharts2: null,
|
|
mapJson: null,
|
|
pointArea: [],
|
|
pointAll: [],
|
|
companyList: [],
|
|
companyAreaList: [],
|
|
isCity: 0,
|
|
cityCount: [],
|
|
gozoom: 1
|
|
}
|
|
},
|
|
created() {
|
|
// this.getCompanyList()
|
|
// this.getCompanyAreaList()
|
|
// this.getCityCount()
|
|
},
|
|
mounted() {
|
|
|
|
this.getEquipmentDisByMapApiPage()
|
|
this.getInitData()
|
|
},
|
|
methods: {
|
|
getEquipmentDisByMapApiPage() {
|
|
getEquipmentDisByMapApi().then(res => {
|
|
console.log('res=====', res);
|
|
})
|
|
},
|
|
getCompanyList() {
|
|
let params = {
|
|
provinceId: ''
|
|
}
|
|
getCompanyListByProvinceId(params).then(res => {
|
|
if (res.success && res.data) {
|
|
this.companyList = res.data
|
|
}
|
|
})
|
|
},
|
|
getCompanyAreaList() {
|
|
let params = {
|
|
areaId: ''
|
|
}
|
|
getCompanyListByAreaId(params).then(res => {
|
|
if (res.success && res.data) {
|
|
this.companyAreaList = res.data
|
|
}
|
|
})
|
|
},
|
|
getCityCount() {
|
|
// this.getInitData()
|
|
// let params = {
|
|
// isCity: this.isCity
|
|
// }
|
|
// getCityCount(params).then(res => {
|
|
// if (res.success && res.data) {
|
|
// if (this.type == 1) {
|
|
// res.data.forEach(item => {
|
|
// item.value = item.center.split(',')
|
|
// item.isActive = false
|
|
// if (item.areaName == '北京市') {
|
|
// item.areaColor = '#fff'
|
|
// }
|
|
// })
|
|
// console.log(res.data)
|
|
// this.cityCount = res.data
|
|
// this.getInitData()
|
|
// } else if (this.type == 2) {
|
|
// res.data.forEach(item => {
|
|
// item.value = item.center.split(',')
|
|
// item.isActive = false
|
|
// })
|
|
// this.AreaCount = res.data
|
|
// }
|
|
// }
|
|
// })
|
|
},
|
|
getMapSelect(type) {
|
|
let dom = document.getElementsByClassName('iconMap')
|
|
dom[0].style.display = 'none'
|
|
if (type == 1) {
|
|
this.type = 1
|
|
if (this.mapEcharts) {
|
|
this.mapEcharts.dispose()
|
|
this.mapEcharts = null
|
|
}
|
|
if (this.mapEcharts2) {
|
|
this.mapEcharts2.dispose()
|
|
this.mapEcharts2 = null
|
|
}
|
|
setTimeout(() => {
|
|
this.mapEcharts = echarts.init(document.getElementById('mapEcharts'))
|
|
let mapJson1 = mapChinaJson
|
|
echarts.registerMap('china', mapJson1)
|
|
this.setMapOption()
|
|
}, 200)
|
|
} else {
|
|
this.type = 2
|
|
this.isCity = 1
|
|
this.getCityCount()
|
|
if (this.mapEcharts) {
|
|
this.mapEcharts.dispose()
|
|
this.mapEcharts = null
|
|
}
|
|
if (this.mapEcharts2) {
|
|
this.mapEcharts2.dispose()
|
|
this.mapEcharts2 = null
|
|
}
|
|
setTimeout(() => {
|
|
this.mapEcharts2 = echarts.init(
|
|
document.getElementById('mapEcharts2')
|
|
)
|
|
// let mapJson2 = mapJson('1515507975659761665', '')
|
|
let mapJson2 = ningxiaJson
|
|
echarts.registerMap('hs', mapJson2)
|
|
this.setMapOption2()
|
|
}, 200)
|
|
}
|
|
},
|
|
getInitData() {
|
|
this.mapEcharts = echarts.init(document.getElementById('mapEcharts'))
|
|
this.mapJson = mapChinaJson
|
|
echarts.registerMap('china', this.mapJson)
|
|
this.setMapOption()
|
|
},
|
|
setMapOption() {
|
|
//获取当前显示地图下方地市的坐标点数据； 用于气泡显示
|
|
let geoCoordMap = {};
|
|
// 获取地区详细信息
|
|
let mapFeatures = this.mapJson.features;
|
|
// 遍历获取每个地区的经纬度
|
|
mapFeatures.forEach(function (v, i) {
|
|
// 获取当前地区名
|
|
let name = v.properties.name;
|
|
if (name) {
|
|
// 获取当前地区的经纬度
|
|
geoCoordMap[name] = v.properties.center;
|
|
}
|
|
});
|
|
|
|
let mapData = [{
|
|
name: "青海省",
|
|
value: ['101.778', '36.623'], a: '100'
|
|
},
|
|
{
|
|
name: "宁夏回族自治区",
|
|
value: ['106.278', '38.466'], a: '100'
|
|
},
|
|
{
|
|
name: '安徽省', value: ['117.283', '31.861'], a: '100'
|
|
},
|
|
{
|
|
name: '湖南省', value: ['112.982', '28.194'], a: '100'
|
|
}
|
|
]
|
|
let that = this
|
|
this.pointAll = this.cityCount
|
|
this.pointAll.push({
|
|
name: '宁夏',
|
|
//自定义区域的颜色
|
|
itemStyle: {
|
|
areaColor: '#F50508',
|
|
borderColor: '#1773c3', // 区域边框
|
|
shadowColor: '#1773c3' // 阴影
|
|
}
|
|
})
|
|
let splitList = [
|
|
{ name: '北京市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
|
|
{
|
|
name: '天津市',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '上海市',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '重庆市',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '河北省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '河南省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '云南省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '辽宁省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '黑龙江省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '湖南省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '安徽省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '山东省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '新疆维吾尔自治区',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '江苏省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '浙江省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '江西省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '湖北省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '广西壮族自治区',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '甘肃省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '山西省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '内蒙古自治区',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '陕西省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '吉林省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '福建省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '贵州省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '广东省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '青海省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '西藏自治区',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '四川省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '宁夏回族自治区',
|
|
itemStyle: { normal: { areaColor: '#2187FF' } }
|
|
},
|
|
{
|
|
name: '海南省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '台湾省',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '香港特别行政区',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
},
|
|
{
|
|
name: '澳门特别行政区',
|
|
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
|
}
|
|
]
|
|
let imgUrl = require('../../assets/img/myImage/tankuang.png')
|
|
let echartOption = {
|
|
geo: [
|
|
{
|
|
show: true,
|
|
map: 'china',
|
|
aspectScale: 0.8,
|
|
zoom: this.zoom,
|
|
roam: true, // 是否允许缩放
|
|
animationDurationUpdate: 0,
|
|
layoutSize: '92%',
|
|
layoutCenter: ['50%', '68%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: { show: false },
|
|
areaColor: '#0A2B7B', //地图颜色
|
|
opacity: 1,
|
|
borderColor: '#174C95', //地图边框颜色
|
|
borderWidth: 1, //地图边框宽度
|
|
shadowColor: 'none',
|
|
shadowBlur: 10,
|
|
color: '#fff'
|
|
// 设置扇形的阴影
|
|
},
|
|
emphasis: {
|
|
//选中省份的颜色
|
|
areaColor: '#765af3',
|
|
label: {
|
|
show: true
|
|
}
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
fontSize: 14,
|
|
fontWeight: 500,
|
|
color: 'rgba(255,255,255,0.5)'
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
areaColor: '#0a183d',
|
|
color: '#fff'
|
|
}
|
|
},
|
|
zlevel: 1,
|
|
regions: splitList
|
|
},
|
|
{
|
|
map: 'china',
|
|
aspectScale: 0.8,
|
|
roam: true, // 是否允许缩放
|
|
animationDurationUpdate: 0,
|
|
zoom: this.zoom,
|
|
layoutSize: '92%',
|
|
layoutCenter: ['50%', '69.5%'],
|
|
itemStyle: {
|
|
areaColor: '#6e55dc',
|
|
borderColor: '#6e55dc',
|
|
borderWidth: 1,
|
|
opacity: 0.5,
|
|
color: '#fff'
|
|
},
|
|
zlevel: -1,
|
|
silent: true,
|
|
tooltip: {
|
|
show: false,
|
|
trigger: 'item'
|
|
}
|
|
}
|
|
],
|
|
visualMap: {
|
|
show: false,
|
|
top: 'top',
|
|
min: 0,
|
|
max: 2,
|
|
seriesIndex: 0,
|
|
calculable: true,
|
|
inRange: {
|
|
color: ['#998f74', '#04a4f6', '#00943e', '#dae07b', '#b62022']
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
triggerOn: 'click',
|
|
alwaysShowContent: true,
|
|
showDelay: 0, //浮层显示的延迟
|
|
transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
|
|
enterable: true,
|
|
className: 'iconMap',
|
|
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
|
|
formatter: function (params) {
|
|
if (params.data) {
|
|
let companyHtml = ''
|
|
let className = 'itemColor1 itemColor'
|
|
// that.companyList.forEach(item => {
|
|
// if (item.provinceId == params.data.areaId) {
|
|
// if (item.companyType == '古建商、协会') {
|
|
// className = 'itemColor1 itemColor'
|
|
// } else if (item.companyType == '古建施工企业') {
|
|
// className = 'itemColor2 itemColor'
|
|
// } else if (item.companyType == '古建规划设计单位') {
|
|
// className = 'itemColor3 itemColor'
|
|
// } else if (item.companyType == '古建交易平台') {
|
|
// className = 'itemColor4 itemColor'
|
|
// } else if (item.companyType == '古建构件及材料生产企业') {
|
|
// className = 'itemColor5 itemColor'
|
|
// } else if (item.companyType == '大学高校') {
|
|
// className = 'itemColor6 itemColor'
|
|
// }
|
|
// companyHtml +=
|
|
// '<div class="' +
|
|
// className +
|
|
// '" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">' +
|
|
// item.companyName +
|
|
// '</div>'
|
|
// }
|
|
// })
|
|
let html = `
|
|
<div style="width:260px;height:180px;background: url(${imgUrl}) no-repeat; background-size:100% 100%; padding:10px 12px;position: relative;">
|
|
<div id="tooltipGB" style="position: absolute;cursor: pointer; width:30px;height:30px;line-height:30px;text-align:center;right:5px;top:5px;">X</div>
|
|
<div style="font-size: 14px; height: 20px;line-height:20px;">${params.data.areaName}</div>
|
|
<div class="scrollTooltip" style="margin-top:10px;height:130px; overflow-y:auto;">
|
|
<div style="white-space:normal;font-size: 12px;font-weight: 400; position:relative;">
|
|
${companyHtml}
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
return html
|
|
}
|
|
},
|
|
backgroundColor: 'rgba(4,24,51,0)',
|
|
borderColor: 'rgba(99, 173, 222,0)',
|
|
borderWidth: 0,
|
|
padding: [0, -12, 0, 0],
|
|
position: 'right',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontWeight: 'bolder'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'scatter', //带有涟漪效果的
|
|
map: mapData,
|
|
roam: false,
|
|
coordinateSystem: 'geo', //使用坐标系
|
|
zlevel: 1,
|
|
symbolSize: [45, 55],
|
|
symbol: (value, params) => {
|
|
if (params.name == '安徽省') {
|
|
return 'image://' + require('@/assets/img/myImage/markPoints.png')
|
|
}
|
|
if (params.name == '湖南省') {
|
|
return 'image://' + require('@/assets/img/myImage/markPoints.png')
|
|
}
|
|
if (params.name == '宁夏回族自治区') {
|
|
return 'image://' + require('@/assets/img/myImage/markPoints.png')
|
|
}
|
|
if (params.name == '青海省') {
|
|
return 'image://' + require('@/assets/img/myImage/markPoints.png')
|
|
}
|
|
},
|
|
emphasis: {
|
|
scale: false,
|
|
},
|
|
symbolKeepAspect: true,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
color: '#7CC3FF',
|
|
fontSize: 16,
|
|
fontFamily: 'cursive',
|
|
fontWeight: 'bold',
|
|
position: 'top',
|
|
padding: [0, 0, -15, 0],
|
|
formatter: function (params) {
|
|
return params.data.count
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
data: mapData || []
|
|
},
|
|
]
|
|
}
|
|
this.mapEcharts.setOption(echartOption)
|
|
this.mapEcharts.on('georoam', function (params) {
|
|
let option = that.mapEcharts.getOption() //获得option对象
|
|
if (params.zoom != null && params.zoom != undefined) {
|
|
//捕捉到缩放时
|
|
option.geo[1].zoom = option.geo[0].zoom //下层geo的缩放等级跟着上层的geo一起改变
|
|
option.geo[1].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
|
|
option.geo[0].label.show = true //下层的geo的中心位置随着上层geo一起改变
|
|
} else {
|
|
//捕捉到拖曳时
|
|
option.geo[1].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
|
|
}
|
|
if (1 < params.zoom) {
|
|
// console.log(this.gozoom,'this.gozoom');
|
|
// console.log(params.zoom,'params.gozoom');
|
|
|
|
option.geo[0].label.show = true //下层的geo的中心位置随着上层geo一起改变
|
|
} else {
|
|
option.geo[0].label.show = false //下层的geo的中心位置随着上层geo一起改变
|
|
|
|
}
|
|
that.mapEcharts.setOption(option) //设置option
|
|
})
|
|
|
|
this.mapEcharts.on('click', function (params) {
|
|
if (params.seriesType === 'scatter' && !params.name) {
|
|
let option = that.mapEcharts.getOption() //获得option对象
|
|
// 点击变黄
|
|
option.series[0].data.forEach(item => {
|
|
if (params.data.areaName != item.areaName) {
|
|
if (item.isActive) {
|
|
item.isActive = false
|
|
}
|
|
} else {
|
|
item.isActive = true
|
|
}
|
|
})
|
|
|
|
that.getCompanyList(params.data)
|
|
// set(params)
|
|
that.mapEcharts.setOption(option)
|
|
let domtooltipGB = document.getElementById('tooltipGB')
|
|
if (domtooltipGB) {
|
|
let option = that.mapEcharts.getOption() //获得option对象
|
|
|
|
domtooltipGB.onclick = () => {
|
|
option.series[0].data.forEach(item => {
|
|
item.isActive = false
|
|
})
|
|
|
|
let dom2 = document.getElementsByClassName('iconMap')
|
|
|
|
dom2[0].style.display = 'none'
|
|
// set({ data: { name: '' } })
|
|
that.mapEcharts.setOption(option)
|
|
}
|
|
}
|
|
} else {
|
|
let option = that.mapEcharts.getOption() //获得option对象
|
|
option.series[0].data.forEach(item => {
|
|
item.isActive = false
|
|
})
|
|
let dom2 = document.getElementsByClassName('iconMap')
|
|
dom2[0].style.display = 'none'
|
|
that.mapEcharts.setOption(option)
|
|
}
|
|
})
|
|
let set = event => {
|
|
this.pointAll.forEach((v, i) => {
|
|
if (v.areaName != event.data.areaName) {
|
|
if (v.isActive) {
|
|
v.isActive = false
|
|
}
|
|
} else {
|
|
v.isActive = true
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
setMapOption2() {
|
|
let that = this
|
|
this.pointArea = this.AreaCount
|
|
let splitList2 = [
|
|
{ name: '石嘴山市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
|
|
{ name: '银川市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
|
|
{ name: '吴忠市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
|
|
{ name: '中卫市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
|
|
{ name: '固原市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
|
|
]
|
|
let imgUrl = require('../../assets/img/myImage/tankuang.png')
|
|
let echartOption2 = {
|
|
geo: [
|
|
{
|
|
show: true,
|
|
map: 'hs',
|
|
aspectScale: 0.8,
|
|
zoom: this.zoom2,
|
|
roam: true, // 是否允许缩放
|
|
animationDurationUpdate: 0,
|
|
layoutSize: '82%',
|
|
layoutCenter: ['50%', '48%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: { show: false },
|
|
areaColor: '#281577', //地图颜色
|
|
opacity: 1,
|
|
borderColor: '#5876ba', //地图边框颜色
|
|
borderWidth: 1, //地图边框宽度
|
|
shadowColor: 'none',
|
|
shadowBlur: 10,
|
|
color: '#fff'
|
|
// 设置扇形的阴影
|
|
},
|
|
emphasis: {
|
|
//选中省份的颜色
|
|
areaColor: '#765af3',
|
|
label: { show: false }
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
fontSize: 14,
|
|
fontWeight: 500,
|
|
color: 'rgba(255,255,255,0.5)'
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
areaColor: '#0a183d',
|
|
color: '#fff'
|
|
}
|
|
},
|
|
regions: splitList2
|
|
},
|
|
{
|
|
map: 'hs',
|
|
aspectScale: 0.8,
|
|
roam: true, // 是否允许缩放
|
|
zoom: this.zoom2,
|
|
animationDurationUpdate: 0,
|
|
layoutSize: '82%',
|
|
layoutCenter: ['50%', '50.5%'],
|
|
itemStyle: {
|
|
areaColor: '#6e55dc',
|
|
borderColor: '#6e55dc',
|
|
borderWidth: 1,
|
|
opacity: 0.5,
|
|
color: '#fff'
|
|
},
|
|
zlevel: -1,
|
|
silent: true,
|
|
tooltip: {
|
|
show: false,
|
|
trigger: 'item'
|
|
}
|
|
}
|
|
],
|
|
visualMap: {
|
|
show: false,
|
|
top: 'top',
|
|
min: 0,
|
|
max: 2,
|
|
seriesIndex: 0,
|
|
calculable: true,
|
|
inRange: {
|
|
color: ['#998f74', '#04a4f6', '#00943e', '#dae07b', '#b62022']
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
triggerOn: 'click',
|
|
alwaysShowContent: true,
|
|
showDelay: 0, //浮层显示的延迟
|
|
transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
|
|
enterable: true,
|
|
className: 'iconMap',
|
|
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
|
|
formatter: function (params) {
|
|
if (params.data.areaName) {
|
|
let companyHtml = ''
|
|
that.companyAreaList.forEach(item => {
|
|
if (item.areaId == params.data.areaId) {
|
|
companyHtml +=
|
|
'<div class="itemColor1 itemColor" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">' +
|
|
item.companyName +
|
|
'</div>'
|
|
}
|
|
})
|
|
let html = `
|
|
<div style="width:260px;height:180px;background: url(${imgUrl}) no-repeat; background-size:100% 100%; padding:10px 12px;position: relative;">
|
|
<div id="tooltipGB2" style="position: absolute;cursor:pointer; width:30px;height:30px;line-height:30px;text-align:center;right:5px;top:5px;">X</div>
|
|
<div style="font-size: 14px; height: 20px;line-height:20px;">${params.data.areaName}</div>
|
|
<div class="scrollTooltip" style="margin-top:10px;height:130px; overflow-y:auto;">
|
|
<div style="white-space:normal;font-size: 12px;font-weight: 400;">
|
|
${companyHtml}
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
return html
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
backgroundColor: 'rgba(4,24,51,0)',
|
|
borderColor: 'rgba(99, 173, 222,0)',
|
|
borderWidth: 0,
|
|
padding: [0, -12, 0, 0],
|
|
position: 'right',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontWeight: 'bolder'
|
|
}
|
|
},
|
|
|
|
series: [
|
|
{
|
|
type: 'scatter', //带有涟漪效果的
|
|
coordinateSystem: 'geo', //使用坐标系
|
|
zlevel: 1,
|
|
symbolSize: [36, 48],
|
|
symbol: function (value, params) {
|
|
if (params.data.isActive) {
|
|
return 'image://' + require('@/assets/img/myImage/point_on.png')
|
|
} else {
|
|
return 'image://' + require('@/assets/img/myImage/point.png')
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
color: '#7CC3FF',
|
|
fontSize: 16,
|
|
fontFamily: 'cursive',
|
|
fontWeight: 'bold',
|
|
position: 'top',
|
|
padding: [0, 0, -15, 0],
|
|
formatter: function (params) {
|
|
return params.data.count
|
|
}
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
data: this.pointArea || []
|
|
}
|
|
]
|
|
}
|
|
this.mapEcharts2.setOption(echartOption2)
|
|
|
|
this.mapEcharts2.on('georoam', function (params) {
|
|
let option2 = that.mapEcharts2.getOption() //获得option对象
|
|
if (params.zoom != null && params.zoom != undefined) {
|
|
//捕捉到缩放时
|
|
option2.geo[1].zoom = option2.geo[0].zoom //下层geo的缩放等级跟着上层的geo一起改变
|
|
option2.geo[1].center = option2.geo[0].center //下层的geo的中心位置随着上层geo一起改变
|
|
} else {
|
|
//捕捉到拖曳时
|
|
option2.geo[1].center = option2.geo[0].center //下层的geo的中心位置随着上层geo一起改变
|
|
}
|
|
that.mapEcharts2.setOption(option2) //设置option
|
|
})
|
|
|
|
this.mapEcharts2.on('click', function (params) {
|
|
if (params.seriesType === 'scatter' && !params.name) {
|
|
let option = that.mapEcharts2.getOption() //获得option对象
|
|
|
|
option.series[0].data.forEach(item => {
|
|
if (params.data.areaName != item.areaName) {
|
|
if (item.isActive) {
|
|
item.isActive = false
|
|
}
|
|
} else {
|
|
item.isActive = true
|
|
}
|
|
})
|
|
set2(params)
|
|
that.mapEcharts2.setOption(option)
|
|
let domtooltipGB2 = document.getElementById('tooltipGB2')
|
|
if (domtooltipGB2) {
|
|
domtooltipGB2.onclick = () => {
|
|
let dom2 = document.getElementsByClassName('iconMap')
|
|
option.series[0].data.forEach(item => {
|
|
item.isActive = false
|
|
})
|
|
dom2[0].style.display = 'none'
|
|
set2({ data: { name: '' } })
|
|
that.mapEcharts2.setOption(option)
|
|
}
|
|
}
|
|
} else {
|
|
let option = that.mapEcharts2.getOption() //获得option对象
|
|
option.series[0].data.forEach(item => {
|
|
item.isActive = false
|
|
})
|
|
let dom2 = document.getElementsByClassName('iconMap')
|
|
dom2[0].style.display = 'none'
|
|
that.mapEcharts2.setOption(option)
|
|
}
|
|
})
|
|
|
|
let set2 = event => {
|
|
this.pointArea.forEach((v, i) => {
|
|
if (v.areaName != event.data.areaName) {
|
|
if (v.isActive) {
|
|
v.isActive = false
|
|
}
|
|
} else {
|
|
v.isActive = true
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.centerTopPage {
|
|
width: 100%;
|
|
height: 627px;
|
|
// background:palegoldenrod;
|
|
margin-bottom: 2%;
|
|
padding: 0 10px;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
.iconMap {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1;
|
|
}
|
|
.buttonTop {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
.buttom1 {
|
|
width: 110px;
|
|
height: 32px;
|
|
text-align: center;
|
|
line-height: 32px;
|
|
border-radius: 4px;
|
|
color: #55f3fb;
|
|
// background: url(../../assets/img/checked.png) no-repeat center;
|
|
background-size: 110px 32px;
|
|
margin-right: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.buttom1.on {
|
|
color: #0095ff;
|
|
// background: url(../../assets/img/checked_on.png) no-repeat center;
|
|
background-size: 110px 32px;
|
|
}
|
|
.mapBox {
|
|
width: 100%;
|
|
height: 97%;
|
|
display: flex;
|
|
position: relative;
|
|
#mapEcharts {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#mapEcharts2 {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
z-index: 1000;
|
|
}
|
|
.label-box {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 40px;
|
|
// background: url('../../assets/img/home/labelBg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 10px 15px;
|
|
.item {
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
color: #fff;
|
|
position: relative;
|
|
padding-left: 15px;
|
|
font-size: 16px;
|
|
}
|
|
.item:before {
|
|
content: '';
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #06bbf2;
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 0px;
|
|
}
|
|
.itemColor1:before {
|
|
background: #06bbf2;
|
|
}
|
|
.itemColor2:before {
|
|
background: #2df0fe;
|
|
}
|
|
.itemColor3:before {
|
|
background: #10e0a5;
|
|
}
|
|
.itemColor4:before {
|
|
background: #dcef4e;
|
|
}
|
|
.itemColor5:before {
|
|
background: #f48413;
|
|
}
|
|
.itemColor6:before {
|
|
background: #fc5403;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.scrollTooltip::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
.scrollTooltip::-webkit-scrollbar-thumb {
|
|
background-color: #1653a6;
|
|
border-radius: 10px;
|
|
-webkit-box-shadow: inset 1px 1px 0 #1653a6;
|
|
}
|
|
.itemColor {
|
|
position: relative;
|
|
padding-left: 15px;
|
|
line-height: 22px;
|
|
}
|
|
.itemColor:before {
|
|
content: '';
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #06bbf2;
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 0px;
|
|
}
|
|
.itemColor1:before {
|
|
background: #06bbf2;
|
|
}
|
|
.itemColor2:before {
|
|
background: #2df0fe;
|
|
}
|
|
.itemColor3:before {
|
|
background: #10e0a5;
|
|
}
|
|
.itemColor4:before {
|
|
background: #dcef4e;
|
|
}
|
|
.itemColor5:before {
|
|
background: #f48413;
|
|
}
|
|
.itemColor6:before {
|
|
background: #fc5403;
|
|
}
|
|
</style>
|