843 lines
28 KiB
Vue
843 lines
28 KiB
Vue
<template>
|
||
<div style="height: 100%; position: relative">
|
||
<!-- 中国地图 -->
|
||
<div class="top-btns">
|
||
<div class="btn" :class="{ active: btnIndex == 1 }" @click="handleBtn(1)">总价值数</div>
|
||
<div class="btn" :class="{ active: btnIndex == 2 }" @click="handleBtn(2)">在库装备数</div>
|
||
<div class="btn" :class="{ active: btnIndex == 3 }" @click="handleBtn(3)">机械化率</div>
|
||
</div>
|
||
<div class="echarts" id="mapChart"></div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
let mapJson = require('./china.json')
|
||
// let mapBg = require('./assets/home/map-bg.jpg')
|
||
let mapImg = require('./assets/home/china.png')
|
||
let twoIcon = require('./assets/home/yd-icon.png')
|
||
import labelBg from '../../img/value-bg.png'
|
||
import { getUnitEquipmentConfigurationApi, getEquipmentNumberApi, getMechanizationRateApi } from '@/api/wsScreen'
|
||
|
||
console.log(twoIcon)
|
||
import 'echarts-gl'
|
||
export default {
|
||
props: {
|
||
isZoom: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
btnIndex: 1,
|
||
cityData: [
|
||
{
|
||
cityName: '北京市',
|
||
deptName: '北京',
|
||
value: [116.407396, 39.9042, 3500],
|
||
totalValue: 3500,
|
||
totalEquipmentQuantity: 520,
|
||
configRate: 92,
|
||
lineNum: 80,
|
||
substationNum: 40,
|
||
cableNum: 30,
|
||
},
|
||
{
|
||
cityName: '天津市',
|
||
deptName: '天津',
|
||
value: [117.190182, 39.125596, 2600],
|
||
totalValue: 2600,
|
||
totalEquipmentQuantity: 480,
|
||
configRate: 90,
|
||
lineNum: 70,
|
||
substationNum: 32,
|
||
cableNum: 28,
|
||
},
|
||
{
|
||
cityName: '上海市',
|
||
deptName: '上海',
|
||
value: [121.472644, 31.231706, 4200],
|
||
totalValue: 4200,
|
||
totalEquipmentQuantity: 600,
|
||
configRate: 95,
|
||
lineNum: 88,
|
||
substationNum: 46,
|
||
cableNum: 35,
|
||
},
|
||
{
|
||
cityName: '重庆市',
|
||
deptName: '重庆',
|
||
value: [106.551556, 29.563009, 3000],
|
||
totalValue: 3000,
|
||
totalEquipmentQuantity: 510,
|
||
configRate: 91,
|
||
lineNum: 75,
|
||
substationNum: 38,
|
||
cableNum: 33,
|
||
},
|
||
|
||
{
|
||
cityName: '石家庄市',
|
||
deptName: '石家庄',
|
||
value: [114.514859, 38.042307, 2300],
|
||
totalValue: 2300,
|
||
totalEquipmentQuantity: 450,
|
||
configRate: 89,
|
||
lineNum: 68,
|
||
substationNum: 31,
|
||
cableNum: 26,
|
||
},
|
||
{
|
||
cityName: '太原市',
|
||
deptName: '太原',
|
||
value: [112.548879, 37.87059, 2100],
|
||
totalValue: 2100,
|
||
totalEquipmentQuantity: 430,
|
||
configRate: 88,
|
||
lineNum: 60,
|
||
substationNum: 29,
|
||
cableNum: 22,
|
||
},
|
||
{
|
||
cityName: '沈阳市',
|
||
deptName: '沈阳',
|
||
value: [123.431474, 41.805698, 2400],
|
||
totalValue: 2400,
|
||
totalEquipmentQuantity: 455,
|
||
configRate: 89,
|
||
lineNum: 66,
|
||
substationNum: 33,
|
||
cableNum: 25,
|
||
},
|
||
{
|
||
cityName: '长春市',
|
||
deptName: '长春',
|
||
value: [125.323544, 43.817072, 2050],
|
||
totalValue: 2050,
|
||
totalEquipmentQuantity: 410,
|
||
configRate: 87,
|
||
lineNum: 58,
|
||
substationNum: 28,
|
||
cableNum: 23,
|
||
},
|
||
{
|
||
cityName: '哈尔滨市',
|
||
deptName: '哈尔滨',
|
||
value: [126.534967, 45.803775, 2600],
|
||
totalValue: 2600,
|
||
totalEquipmentQuantity: 470,
|
||
configRate: 90,
|
||
lineNum: 72,
|
||
substationNum: 34,
|
||
cableNum: 27,
|
||
},
|
||
|
||
{
|
||
cityName: '南京市',
|
||
deptName: '南京',
|
||
value: [118.796877, 32.060255, 3800],
|
||
totalValue: 3800,
|
||
totalEquipmentQuantity: 580,
|
||
configRate: 94,
|
||
lineNum: 85,
|
||
substationNum: 42,
|
||
cableNum: 34,
|
||
},
|
||
{
|
||
cityName: '杭州市',
|
||
deptName: '杭州',
|
||
value: [120.15507, 30.274084, 3600],
|
||
totalValue: 3600,
|
||
totalEquipmentQuantity: 540,
|
||
configRate: 93,
|
||
lineNum: 82,
|
||
substationNum: 41,
|
||
cableNum: 32,
|
||
},
|
||
{
|
||
cityName: '合肥市',
|
||
deptName: '合肥',
|
||
value: [117.227239, 31.820586, 2800],
|
||
totalValue: 2800,
|
||
totalEquipmentQuantity: 520,
|
||
configRate: 92,
|
||
lineNum: 80,
|
||
substationNum: 40,
|
||
cableNum: 30,
|
||
},
|
||
{
|
||
cityName: '福州市',
|
||
deptName: '福州',
|
||
value: [119.296494, 26.074508, 2500],
|
||
totalValue: 2500,
|
||
totalEquipmentQuantity: 485,
|
||
configRate: 90,
|
||
lineNum: 74,
|
||
substationNum: 34,
|
||
cableNum: 28,
|
||
},
|
||
{
|
||
cityName: '南昌市',
|
||
deptName: '南昌',
|
||
value: [115.892151, 28.676493, 2400],
|
||
totalValue: 2400,
|
||
totalEquipmentQuantity: 465,
|
||
configRate: 89,
|
||
lineNum: 70,
|
||
substationNum: 33,
|
||
cableNum: 27,
|
||
},
|
||
{
|
||
cityName: '济南市',
|
||
deptName: '济南',
|
||
value: [117.000923, 36.675807, 3100],
|
||
totalValue: 3100,
|
||
totalEquipmentQuantity: 550,
|
||
configRate: 93,
|
||
lineNum: 84,
|
||
substationNum: 39,
|
||
cableNum: 31,
|
||
},
|
||
|
||
{
|
||
cityName: '郑州市',
|
||
deptName: '郑州',
|
||
value: [113.625368, 34.746599, 3300],
|
||
totalValue: 3300,
|
||
totalEquipmentQuantity: 560,
|
||
configRate: 94,
|
||
lineNum: 86,
|
||
substationNum: 40,
|
||
cableNum: 32,
|
||
},
|
||
{
|
||
cityName: '武汉市',
|
||
deptName: '武汉',
|
||
value: [114.305393, 30.593099, 3400],
|
||
totalValue: 3400,
|
||
totalEquipmentQuantity: 570,
|
||
configRate: 94,
|
||
lineNum: 87,
|
||
substationNum: 41,
|
||
cableNum: 33,
|
||
},
|
||
{
|
||
cityName: '长沙市',
|
||
deptName: '长沙',
|
||
value: [112.938814, 28.228209, 2900],
|
||
totalValue: 2900,
|
||
totalEquipmentQuantity: 530,
|
||
configRate: 92,
|
||
lineNum: 78,
|
||
substationNum: 38,
|
||
cableNum: 29,
|
||
},
|
||
|
||
{
|
||
cityName: '广州市',
|
||
deptName: '广州',
|
||
value: [113.264435, 23.129163, 4200],
|
||
totalValue: 4200,
|
||
totalEquipmentQuantity: 600,
|
||
configRate: 95,
|
||
lineNum: 90,
|
||
substationNum: 48,
|
||
cableNum: 36,
|
||
},
|
||
{
|
||
cityName: '海口市',
|
||
deptName: '海口',
|
||
value: [110.33119, 20.031971, 2000],
|
||
totalValue: 2000,
|
||
totalEquipmentQuantity: 400,
|
||
configRate: 86,
|
||
lineNum: 55,
|
||
substationNum: 26,
|
||
cableNum: 20,
|
||
},
|
||
|
||
{
|
||
cityName: '成都市',
|
||
deptName: '成都',
|
||
value: [104.065735, 30.659462, 3900],
|
||
totalValue: 3900,
|
||
totalEquipmentQuantity: 580,
|
||
configRate: 94,
|
||
lineNum: 83,
|
||
substationNum: 42,
|
||
cableNum: 34,
|
||
},
|
||
{
|
||
cityName: '贵阳市',
|
||
deptName: '贵阳',
|
||
value: [106.630153, 26.647661, 2100],
|
||
totalValue: 2100,
|
||
totalEquipmentQuantity: 440,
|
||
configRate: 88,
|
||
lineNum: 62,
|
||
substationNum: 30,
|
||
cableNum: 24,
|
||
},
|
||
{
|
||
cityName: '昆明市',
|
||
deptName: '昆明',
|
||
value: [102.833722, 24.88149, 2200],
|
||
totalValue: 2200,
|
||
totalEquipmentQuantity: 450,
|
||
configRate: 88,
|
||
lineNum: 63,
|
||
substationNum: 31,
|
||
cableNum: 24,
|
||
},
|
||
{
|
||
cityName: '西安市',
|
||
deptName: '西安',
|
||
value: [108.93977, 34.341574, 3000],
|
||
totalValue: 3000,
|
||
totalEquipmentQuantity: 525,
|
||
configRate: 92,
|
||
lineNum: 76,
|
||
substationNum: 37,
|
||
cableNum: 29,
|
||
},
|
||
|
||
{
|
||
cityName: '兰州市',
|
||
deptName: '兰州',
|
||
value: [103.834304, 36.061089, 1800],
|
||
totalValue: 1800,
|
||
totalEquipmentQuantity: 390,
|
||
configRate: 85,
|
||
lineNum: 54,
|
||
substationNum: 25,
|
||
cableNum: 19,
|
||
},
|
||
{
|
||
cityName: '西宁市',
|
||
deptName: '西宁',
|
||
value: [101.777795, 36.617134, 1500],
|
||
totalValue: 1500,
|
||
totalEquipmentQuantity: 350,
|
||
configRate: 84,
|
||
lineNum: 50,
|
||
substationNum: 23,
|
||
cableNum: 18,
|
||
},
|
||
{
|
||
cityName: '台北市',
|
||
deptName: '台北',
|
||
value: [121.565418, 25.033964, 3000],
|
||
totalValue: 3000,
|
||
totalEquipmentQuantity: 520,
|
||
configRate: 92,
|
||
lineNum: 78,
|
||
substationNum: 39,
|
||
cableNum: 29,
|
||
},
|
||
|
||
{
|
||
cityName: '呼和浩特市',
|
||
deptName: '呼和浩特',
|
||
value: [111.75199, 40.84149, 1600],
|
||
totalValue: 1600,
|
||
totalEquipmentQuantity: 360,
|
||
configRate: 84,
|
||
lineNum: 52,
|
||
substationNum: 24,
|
||
cableNum: 19,
|
||
},
|
||
{
|
||
cityName: '南宁市',
|
||
deptName: '南宁',
|
||
value: [108.366543, 22.817002, 2100],
|
||
totalValue: 2100,
|
||
totalEquipmentQuantity: 440,
|
||
configRate: 88,
|
||
lineNum: 62,
|
||
substationNum: 29,
|
||
cableNum: 24,
|
||
},
|
||
{
|
||
cityName: '拉萨市',
|
||
deptName: '拉萨',
|
||
value: [91.171924, 29.652491, 1200],
|
||
totalValue: 1200,
|
||
totalEquipmentQuantity: 300,
|
||
configRate: 82,
|
||
lineNum: 40,
|
||
substationNum: 18,
|
||
cableNum: 12,
|
||
},
|
||
{
|
||
cityName: '银川市',
|
||
deptName: '银川',
|
||
value: [106.278179, 38.46637, 1500],
|
||
totalValue: 1500,
|
||
totalEquipmentQuantity: 340,
|
||
configRate: 83,
|
||
lineNum: 48,
|
||
substationNum: 22,
|
||
cableNum: 17,
|
||
},
|
||
{
|
||
cityName: '乌鲁木齐市',
|
||
deptName: '乌鲁木齐',
|
||
value: [87.616848, 43.825592, 1900],
|
||
totalValue: 1900,
|
||
totalEquipmentQuantity: 380,
|
||
configRate: 85,
|
||
lineNum: 55,
|
||
substationNum: 27,
|
||
cableNum: 20,
|
||
},
|
||
|
||
{
|
||
cityName: '香港',
|
||
deptName: '香港',
|
||
value: [114.173355, 22.320048, 2500],
|
||
totalValue: 2500,
|
||
totalEquipmentQuantity: 420,
|
||
configRate: 88,
|
||
lineNum: 65,
|
||
substationNum: 30,
|
||
cableNum: 24,
|
||
},
|
||
{
|
||
cityName: '澳门',
|
||
deptName: '澳门',
|
||
value: [113.54909, 22.198951, 1600],
|
||
totalValue: 1600,
|
||
totalEquipmentQuantity: 330,
|
||
configRate: 83,
|
||
lineNum: 48,
|
||
substationNum: 22,
|
||
cableNum: 18,
|
||
},
|
||
],
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initChart()
|
||
// this.getInfo()
|
||
},
|
||
|
||
methods: {
|
||
handleBtn(index) {
|
||
this.btnIndex = index
|
||
console.log('🚀 ~ this.btnIndex:', this.btnIndex)
|
||
// this.cityData = []
|
||
// this.getInfo()
|
||
},
|
||
async getInfo() {
|
||
try {
|
||
let res = null
|
||
if (this.btnIndex == 1) {
|
||
res = await getUnitEquipmentConfigurationApi()
|
||
if (!res.data) return
|
||
res.data = res.data.filter(item => item.location)
|
||
this.cityData = res.data.map((item) => {
|
||
let value = item.location.split(',')
|
||
value.push(item.totalValue)
|
||
// console.log('🚀 ~ getInfo ~ value:', value)
|
||
return {
|
||
...item,
|
||
value,
|
||
}
|
||
})
|
||
} else if (this.btnIndex == 2) {
|
||
res = await getEquipmentNumberApi()
|
||
if (!res.data) return
|
||
res.data = res.data.filter(item => item.location)
|
||
this.cityData = res.data.map((item) => {
|
||
let value = item.location.split(',')
|
||
value.push(item.num)
|
||
// console.log('🚀 ~ getInfo ~ value:', value)
|
||
return {
|
||
...item,
|
||
value,
|
||
deptName: item.name,
|
||
}
|
||
})
|
||
} else if (this.btnIndex == 3) {
|
||
res = await getMechanizationRateApi()
|
||
}
|
||
this.$nextTick(() => {
|
||
console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
|
||
this.initChart()
|
||
})
|
||
console.log('🚀 ~ 地图数据 ~ res:', res)
|
||
} catch (error) {
|
||
console.log('🚀 ~ 地图数据 ~ error:', error)
|
||
// this.initChart()
|
||
}
|
||
},
|
||
initChart(jsonData = mapJson) {
|
||
console.log('🚀 ~ 地图初始化 ~ arr:')
|
||
// 模拟数据
|
||
let arr = this.cityData.map((item) => {
|
||
return {
|
||
...item,
|
||
name: item.cityName,
|
||
}
|
||
})
|
||
|
||
echarts.registerMap('china', jsonData)
|
||
const charEle = document.getElementById('mapChart')
|
||
const myChart = echarts.init(charEle)
|
||
// let tooltip = gzjhTooltip(arr)
|
||
const option = {
|
||
tooltip: {
|
||
show: true,
|
||
backgroundColor: 'transparent',
|
||
borderWidth: 0,
|
||
formatter: function (e) {
|
||
let n = e.name
|
||
let res = ''
|
||
arr.forEach((data) => {
|
||
// console.log('🚀 ~ 提示数据 ~ data:', data)
|
||
if (data.cityName === n) {
|
||
res =
|
||
"<div style='width: 330px;height: 285px; background: url(" +
|
||
require('../../img/dialog.png') +
|
||
") no-repeat;background-size:100% 100%;'>" +
|
||
"<div style='width: 300px;height: 34px;display: flex;align-items: center;text-shadow:0px 3px 6px #001441; padding-left: 30px;font-family: DS-TITLE;color:#FFF;font-size:22px;padding-top: 10px;'>" +
|
||
n +
|
||
'</div>' +
|
||
"<div style='margin-top:10px;margin-bottom:5px;width: 300px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
||
require('./assets/home/map-item-row.png') +
|
||
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||
'<div>装备价值：' +
|
||
'</div>' +
|
||
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1);'>" +
|
||
data.totalValue +
|
||
" <span style='color:#FFF;font-size:14px'> 万元</span>" +
|
||
'</div>' +
|
||
'</div>' +
|
||
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
||
require('./assets/home/map-item-row.png') +
|
||
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||
'<div>装备数量：' +
|
||
'</div>' +
|
||
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||
data.totalEquipmentQuantity +
|
||
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
||
'</div>' +
|
||
'</div>' +
|
||
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
||
require('./assets/home/map-item-row.png') +
|
||
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||
'<div>配置率：' +
|
||
'</div>' +
|
||
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||
data.configRate +
|
||
"<span style='color:#FFF;font-size:14px'> %</span>" +
|
||
'</div>' +
|
||
'</div>' +
|
||
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
||
require('./assets/home/map-item-row.png') +
|
||
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||
'<div>线路数量：' +
|
||
'</div>' +
|
||
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||
data.lineNum +
|
||
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
||
'</div>' +
|
||
'</div>' +
|
||
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
||
require('./assets/home/map-item-row.png') +
|
||
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||
'<div>变电数量：' +
|
||
'</div>' +
|
||
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||
data.substationNum +
|
||
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
||
'</div>' +
|
||
'</div>' +
|
||
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
||
require('./assets/home/map-item-row.png') +
|
||
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||
'<div>电缆数量：' +
|
||
'</div>' +
|
||
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||
data.cableNum +
|
||
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
||
'</div>' +
|
||
'</div>' +
|
||
'</div>'
|
||
}
|
||
})
|
||
return res
|
||
},
|
||
},
|
||
geo3D: {
|
||
map: 'china',
|
||
zoom: 1,
|
||
roam: false,
|
||
label: { show: false },
|
||
itemStyle: {
|
||
opacity: 0, //.01 // important!
|
||
},
|
||
emphasis: {
|
||
label: { show: false },
|
||
itemStyle: { opacity: 0 },
|
||
},
|
||
regionHeight: 0,
|
||
shading: 'lambert',
|
||
// lambertMaterial: {
|
||
// detailTexture: mapBg
|
||
// },
|
||
|
||
viewControl: {
|
||
zoomSensitivity: false,
|
||
rotateSensitivity: 0,
|
||
projection: 'orthographic',
|
||
autoRotate: false,
|
||
autoRotateAfterStill: 1,
|
||
orthographicSize: 61,
|
||
// minAlpha: 20, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
|
||
// maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
|
||
// minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
|
||
// maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
|
||
animation: false, // 是否开启动画。[ default: true ]
|
||
animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
|
||
animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
|
||
},
|
||
light: {
|
||
//光照阴影
|
||
main: {
|
||
color: '#02fce7', //光照颜色
|
||
intensity: 0.5, //光照强度
|
||
shadow: true, //是否显示阴影
|
||
shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
|
||
alpha: 30,
|
||
beta: 90,
|
||
},
|
||
ambient: {
|
||
color: '#fff',
|
||
intensity: 1,
|
||
},
|
||
},
|
||
zlevel: -8,
|
||
},
|
||
// 要显示的散点数据
|
||
series: [
|
||
{
|
||
// left: 12,
|
||
// top: 22,
|
||
// bottom: 20,
|
||
type: 'map3D',
|
||
map: 'china',
|
||
roam: false,
|
||
data: arr,
|
||
itemStyle: {
|
||
// color: "#4b6f52",
|
||
color: 'transparent',
|
||
borderWidth: 2,
|
||
borderColor: 'transparent', // #6CCEE0
|
||
opacity: 1,
|
||
},
|
||
emphasis: {
|
||
disabled: true, //是否可以被选中
|
||
label: {
|
||
//移入时的高亮文本
|
||
show: true,
|
||
color: '#FFF', //显示字体颜色变淡
|
||
},
|
||
itemStyle: {
|
||
// color: "#4b6f52",
|
||
color: 'rgba(3,240,247,0.3)',
|
||
},
|
||
},
|
||
regionHeight: 2.9,
|
||
shading: 'lambert',
|
||
// lambertMaterial: {
|
||
// detailTexture: mapBg,
|
||
// textureTiling: 1,
|
||
// // textureOffset:20
|
||
// },
|
||
viewControl: {
|
||
zoomSensitivity: false,
|
||
rotateSensitivity: 0,
|
||
projection: 'orthographic',
|
||
autoRotate: false,
|
||
autoRotateAfterStill: 1,
|
||
orthographicSize: 61.5,
|
||
// minAlpha: 20, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
|
||
// maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
|
||
// minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
|
||
// maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
|
||
animation: false, // 是否开启动画。[ default: true ]
|
||
animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
|
||
animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
|
||
},
|
||
label: {
|
||
show: false,
|
||
color: '#FFF',
|
||
position: 'top',
|
||
fontSize: 18,
|
||
},
|
||
light: {
|
||
//光照阴影
|
||
main: {
|
||
color: 'rgb(14,70,82)', //光照颜色
|
||
intensity: 0.1, //光照强度
|
||
shadow: true, //是否显示阴影
|
||
shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
|
||
alpha: 30,
|
||
beta: 90,
|
||
},
|
||
ambient: {
|
||
color: '#fff',
|
||
intensity: 1,
|
||
},
|
||
},
|
||
zlevel: 1,
|
||
zoom: 1,
|
||
scaleLimit: {
|
||
// 限制缩放的比例
|
||
min: 1, // 最小缩放比例
|
||
max: 1, // 最大缩放比例
|
||
},
|
||
},
|
||
{
|
||
type: 'scatter3D',
|
||
data: arr,
|
||
symbol: 'circle',
|
||
symbolSize: 18,
|
||
coordinateSystem: 'geo3D',
|
||
label: {
|
||
show: true,
|
||
position: 'top', // 先指定一个基准位置（如 'top'）
|
||
offset: [0, -10], // 向上偏移 10px（x 方向 0，y 方向 -10）
|
||
// triggerEvent: true,
|
||
formatter: (params) => {
|
||
// console.log('🚀 ~ initChart ~ params:', params)
|
||
const val = params.data.value || []
|
||
let unit = ''
|
||
if (this.btnIndex === 1) unit = '万元'
|
||
else if (this.btnIndex === 2) unit = '台'
|
||
else if (this.btnIndex === 3) unit = '%'
|
||
return val.length
|
||
? `{val|${val[2]} ${unit}}\n{name|${
|
||
params.data.deptName
|
||
}}`
|
||
: `{name|${params.data.deptName}}`
|
||
},
|
||
rich: {
|
||
val: {
|
||
backgroundColor: { image: labelBg },
|
||
height: 28,
|
||
minWidth: 70,
|
||
lineHeight: 28,
|
||
padding: [0, 10],
|
||
align: 'center',
|
||
verticalAlign: 'middle',
|
||
color: '#fff',
|
||
fontSize: 23,
|
||
},
|
||
name: {
|
||
color: '#fff',
|
||
fontFamily: 'DS-TITLE',
|
||
fontSize: 21,
|
||
padding: [6, 0, 0, 0],
|
||
},
|
||
},
|
||
},
|
||
itemStyle: {
|
||
color: 'rgba(217, 94, 0, 1)',
|
||
},
|
||
zlevel: 1,
|
||
},
|
||
],
|
||
graphic: {
|
||
elements: [
|
||
{
|
||
type: 'image',
|
||
style: {
|
||
image: mapImg, // 图片的 URL
|
||
width: 1330, // 图片宽度
|
||
height: 670, // 图片高度
|
||
// 位置根据实际需求调整
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
left: 'center',
|
||
top: 'center',
|
||
// zlevel: 0,
|
||
},
|
||
],
|
||
},
|
||
}
|
||
myChart.setOption(option)
|
||
// 监听地图绑定双击事件（双击进入地图下一级）
|
||
// myChart.on('click', (params) => {
|
||
// console.log('🚀 ~ 点击 ~ params-->:', params)
|
||
// console.log('🚀 ~ initChart ~ params.data-->>:', params.data)
|
||
// if (params.seriesType === 'map3D' && params.data) {
|
||
// let city =
|
||
// params.data.deptName == '安徽送变电工程有限公司' ? '安徽送变电' : params.data.name.replace(/市$/, '')
|
||
|
||
// console.log('🚀 ~ initChart ~ this.$router:', this.$router)
|
||
// this.$router.push({
|
||
// path: '/screen/cityScreen',
|
||
// query: {
|
||
// cityName: city,
|
||
// },
|
||
// })
|
||
// }
|
||
// })
|
||
myChart.on('mouseover', (params) => {
|
||
// console.log('🚀 ~ 移入 ~ params:', params)
|
||
})
|
||
myChart.on('mouseout', () => {
|
||
// this.selectedCity = null
|
||
})
|
||
return myChart
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.echarts {
|
||
width: 1300px;
|
||
height: 790px;
|
||
display: flex;
|
||
margin: 0 auto;
|
||
transform: scale(1, 1.15);
|
||
/* transform-origin: 50% 30%; */
|
||
}
|
||
|
||
.top-btns {
|
||
margin-top: 100px;
|
||
margin-left: -180px;
|
||
display: flex;
|
||
justify-content: center;
|
||
z-index: 9999999;
|
||
.btn:not(:last-child) {
|
||
margin-right: 80px;
|
||
}
|
||
|
||
.btn {
|
||
font-size: 18px;
|
||
text-align: center;
|
||
padding: 6px 15px;
|
||
font-family: DS-TITLE;
|
||
color: #ccc;
|
||
background-image: url('../../img/btn.png');
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background-image: url('../../img/btn-active.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
</style>
|