shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[新增]gishome图表

beijing
邵佳豪 1 year ago
parent
1efecd0edc
commit
f51a317a70
3 changed files with 890 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/app/pages/gis-home/gis-home.component.html
  2. 23
      src/app/pages/gis-home/gis-home.component.scss
  3. 868
      src/app/pages/gis-home/gis-home.component.ts

9
src/app/pages/gis-home/gis-home.component.html
Unescape View File

@ -13,14 +13,14 @@
<app-card-title [title]="'演练统计'" [subtitle]="'Exercise statistics'"></app-card-title>
<app-unit-title [num]="33"></app-unit-title>
<div class="content">
<div id="echartleft2"></div>
</div>
</div>
<div class="left3 cardItem">
<app-card-title [title]="'风险管控平台统计'" [subtitle]="'Risk management'"></app-card-title>
<app-unit-title [num]="33"></app-unit-title>
<div class="content">
<div id="echartleft3"></div>
</div>
</div>
</div>
@ -44,13 +44,14 @@
<div class="right2 cardItem">
<app-card-title [title]="'预警统计'" [subtitle]="'Warning statistics'"></app-card-title>
<div class="content">
<div id="echartright1"></div>
</div>
</div>
<div class="right3 cardItem">
<app-card-title [title]="'卸油事件'" [subtitle]="'Oil unloading event'"></app-card-title>
<div class="content">
<div id="echartright2"></div>
<div id="echartright3"></div>
</div>
</div>
</div>

23
src/app/pages/gis-home/gis-home.component.scss
Unescape View File

@ -59,10 +59,10 @@
height: 25%;
}
.right2 {
height: 36%;
height: 34%;
}
.right3 {
height: 36%;
height: 38%;
}
}
@ -77,6 +77,7 @@
flex-direction: column;
.content {
flex: 1;
position: relative;
}
}
@ -116,7 +117,23 @@
}
}
#echartleft1 {
#echartleft1,
#echartleft2,
#echartleft3,
#echartright1 {
width: 100%;
height: 100%;
}
#echartright2 {
width: 100%;
height: 60%;
}
#echartright3 {
width: 100%;
height: 45%;
position: absolute;
left: 0;
bottom: 0;
}

868
src/app/pages/gis-home/gis-home.component.ts
Unescape View File

@ -15,7 +15,6 @@ export class GisHomeComponent implements OnInit {
}
echartleft1;
echartleft1Data = [
{ value: 1312, name: "综合应急预案" },
{ value: 1583, name: "专项应急预案" },
@ -140,23 +139,886 @@ export class GisHomeComponent implements OnInit {
},
data: [
{
value: 1,
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: 12,
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,
},
],
};
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 = [

Write Preview
Loading…
Cancel
Save