1、前提条件
1）
const HuaBei = require('@/assets/json/HuaBei.json')
echarts.registerMap('HuaBei', HuaBei) geo: {
map: 'HuaBei',
nameProperty: 'NAME',
center: [109.94227, 40.39792],
tooltip: {
show: false
},
silent: true,
roam: true,
z: 0,
zoom: 1.2, // 当前视角的缩放比例
aspectScale: 0.86,
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
label: {
show: false
}
},2、添加地图
{
type: 'map',
center: [109.94227, 40.39792],
selectedMode: false, // 此属性可防止关闭点击选择地图区域时，被选中区域显示黄色的问题。
tooltip: { show: false },
itemStyle: {
// borderColor: '#0EA9B8',
// borderWidth: 3,
// areaColor: '#248898',
// shadowColor: 'rgba(0, 0, 0, 0.5)',
// shadowBlur: 2,
// shadowOffsetX: 2,
// shadowOffsetY: 2
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: 'rgba(147, 235, 248, 0.3)' // 0% 处的颜色
},
// {
// offset: 0.5,
// color: 'rgba(147, 235, 248, 0.5)' // 0% 处的颜色
// },
{
offset: 1,
color: 'rgba(147, 235, 248, 0.3)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
emphasis: {
itemStyle: {
// areaColor: '#0EA9B8',
// borderColor: '#0EA9B8',
// borderWidth: 3,
// shadowBlur: 2,
// shadowOffsetX: 2,
// shadowOffsetY: 2
areaColor: 'rgb(4,119,196)',
borderColor: '#0EA9B8',
borderWidth: 3
},
label: {
color: '#fff',
show: true
}
},
zoom: 1.2, // 当前视角的缩放比例
roam: true,
aspectScale: 0.86,
map: 'HuaBei',
data: [
{
name: '北京市',
value: 1000,
itemStyle: {
label: {
show: false
}
}
},
{
name: '天津市',
value: 200,
itemStyle: {
label: {
show: false
}
}
},
{
name: '蒙西',
value: 500,
itemStyle: {
label: {
show: false
}
}
},
{
name: '山西省',
value: 100,
itemStyle: {
label: {
show: false
}
}
},
{
name: '河北省',
value: 700,
itemStyle: {
label: {
show: false
}
}
},
{
name: '山东省',
value: 800,
itemStyle: {
label: {
show: false
}
}
}
// 其他省份数据
],
// zIndex: 99999,
// z: 99999,
label: {
normal: {
show: false,
textStyle: {
fontSize: 16, //字体大小
fontWeight: 'bold',
color: '#fff' //字体颜色
}
}
}
},3、画点
{
name: '电站',
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 7, // 增大闪烁波纹的大小
rippleEffect: {
scale: 4 // 设置波纹效果的放大倍数
},
tooltip: {
show: true,
textStyle: {
color: '#fff'
},
formatter: params => {
const lineState = {
0: '正常运行',
1: '单极运行',
2: '停运'
}
return (
'线路状态: ' +
lineState[params.data.lineState] +
'<br/>' +
// '线路电压进: ' +
// (params.data.lineVoltmeaIn == null
// ? 0
// : Number(params.data.lineVoltmeaIn).toFixed(
// 1
// )) +
// 'kV' +
// '<br/>' +
// '线路电压出: ' +
// (params.data.lineVoltmeaOut == null
// ? 0
// : Number(params.data.lineVoltmeaOut).toFixed(
// 1
// )) +
// 'kV' +
'线路功率方向：' +
(params.data.powTo ? params.data.powTo : '') +
'<br/>' +
'线路有功功率: ' +
(params.data.linePower == null
? 0
: Number(params.data.linePower).toFixed(1)) +
'MW'
)
}
},
data: data.locationOfFactoryStation.map(item => {
return {
lineState: item.lineState,
stationName: item.stationName,
linePower: item.linePower,
value: [item.longitude, item.latitude, 250],
type: 'ranqi',
lineVoltmeaIn: item.lineVoltmeaOut,
lineVoltmeaOut: item.lineVoltmeaOut,
powTo: item.powTo,
lastCheckTime: '2020-01-21 10:30'
}
}),
// symbol: 'image://' + DirectCurrent,
// symbolSize: function (val) {
// return val[2] / 6
// },
label: {
// normal: {
show: true,
formatter: function (params) {
return params.data.stationName
// const lineState = {
// 0: '正常运行',
// 1: '单极运行',
// 2: '停运'
// }
// return (
// '线路状态: ' +
// lineState[params.data.lineState] +
// '\n' +
// '线路电压进: ' +
// Number(params.data.lineVoltmeaIn).toFixed(1) +
// 'kV' +
// '\n' +
// '线路电压出: ' +
// Number(params.data.lineVoltmeaOut).toFixed(1) +
// 'kV' +
// '\n' +
// '线路有功功率: ' +
// params.data.linePower +
// 'MW'
// )
},
position: 'bottom',
color: '#fff',
fontSize: '14',
fontWeight: '800',
// },
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#1D7AFF',
borderWidth: 2,
borderColor: '#1D7AFF'
}
}
},...data.displayPowerPlantInformation.map(item => {
const unit = {
1001: fire,
1002: water,
1003: pit,
1004: wind,
1005: light
}
return {
name: '发电厂',
type: 'effectScatter',
coordinateSystem: 'geo',
tooltip: {
show: true,
textStyle: {
color: '#fff'
},
formatter: params => {
let html = null
html = `电厂总出力：${
params.data.plantPowmea
? Number(params.data.plantPowmea).toFixed(1)
: 0
}MW<br/>运行机组数量：${
params.data.unitNumbrun
? Number(params.data.unitNumbrun).toFixed()
: 0
}台<br/>扰动机组：${
params.data.unitName
}<br/>扰动机组出力：${
params.data.unitPower
? params.data.unitPower
: ''
}`
return html
}
},
symbolSize: 7, // 增大闪烁波纹的大小
rippleEffect: {
scale: 4 // 设置波纹效果的放大倍数
},
data: [
{
...item,
value: [item.longitude, item.latitude, 250]
}
],
// symbol: 'image://' + unit[item.unitTypeid],
// symbolSize: function (val) {
// return val[2] / 1200
// },
label: {
// normal: {
show: true,
formatter: function (params) {
console.log(params)
return params.data.plantName
// return '总有功出力: ' + params.data.plantPowmea
// ? params.data.plantPowmea
// : 0 +
// '\n' +
// '运行机组数量: ' +
// params.data.unitNumbrun
// ? params.data.unitNumbrun
// : 0 +
// '\n' +
// '扰动机组: ' +
// params.data.unitName +
// '\n' +
// '扰动机组出力: ' +
// params.data.unitPower
// ? params.data.unitPower
// : 0 + 'MW'
},
position: 'bottom',
color: '#fff',
fontSize: '14',
fontWeight: '800',
// },
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#42AB78',
shadowBlur: 10,
shadowColor: '#42AB78'
}
},
zlevel: 1
}
})
]4、画线
{
name: '2',
type: 'lines',
coordinateSystem: 'geo',
z: 9999,
zlevel: 2,
effect: {
show: true,
period: 3, //箭头指向速度，值越小速度越快
trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'pin', //箭头图标
symbolSize: 6 //图标大小
},
tooltip: {
show: false,
formatter: function (params) {
return params.name
}
},
data: data.locationOfFactoryStation.map(item => {
// lon 横坐标 数值越大往右
// lat纵坐标 数值越大往上
let obj = {
雁门关换流站: [
[item.longitude, item.latitude],
[item.longitude + 2, item.latitude - 2]
],
锡盟换流站: [
[item.longitude, item.latitude],
[item.longitude + 2, item.latitude - 2]
],
沂南换流站: [
[item.longitude, item.latitude],
[item.longitude + 2, item.latitude - 2]
],
长治站: [
[item.longitude, item.latitude],
[item.longitude + 2, item.latitude - 2]
],
广固换流站: [
[item.longitude, item.latitude],
[item.longitude - 2, item.latitude + 2]
],
胶东换流站: [
[item.longitude, item.latitude],
[item.longitude - 2, item.latitude + 2]
]
}
return {
coords: obj[item.stationName],
lineStyle: {
normal: {
type: 0,
color: '#02B9FF',
opacity: 0.7, //尾迹线条透明度
width: 1, //尾迹线条宽度
curveness: 0.2
}
}
}
})
},5、文字
{
//文字和标志
name: 'light',
type: 'scatter',
coordinateSystem: 'geo',
data: data.locationOfFactoryStation.map(item => {
// lon 横坐标 数值越大往右
// lat纵坐标 数值越大往上
let obj = {
雁淮直流: [
'江苏电网',
[item.longitude + 2, item.latitude - 2]
],
锡泰直流: [
'江苏电网',
[item.longitude + 2, item.latitude - 2]
],
银东直流: [
'宁夏电网',
[item.longitude + 2, item.latitude - 2]
],
昭沂直流: [
'蒙西电网',
[item.longitude + 2, item.latitude - 2]
],
鲁固直流: [
'蒙东电网',
[item.longitude - 2, item.latitude + 2]
],
长南: [
'蒙东电网',
[item.longitude - 2, item.latitude + 2]
]
}
return {
name: obj[item.linename][0],
value: obj[item.linename][1]
}
}),
symbolSize: function (val) {
return 0
},
label: {
normal: {
formatter: '至{b}',
position: 'bottom',
show: true,
color: '#111CE8'
},
emphasis: {
show: true
}
}
},
扫一扫
5871
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
