|
|
|
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());
|
|
|
|
}
|
|
|
|
}
|