1257 lines
47 KiB
Vue
1257 lines
47 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/mapJson/china.json')
|
|
import mapChinaJson from '@/utils/mapJson/china.json'
|
|
import ningxiaJson from '@/utils/mapJson/ningxia.json'
|
|
// let ningxiaJson = require('@/untils/mapJson/ningxia.json')
|
|
export default {
|
|
name: 'centerTopPage',
|
|
props: {
|
|
sendHeight: {
|
|
type: String,
|
|
default: '100%',
|
|
},
|
|
sendMapColor: {
|
|
type: String,
|
|
default: '#689AFB',
|
|
},
|
|
sendGeo: {
|
|
type: Array,
|
|
default: null,
|
|
},
|
|
sendNumber: {
|
|
type: Number,
|
|
},
|
|
showLine: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
sendProjSpin: {
|
|
type: Array | Object,
|
|
},
|
|
},
|
|
watch: {
|
|
sendGeo: {
|
|
handler(newVal, oldVal) {
|
|
console.log(newVal, oldVal)
|
|
if (newVal !== oldVal) {
|
|
this.geoVal = newVal
|
|
this.setMapOption()
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
type: 1,
|
|
zoom: 1.6,
|
|
zoom2: 1.2,
|
|
mapEcharts: null,
|
|
mapEcharts2: null,
|
|
mapJson: null,
|
|
pointArea: this.sendProjSpin,
|
|
pointAll: [],
|
|
companyList: [],
|
|
companyAreaList: [],
|
|
isCity: 0,
|
|
cityCount: [],
|
|
gozoom: 1,
|
|
geoVal: null,
|
|
}
|
|
},
|
|
created() {
|
|
// this.getCompanyList()
|
|
// this.getCompanyAreaList()
|
|
// this.getCityCount()
|
|
},
|
|
mounted() {
|
|
// this.getEquipmentDisByMapApiPage()
|
|
this.getInitData()
|
|
/*let mapElem = document.querySelector('#mapEcharts')
|
|
mapElem.addEventListener('click', (e) => {
|
|
console.log(e)
|
|
})*/
|
|
},
|
|
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() {
|
|
this.mapEcharts.clear()
|
|
//获取当前显示地图下方地市的坐标点数据； 用于气泡显示
|
|
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: this.sendMapColor } } },
|
|
{
|
|
name: '天津市',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '上海市',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '重庆市',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '河北省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '河南省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '云南省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '辽宁省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '黑龙江省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '湖南省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '安徽省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '山东省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '新疆维吾尔自治区',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '江苏省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '浙江省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '江西省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '湖北省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '广西壮族自治区',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '甘肃省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '山西省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '内蒙古自治区',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '陕西省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '吉林省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '福建省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '贵州省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '广东省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '青海省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '西藏自治区',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '四川省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '宁夏回族自治区',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '海南省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '台湾省',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '香港特别行政区',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
},
|
|
{
|
|
name: '澳门特别行政区',
|
|
itemStyle: { normal: { areaColor: this.sendMapColor } }
|
|
}
|
|
]*/
|
|
let imgUrl = require('../../assets/img/myImage/tankuang.png')
|
|
let echartOption = {
|
|
geo: [
|
|
{
|
|
show: true,
|
|
map: 'china',
|
|
type: 'map',
|
|
aspectScale: 0.8,
|
|
zoom: this.zoom,
|
|
roam: true, // 是否允许缩放
|
|
animationDurationUpdate: 0,
|
|
layoutSize: '92%',
|
|
layoutCenter: ['50%', '68%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
areaColor: this.sendMapColor, //地图颜色
|
|
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: this.geoVal || [],
|
|
tooltip: {
|
|
show:true,
|
|
trigger: 'item',
|
|
formatter: function (params) {
|
|
// console.log("1111")
|
|
// console.log(params)
|
|
if (params.componentSubType === 'scatter') {
|
|
let className = 'itemColor1 itemColor'
|
|
let html = `
|
|
<div
|
|
id="pop-tooltip"
|
|
style="
|
|
width:auto;height:180px;border-radius: 15px;
|
|
background: linear-gradient(to bottom, #4D8DFF, #57B9FF, #4D8DFF);
|
|
padding:12px;position: relative;display: flex;flex-direction: column;
|
|
"
|
|
>
|
|
<div id="tooltipGB" onclick="document.querySelector('#pop-tooltip').style.display = 'none'" style="position: absolute;cursor: pointer; width:30px;height:30px;line-height:30px;text-align:center;right:5px;top:5px;font-size: 20px;">x</div>
|
|
<div style="font-size: 18px; height: 20px;line-height:20px;">${params.data.projName}</div>
|
|
<div class="scrollTooltip" style="margin-top:10px;flex: 1; overflow-y:auto;white-space:normal;font-size: 16px;font-weight: 400; position:relative; display: flex; flex-direction: column; justify-content: space-around;">
|
|
<span style="padding-bottom: 5px">所绑定感知设备${params.data.devTypeNum}类</span>
|
|
<span style="padding-bottom: 5px">所绑定感知设备${params.data.devNum}个</span>
|
|
<div style="padding-bottom: 5px">
|
|
<span>设备运行正常${params.data.successNum}个/</span>
|
|
<span style="color:red;">设备数据异常${params.data.errorNum}个</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>`
|
|
return html
|
|
}
|
|
// 可以在这里编写轮播的格式化内容
|
|
// return params.name + ': ' + params.value;
|
|
}
|
|
|
|
},
|
|
},
|
|
{
|
|
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,
|
|
},
|
|
},
|
|
],
|
|
visualMap: {
|
|
show: false,
|
|
top: 'top',
|
|
min: 0,
|
|
max: 2,
|
|
seriesIndex: 0,
|
|
calculable: true,
|
|
inRange: {
|
|
color: [
|
|
'#998f74',
|
|
'#04a4f6',
|
|
'#00943e',
|
|
'#dae07b',
|
|
'#b62022',
|
|
],
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
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) {
|
|
// console.log('222')
|
|
// console.log(params)
|
|
if (params.componentSubType === 'scatter') {
|
|
let className = 'itemColor1 itemColor'
|
|
let html = `
|
|
<div
|
|
id="pop-tooltip"
|
|
style="
|
|
width:260px;height:140px;border-radius: 15px;
|
|
background: linear-gradient(to bottom, #4D8DFF, #57B9FF, #4D8DFF);
|
|
padding:12px;position: relative;display: flex;flex-direction: column;
|
|
"
|
|
>
|
|
<div id="tooltipGB" onclick="document.querySelector('#pop-tooltip').style.display = 'none'" style="position: absolute;cursor: pointer; width:30px;height:30px;line-height:30px;text-align:center;right:5px;top:5px;font-size: 20px;">x</div>
|
|
<div style="font-size: 18px; height: 20px;line-height:20px;">${params.data.projName}</div>
|
|
<div class="scrollTooltip" style="margin-top:10px;flex: 1; overflow-y:auto;white-space:normal;font-size: 16px;font-weight: 400; position:relative; display: flex; flex-direction: column; justify-content: space-around;">
|
|
<span style="padding-bottom: 5px">省份：${params.data.province}</span>
|
|
<span style="padding-bottom: 5px">经度：${params.data.value[0]}</span>
|
|
<span style="padding-bottom: 5px">纬度：${params.data.value[1]}</span>
|
|
</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: this.geoVal || [],
|
|
roam: false,
|
|
coordinateSystem: 'geo', //使用坐标系
|
|
zlevel: 1,
|
|
symbolSize: [80, 90],
|
|
symbol: (value, params) => {
|
|
if (params.data.errorNum>0) {
|
|
return (
|
|
'image://' + require('@/assets/img/myImage/point_red.png')
|
|
)
|
|
} else {
|
|
return (
|
|
'image://' + require('@/assets/img/myImage/point.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')
|
|
}
|
|
if (params.name == '青海省') {
|
|
return 'image://' + require('@/assets/img/myImage/markPoints.png')
|
|
}*/
|
|
},
|
|
emphasis: {
|
|
scale: false,
|
|
},
|
|
symbolKeepAspect: true,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
color: this.sendMapColor === '#689AFB' ? '#fff' : 'rgba(57, 145, 244, 0.9)',
|
|
fontSize: 24,
|
|
fontFamily: 'cursive',
|
|
fontWeight: 'bold',
|
|
position: 'top',
|
|
padding: [0, 0, -10, 0],
|
|
formatter: function (params) {
|
|
let str="";
|
|
// str = `{a|${params.data.projName}}`;
|
|
return str
|
|
},
|
|
// rich: {
|
|
// a: {
|
|
// fontSize: 20,
|
|
// padding: [0, 0, 0, -10],
|
|
// },
|
|
// b: {
|
|
// fontSize: 20,
|
|
// padding: [20, 0, 0, -10],
|
|
// },
|
|
// c: {
|
|
// fontSize: 20,
|
|
// position: [-12, -10],
|
|
// },
|
|
// }
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
data: this.geoVal || [],
|
|
},
|
|
/*{
|
|
name: "lines",
|
|
type: "lines",
|
|
coordinateSystem: "geo",
|
|
zlevel: 2,
|
|
large: true,
|
|
effect: {
|
|
show: true, // 开启动态线条效果
|
|
constantSpeed: 30, // 线条速度
|
|
symbol: "pin", // 标记的图形，支持图片和文字
|
|
symbolSize: 10, // 标记的大小
|
|
trailLength: 0, // 动态线条的长度
|
|
loop: true, // 是否循环动画效果
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
// 根据 status 属性判断连线颜色
|
|
return "#3286CC"
|
|
},
|
|
width: 4,
|
|
opacity: 0.4,
|
|
curveness: 0.2, // 曲线程度
|
|
},
|
|
emphasis: {
|
|
opacity: 0.8,
|
|
width: 5,
|
|
},
|
|
},
|
|
data: [{
|
|
fromName: '北京',
|
|
toName: '上海',
|
|
coords: [
|
|
[116.407526, 39.90403], // 北京的经纬度坐标
|
|
[121.473701, 31.230416], // 上海的经纬度坐标
|
|
]
|
|
}],
|
|
},
|
|
{
|
|
name: "lines",
|
|
type: "lines",
|
|
coordinateSystem: "geo",
|
|
zlevel: 2,
|
|
large: true,
|
|
effect: {
|
|
show: true, // 开启动态线条效果
|
|
constantSpeed: 30, // 线条速度
|
|
symbol: "pin", // 标记的图形，支持图片和文字
|
|
symbolSize: 10, // 标记的大小
|
|
trailLength: 0, // 动态线条的长度
|
|
loop: true, // 是否循环动画效果
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
// 根据 status 属性判断连线颜色
|
|
return "#3286CC"
|
|
},
|
|
width: 4,
|
|
opacity: 0.4,
|
|
curveness: 0.2, // 曲线程度
|
|
},
|
|
emphasis: {
|
|
opacity: 0.8,
|
|
width: 5,
|
|
},
|
|
},
|
|
data: [{
|
|
fromName: '北京',
|
|
toName: '上海',
|
|
coords: [
|
|
[121.473701, 31.230416], // 上海的经纬度坐标
|
|
[102.103365, 24.235567]
|
|
]
|
|
}],
|
|
},*/
|
|
],
|
|
}
|
|
// 去除线条
|
|
// echartOption.series = echartOption.series.filter(item => item.type !== 'lines')
|
|
// 插入线条
|
|
if (this.geoVal && this.showLine) {
|
|
for (let i = 0; i < this.geoVal.length; i++) {
|
|
if (i !== this.geoVal.length - 1) {
|
|
echartOption.series.push({
|
|
name: 'lines',
|
|
type: 'lines',
|
|
coordinateSystem: 'geo',
|
|
zlevel: 2,
|
|
large: true,
|
|
effect: {
|
|
show: true, // 开启动态线条效果
|
|
constantSpeed: 30, // 线条速度
|
|
symbol: 'pin', // 标记的图形，支持图片和文字
|
|
symbolSize: this.geoVal[i].projectId === this.geoVal[i + 1].projectId ? 10 : 0, // 标记的大小
|
|
trailLength: 0, // 动态线条的长度
|
|
loop: true, // 是否循环动画效果
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: function (params) {
|
|
return '#3286CC'
|
|
},
|
|
width: this.geoVal[i].projectId === this.geoVal[i + 1].projectId ? 4 : 0,
|
|
opacity: 0.4,
|
|
curveness: 0.2, // 曲线程度
|
|
},
|
|
emphasis: {
|
|
opacity: 0.8,
|
|
width: 5,
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
fromName: this.geoVal[i].name,
|
|
toName: this.geoVal[i + 1].name,
|
|
coords: [
|
|
this.geoVal[i].value,
|
|
this.geoVal[i + 1].value,
|
|
],
|
|
},
|
|
],
|
|
})
|
|
}
|
|
}
|
|
}
|
|
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.componentSubType === 'scatter') {
|
|
// console.log(params)
|
|
let option = that.mapEcharts.getOption() //获得option对象
|
|
// 点击变黄
|
|
option.series[0].data.forEach((item) => {
|
|
if (params.data.name !== item.name) {
|
|
if (item.isActive) {
|
|
item.isActive = false
|
|
}
|
|
} else {
|
|
item.isActive = true
|
|
}
|
|
})
|
|
that.mapEcharts.setOption(option)
|
|
that.$emit('closeMap', { value: params.data })
|
|
}
|
|
|
|
/*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: var(--send-height);
|
|
height: 100%;
|
|
// 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>
|