You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1175 lines
27 KiB
1175 lines
27 KiB
import { Component, OnInit } from "@angular/core"; |
|
import * as echarts from "echarts"; |
|
declare var T: any; |
|
@Component({ |
|
selector: "app-gis-home", |
|
templateUrl: "./gis-home.component.html", |
|
styleUrls: ["./gis-home.component.scss"], |
|
}) |
|
export class GisHomeComponent implements OnInit { |
|
constructor() {} |
|
|
|
ngOnInit(): void { |
|
this.initMap(); |
|
this.initEcharts(); |
|
} |
|
|
|
echartleft1; |
|
echartleft1Data = [ |
|
{ value: 1312, name: "综合应急预案" }, |
|
{ value: 1583, name: "专项应急预案" }, |
|
{ value: 1235, name: "现场处置方案" }, |
|
{ value: 1852, name: "应急处置卡" }, |
|
{ value: 1735, name: "应急预案" }, |
|
{ value: 1258, name: "类型预案" }, |
|
{ value: 600, name: "I-V级预案" }, |
|
]; |
|
echartleft1Option = { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
title: { |
|
text: "9,333", |
|
subtext: "预案总数", |
|
left: "28.5%", |
|
x: "center", |
|
y: "center", |
|
textAlign: "center", |
|
textStyle: { |
|
color: "#fff", |
|
fontSize: 26, |
|
lineHeight: 15, |
|
fontWeight: "bold", |
|
textShadowBlur: 20, |
|
textShadowColor: "#fff", |
|
}, |
|
subtextStyle: { |
|
color: "#759EBB", |
|
fontSize: 14, |
|
fontWeight: "normal", |
|
}, |
|
}, |
|
color: [ |
|
"#1DA7C0", |
|
"#01CFA1", |
|
"#F67B44", |
|
"#CECE41", |
|
"#7641CE", |
|
"#CE4148", |
|
"#FFA192", |
|
], |
|
legend: { |
|
orient: "vertical", |
|
left: "55%", //图例距离左的距离 |
|
y: "center", //图例上下居中 |
|
itemWidth: 8, |
|
itemHeight: 8, |
|
itemGap: 18, |
|
textStyle: { |
|
color: "#fff", |
|
rich: { |
|
name: { |
|
fontSize: 13, |
|
color: "#9698A0", |
|
width: 80, |
|
padding: [-2, 0, 0, 0], |
|
}, |
|
num: { |
|
fontSize: 13, |
|
padding: [-2, 0, 0, 0], |
|
color: "#fff", |
|
}, |
|
}, |
|
}, |
|
formatter: (name) => { |
|
//图例后添加数值 |
|
let data = this.echartleft1Data; |
|
let tarValue; |
|
for (let i = 0; i < data.length; i++) { |
|
if (data[i].name === name) { |
|
tarValue = data[i].value; |
|
} |
|
} |
|
return `{name|${name}}` + " | " + `{num|${tarValue}}`; |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
// name: "Access From", |
|
type: "pie", |
|
radius: ["40%", "55%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: "center", |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
labelLine: { |
|
show: false, |
|
}, |
|
data: this.echartleft1Data, |
|
}, |
|
// 边框的设置 |
|
{ |
|
radius: ["36%", "41%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
type: "pie", |
|
label: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
labelLine: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
animation: false, |
|
tooltip: { |
|
show: false, |
|
}, |
|
data: [ |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
color: "#183E57", |
|
}, |
|
}, |
|
], |
|
}, |
|
{ |
|
//装饰作用 |
|
type: "pie", |
|
clockWise: false, |
|
radius: ["60%", "61%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
hoverAnimation: false, |
|
startAngle: 95, //起始角度 |
|
color: ["#297b9e"], |
|
tooltip: { |
|
show: false, |
|
}, |
|
itemStyle: { |
|
normal: { |
|
label: { |
|
show: false, |
|
}, |
|
}, |
|
}, |
|
data: [ |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
], |
|
}, |
|
], |
|
}; |
|
echartleft2; |
|
echartleft2Data = [ |
|
{ value: 3523, name: "综合演练" }, |
|
{ value: 2560, name: "跨区域演练" }, |
|
{ value: 853, name: "单项演练" }, |
|
{ value: 1237, name: "研究性演练" }, |
|
]; |
|
echartleft2Option = { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
title: { |
|
text: "8,173", |
|
subtext: "演练总数", |
|
left: "28.5%", |
|
x: "center", |
|
y: "center", |
|
textAlign: "center", |
|
textStyle: { |
|
color: "#fff", |
|
fontSize: 26, |
|
lineHeight: 15, |
|
fontWeight: "bold", |
|
textShadowBlur: 20, |
|
textShadowColor: "#fff", |
|
}, |
|
subtextStyle: { |
|
color: "#759EBB", |
|
fontSize: 14, |
|
fontWeight: "normal", |
|
}, |
|
}, |
|
color: [ |
|
"#1DA7C0", |
|
"#01CFA1", |
|
"#F67B44", |
|
"#CECE41", |
|
"#7641CE", |
|
"#CE4148", |
|
"#FFA192", |
|
], |
|
legend: { |
|
orient: "vertical", |
|
left: "55%", //图例距离左的距离 |
|
y: "center", //图例上下居中 |
|
itemWidth: 8, |
|
itemHeight: 8, |
|
itemGap: 18, |
|
textStyle: { |
|
color: "#fff", |
|
rich: { |
|
name: { |
|
fontSize: 13, |
|
color: "#9698A0", |
|
width: 80, |
|
padding: [-2, 0, 0, 0], |
|
}, |
|
num: { |
|
fontSize: 13, |
|
padding: [-2, 0, 0, 0], |
|
color: "#fff", |
|
}, |
|
}, |
|
}, |
|
formatter: (name) => { |
|
//图例后添加数值 |
|
let data = this.echartleft2Data; |
|
let tarValue; |
|
for (let i = 0; i < data.length; i++) { |
|
if (data[i].name === name) { |
|
tarValue = data[i].value; |
|
} |
|
} |
|
return `{name|${name}}` + " | " + `{num|${tarValue}}`; |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
// name: "Access From", |
|
type: "pie", |
|
radius: ["60%", "80%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: "center", |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
labelLine: { |
|
show: false, |
|
}, |
|
data: this.echartleft2Data, |
|
}, |
|
// 边框的设置 |
|
{ |
|
radius: ["55%", "61%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
type: "pie", |
|
label: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
labelLine: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
animation: false, |
|
tooltip: { |
|
show: false, |
|
}, |
|
data: [ |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
color: "#183E57", |
|
}, |
|
}, |
|
], |
|
}, |
|
{ |
|
//装饰作用 |
|
type: "pie", |
|
clockWise: false, |
|
radius: ["87%", "88%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
hoverAnimation: false, |
|
startAngle: 95, //起始角度 |
|
color: ["#297b9e"], |
|
tooltip: { |
|
show: false, |
|
}, |
|
itemStyle: { |
|
normal: { |
|
label: { |
|
show: false, |
|
}, |
|
}, |
|
}, |
|
data: [ |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
], |
|
}, |
|
], |
|
}; |
|
echartleft3; |
|
echartleft3Data = [ |
|
{ value: 1523, name: "待核实" }, |
|
{ value: 3560, name: "整改中" }, |
|
{ value: 1853, name: "待验收" }, |
|
{ value: 1237, name: "已完成" }, |
|
]; |
|
echartleft3Option = { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
title: { |
|
text: "9,173", |
|
subtext: "隐患总数", |
|
left: "28.5%", |
|
x: "center", |
|
y: "center", |
|
textAlign: "center", |
|
textStyle: { |
|
color: "#fff", |
|
fontSize: 26, |
|
lineHeight: 15, |
|
fontWeight: "bold", |
|
textShadowBlur: 20, |
|
textShadowColor: "#fff", |
|
}, |
|
subtextStyle: { |
|
color: "#759EBB", |
|
fontSize: 14, |
|
fontWeight: "normal", |
|
}, |
|
}, |
|
color: [ |
|
"#1DA7C0", |
|
"#01CFA1", |
|
"#F67B44", |
|
"#CECE41", |
|
"#7641CE", |
|
"#CE4148", |
|
"#FFA192", |
|
], |
|
legend: { |
|
orient: "vertical", |
|
left: "55%", //图例距离左的距离 |
|
y: "center", //图例上下居中 |
|
itemWidth: 8, |
|
itemHeight: 8, |
|
itemGap: 18, |
|
textStyle: { |
|
color: "#fff", |
|
rich: { |
|
name: { |
|
fontSize: 13, |
|
color: "#9698A0", |
|
width: 80, |
|
padding: [-2, 0, 0, 0], |
|
}, |
|
num: { |
|
fontSize: 13, |
|
padding: [-2, 0, 0, 0], |
|
color: "#fff", |
|
}, |
|
}, |
|
}, |
|
formatter: (name) => { |
|
//图例后添加数值 |
|
let data = this.echartleft3Data; |
|
let tarValue; |
|
for (let i = 0; i < data.length; i++) { |
|
if (data[i].name === name) { |
|
tarValue = data[i].value; |
|
} |
|
} |
|
return `{name|${name}}` + " | " + `{num|${tarValue}}`; |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
// name: "Access From", |
|
type: "pie", |
|
radius: ["60%", "80%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: "center", |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
labelLine: { |
|
show: false, |
|
}, |
|
data: this.echartleft3Data, |
|
}, |
|
// 边框的设置 |
|
{ |
|
radius: ["55%", "61%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
type: "pie", |
|
label: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
labelLine: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
animation: false, |
|
tooltip: { |
|
show: false, |
|
}, |
|
data: [ |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
color: "#183E57", |
|
}, |
|
}, |
|
], |
|
}, |
|
{ |
|
//装饰作用 |
|
type: "pie", |
|
clockWise: false, |
|
radius: ["87%", "88%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
hoverAnimation: false, |
|
startAngle: 95, //起始角度 |
|
color: ["#297b9e"], |
|
tooltip: { |
|
show: false, |
|
}, |
|
itemStyle: { |
|
normal: { |
|
label: { |
|
show: false, |
|
}, |
|
}, |
|
}, |
|
data: [ |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
], |
|
}, |
|
], |
|
}; |
|
|
|
echartright1; |
|
echartright1Data = [ |
|
{ percentage: "20%", value: 1312, name: "进出口停车" }, |
|
{ percentage: "15%", value: 1583, name: "前庭接打电话" }, |
|
{ percentage: "15%", value: 1235, name: "收银员着装" }, |
|
{ percentage: "10%", value: 1852, name: "油罐区入侵" }, |
|
{ percentage: "10%", value: 1735, name: "卸油中无人监卸" }, |
|
{ percentage: "10%", value: 1258, name: "连接卸油管" }, |
|
{ percentage: "10%", value: 600, name: "卸油设置消防器材" }, |
|
{ percentage: "10%", value: 2541, name: "卸油连接静电接地" }, |
|
]; |
|
echartright1Option = { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
title: { |
|
text: "3,675", |
|
subtext: "累计预警", |
|
left: "28.5%", |
|
top: "70%", |
|
x: "center", |
|
y: "center", |
|
textAlign: "center", |
|
textStyle: { |
|
color: "#fff", |
|
fontSize: 26, |
|
lineHeight: 15, |
|
fontWeight: "bold", |
|
textShadowBlur: 20, |
|
textShadowColor: "#fff", |
|
}, |
|
subtextStyle: { |
|
color: "#759EBB", |
|
fontSize: 14, |
|
fontWeight: "normal", |
|
}, |
|
}, |
|
color: [ |
|
"#FE6441", |
|
"#FB726B", |
|
"#E0E035", |
|
"#3CEBE6", |
|
"#3EB2E8", |
|
"#4265E8", |
|
"#3EE8A2", |
|
"#C63EE8", |
|
], |
|
legend: { |
|
orient: "vertical", |
|
left: "52%", //图例距离左的距离 |
|
y: "center", //图例上下居中 |
|
itemWidth: 8, |
|
itemHeight: 8, |
|
itemGap: 12, |
|
textStyle: { |
|
color: "#fff", |
|
rich: { |
|
name: { |
|
fontSize: 13, |
|
color: "#9698A0", |
|
width: 100, |
|
padding: [-2, 0, 0, 0], |
|
}, |
|
num: { |
|
fontSize: 13, |
|
padding: [-2, 0, 0, 0], |
|
color: "#fff", |
|
}, |
|
}, |
|
}, |
|
formatter: (name) => { |
|
//图例后添加数值 |
|
let data = this.echartright1Data; |
|
let tarValue; |
|
for (let i = 0; i < data.length; i++) { |
|
if (data[i].name === name) { |
|
tarValue = data[i].percentage; |
|
} |
|
} |
|
return `{name|${name}}` + " | " + `{num|${tarValue}}`; |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
// name: "Access From", |
|
type: "pie", |
|
radius: "45%", |
|
center: ["30%", "35%"], //图的位置，距离左跟上的位置 |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: "center", |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
labelLine: { |
|
show: false, |
|
}, |
|
data: this.echartright1Data, |
|
}, |
|
// 边框的设置 |
|
{ |
|
radius: ["45%", "55%"], |
|
center: ["30%", "35%"], //图的位置，距离左跟上的位置 |
|
type: "pie", |
|
label: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
labelLine: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
animation: false, |
|
tooltip: { |
|
show: false, |
|
}, |
|
data: [ |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
color: "RGBA(35, 68, 100, 0.8)", |
|
}, |
|
}, |
|
], |
|
}, |
|
], |
|
}; |
|
|
|
echartright2; |
|
echartright2Data = [ |
|
{ percentage: "20%", value: 1312, name: "无人监卸" }, |
|
{ percentage: "15%", value: 1583, name: "连接卸油管" }, |
|
{ percentage: "15%", value: 1235, name: "卸油设置消防器材" }, |
|
{ percentage: "10%", value: 1852, name: "卸油设置静电接地" }, |
|
{ percentage: "10%", value: 1735, name: "卸油设置隔离区" }, |
|
]; |
|
echartright2Option = { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
title: { |
|
text: "3,675", |
|
subtext: "卸油预警", |
|
left: "28.5%", |
|
x: "center", |
|
y: "center", |
|
textAlign: "center", |
|
textStyle: { |
|
color: "#fff", |
|
fontSize: 22, |
|
lineHeight: 8, |
|
fontWeight: "bold", |
|
textShadowBlur: 20, |
|
textShadowColor: "#fff", |
|
}, |
|
subtextStyle: { |
|
color: "#759EBB", |
|
fontSize: 13, |
|
fontWeight: "normal", |
|
}, |
|
}, |
|
color: [ |
|
"#FE6441", |
|
"#FB726B", |
|
"#E0E035", |
|
"#3CEBE6", |
|
"#3EB2E8", |
|
"#4265E8", |
|
"#3EE8A2", |
|
"#C63EE8", |
|
], |
|
legend: { |
|
orient: "vertical", |
|
left: "52%", //图例距离左的距离 |
|
y: "center", //图例上下居中 |
|
itemWidth: 8, |
|
itemHeight: 8, |
|
itemGap: 12, |
|
textStyle: { |
|
color: "#fff", |
|
rich: { |
|
name: { |
|
fontSize: 13, |
|
color: "#9698A0", |
|
width: 100, |
|
padding: [-2, 0, 0, 0], |
|
}, |
|
num: { |
|
fontSize: 13, |
|
padding: [-2, 0, 0, 0], |
|
color: "#fff", |
|
}, |
|
}, |
|
}, |
|
formatter: (name) => { |
|
//图例后添加数值 |
|
let data = this.echartright2Data; |
|
let tarValue; |
|
for (let i = 0; i < data.length; i++) { |
|
if (data[i].name === name) { |
|
tarValue = data[i].percentage; |
|
} |
|
} |
|
return `{name|${name}}` + " | " + `{num|${tarValue}}`; |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
// name: "Access From", |
|
type: "pie", |
|
radius: ["50%", "70%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: "center", |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
labelLine: { |
|
show: false, |
|
}, |
|
data: this.echartright2Data, |
|
}, |
|
{ |
|
name: "外边框", |
|
type: "pie", |
|
clockWise: false, //顺时加载 |
|
hoverAnimation: false, //鼠标移入变大 |
|
center: ["30%", "50%"], |
|
radius: ["77%", "78%"], |
|
label: { |
|
normal: { |
|
show: false, |
|
}, |
|
}, |
|
data: [ |
|
{ |
|
value: 9, |
|
name: "", |
|
itemStyle: { |
|
normal: { |
|
borderWidth: 1, |
|
borderColor: "#435067", |
|
}, |
|
}, |
|
}, |
|
], |
|
}, |
|
{ |
|
// name: "外部刻度", |
|
type: "gauge", |
|
center: ["30%", "50%"], |
|
radius: "45%", |
|
min: 0, //最小刻度 |
|
max: 100, //最大刻度 |
|
splitNumber: 10, //刻度数量 |
|
startAngle: 1, |
|
endAngle: 360, |
|
axisLine: { |
|
show: true, |
|
// 仪表盘刻度线 |
|
lineStyle: { |
|
width: 1, |
|
color: [[1, "red"]], |
|
}, |
|
}, |
|
//仪表盘文字 |
|
axisLabel: { |
|
show: false, |
|
}, //刻度标签。 |
|
axisTick: { |
|
show: true, |
|
splitNumber: 5, |
|
lineStyle: { |
|
color: "#556075", //用颜色渐变函数不起作用 |
|
width: 1, |
|
}, |
|
length: 3, |
|
}, //刻度样式 |
|
splitLine: { |
|
show: true, |
|
length: 5, |
|
lineStyle: { |
|
width: 1, |
|
color: "#979EAA", //用颜色渐变函数不起作用 |
|
}, |
|
}, //分隔线样式 |
|
detail: { |
|
show: false, |
|
}, |
|
pointer: { |
|
show: false, |
|
}, |
|
}, |
|
], |
|
}; |
|
|
|
echartright3; |
|
echartright3Option = { |
|
xAxis: { |
|
type: "category", |
|
data: [ |
|
"10.2", |
|
"10.3", |
|
"10.4", |
|
"10.5", |
|
"10.6", |
|
"10.7", |
|
"10.8", |
|
"10.9", |
|
"10.10", |
|
"10.11", |
|
"10.12", |
|
"10.13", |
|
"10.14", |
|
], |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: "#91CCFF", |
|
}, |
|
}, |
|
axisTick: { |
|
//刻度线 |
|
show: false, |
|
}, |
|
inverse: true, |
|
}, |
|
yAxis: { |
|
type: "value", |
|
nameTextStyle: { |
|
color: "#C4E2FC", |
|
}, |
|
splitLine: { |
|
//分割线 |
|
lineStyle: { |
|
color: ["#0f4374"], |
|
width: 2, |
|
}, |
|
}, |
|
axisTick: { |
|
//刻度线 |
|
show: false, |
|
}, |
|
axisLine: { |
|
//轴线 |
|
show: false, |
|
lineStyle: { |
|
color: "#C4E2FC", |
|
}, |
|
}, |
|
}, |
|
tooltip: { |
|
// trigger: 'axis' |
|
}, |
|
series: [ |
|
{ |
|
name: "卸油事件", |
|
data: [23, 54, 53, 12, 55, 66, 24, 46, 37, 22, 35, 85, 33], |
|
type: "bar", |
|
itemStyle: { |
|
color: { |
|
type: "linear", |
|
x: 0, |
|
y: 0, |
|
x2: 0, |
|
y2: 1, |
|
colorStops: [ |
|
{ |
|
offset: 0, |
|
color: "#00BAFF", // 0% 处的颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(35, 153, 255, 0.1)", // 100% 处的颜色 |
|
}, |
|
], |
|
global: false, // 缺省为 false |
|
}, |
|
}, |
|
barWidth: "25%", |
|
}, |
|
{ |
|
name: "卸油事件", |
|
data: [23, 54, 53, 12, 55, 66, 24, 46, 37, 22, 35, 85, 33], |
|
type: "line", |
|
symbol: "circle", |
|
symbolSize: 5, |
|
color: "#FFFFA9", |
|
label: { |
|
show: false, |
|
}, |
|
itemStyle: { |
|
color: "#fff", |
|
shadowColor: "#fff", |
|
shadowBlur: 10, |
|
}, |
|
lineStyle: { |
|
color: "#FFFFA9", |
|
width: 1, |
|
}, |
|
}, |
|
], |
|
grid: { |
|
left: "50px", |
|
right: "30px", |
|
bottom: "38px", |
|
top: "10px", |
|
}, |
|
}; |
|
|
|
initEcharts() { |
|
let echartleft1 = document.getElementById("echartleft1"); |
|
this.echartleft1 = echarts.init(echartleft1); |
|
this.echartleft1Option && |
|
this.echartleft1.setOption(this.echartleft1Option); |
|
let echartleft2 = document.getElementById("echartleft2"); |
|
this.echartleft2 = echarts.init(echartleft2); |
|
this.echartleft2Option && |
|
this.echartleft2.setOption(this.echartleft2Option); |
|
let echartleft3 = document.getElementById("echartleft3"); |
|
this.echartleft3 = echarts.init(echartleft3); |
|
this.echartleft3Option && |
|
this.echartleft3.setOption(this.echartleft3Option); |
|
let echartright1 = document.getElementById("echartright1"); |
|
this.echartright1 = echarts.init(echartright1); |
|
this.echartright1Option && |
|
this.echartright1.setOption(this.echartright1Option); |
|
let echartright2 = document.getElementById("echartright2"); |
|
this.echartright2 = echarts.init(echartright2); |
|
this.echartright2Option && |
|
this.echartright2.setOption(this.echartright2Option); |
|
let echartright3 = document.getElementById("echartright3"); |
|
this.echartright3 = echarts.init(echartright3); |
|
this.echartright3Option && |
|
this.echartright3.setOption(this.echartright3Option); |
|
} |
|
|
|
accessList = [ |
|
{ |
|
name: "油站", |
|
img: "../../../assets/gismap/icon/1.png", |
|
value: 3822, |
|
color: "#479FFE", |
|
}, |
|
{ |
|
name: "油库", |
|
img: "../../../assets/gismap/icon/2.png", |
|
value: 6422, |
|
color: "#A485FF", |
|
}, |
|
{ |
|
name: "石油化工", |
|
img: "../../../assets/gismap/icon/3.png", |
|
value: 7855, |
|
color: "#90FFAD", |
|
}, |
|
{ |
|
name: "企业", |
|
img: "../../../assets/gismap/icon/4.png", |
|
value: 1877, |
|
color: "#E5B55B", |
|
}, |
|
]; |
|
|
|
map; |
|
zoom = 5; |
|
|
|
markerList = [ |
|
{ marker: null, coordinate: [98.56934, 38.93555] }, |
|
{ marker: null, coordinate: [97.0752, 32.95898] }, |
|
{ marker: null, coordinate: [103.88672, 22.89551] }, |
|
{ marker: null, coordinate: [108.41309, 29.79492] }, |
|
]; |
|
initMap() { |
|
this.map = new T.Map("mapDiv", { |
|
projection: "EPSG:4326", |
|
}); |
|
this.map.centerAndZoom(new T.LngLat(107.79785, 35.77148), this.zoom); |
|
//创建图片对象 |
|
var icon = new T.Icon({ |
|
iconUrl: "../../../assets/gismap/gis/marker.png", |
|
iconSize: new T.Point(25, 44), |
|
iconAnchor: new T.Point(14, 40), |
|
}); |
|
//创建标注对象 |
|
this.markerList.forEach((element) => { |
|
element.marker = new T.Marker( |
|
new T.LngLat(element.coordinate[0], element.coordinate[1]), |
|
{ |
|
icon: icon, |
|
} |
|
); |
|
//向地图上添加标注 |
|
this.map.addOverLay(element.marker); |
|
|
|
let sContent = |
|
"<div class='markerInfoWin'><div class='icon icon1'><img src='../../../assets/gismap/gis/1.png' alt=''></div><div class='num'> 36 </div><div class='icon icon2'><img src='../../../assets/gismap/gis/2.png' alt=''></div><div class='num'> 36 </div><div class='icon icon3'><img src='../../../assets/gismap/gis/3.png' alt=''></div><div class='num'> 36 </div><div class='icon icon4'><img src='../../../assets/gismap/gis/4.png' alt=''></div><div class='num'> 36 </div></div>"; |
|
// infoWin1.setContent(sContent); |
|
// let infoWin1 = new T.InfoWindow(sContent, { |
|
// closeButton: false, |
|
// }); |
|
// element.marker.openInfoWindow(infoWin1);s |
|
let label = new T.Label({ |
|
text: sContent, |
|
position: element.marker.getLngLat(), |
|
offset: new T.Point(-28, -65), |
|
}); |
|
this.map.addOverLay(label); |
|
}); |
|
this.map.addEventListener("click", (e) => { |
|
this.MapClick(e); |
|
}); |
|
} |
|
//地图点击事件 |
|
MapClick(e) { |
|
console.log("点击坐标:", e.lnglat.getLng() + "," + e.lnglat.getLat()); |
|
} |
|
}
|
|
|