From 2abc33c4172e5a0e127fb43cac6167787f5170a1 Mon Sep 17 00:00:00 2001
From: zhengpz <1838927346@qq.com>
Date: Sun, 15 Aug 2021 22:27:29 +0800
Subject: [PATCH] 改界面、对接口
---
src/views/home/indexEchart.js | 305 ++++++++++++++++++++++++++------------------------
1 files changed, 156 insertions(+), 149 deletions(-)
diff --git a/src/views/home/indexEchart.js b/src/views/home/indexEchart.js
index 716e7b8..8181474 100644
--- a/src/views/home/indexEchart.js
+++ b/src/views/home/indexEchart.js
@@ -1,5 +1,5 @@
import * as echarts from "echarts";
-import nc from '../../../public/nc.json';
+import nc from "../../../public/nc.json";
function left1Data(allData) {
let nameArr = [];
let data1 = [];
@@ -16,6 +16,12 @@
data4.push(item.server.armed);
data5.push(item.server.region);
});
+ nameArr.reverse();
+ data1.reverse();
+ data2.reverse();
+ data3.reverse();
+ data4.reverse();
+ data5.reverse();
let option = {
tooltip: {
trigger: "axis",
@@ -28,13 +34,13 @@
// borderColor: "gray", //设置边框颜色
textStyle: {
color: "#fff" //设置文字颜色
- },
+ }
},
color: [
- '#2ec7c9',
- '#b6a2de',
- '#5ab1ef',
- '#ffb980',
+ "#2ec7c9",
+ "#b6a2de",
+ "#5ab1ef",
+ "#ffb980",
// "#fac858",
// "#73c0de",
@@ -43,10 +49,10 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
// legend: {
// data: ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"],
@@ -60,9 +66,9 @@
// // }
// },
grid: {
- top: '5%',
+ top: "5%",
left: "5%",
- right: "8%",
+ right: "10%",
bottom: "5%",
containLabel: true
},
@@ -90,7 +96,7 @@
name: "自招保安单位",
type: "bar",
stack: "total",
- barWidth: 20,
+ barWidth: 17,
emphasis: {
focus: "series"
},
@@ -157,7 +163,7 @@
// borderColor: "gray", //设置边框颜色
textStyle: {
color: "#fff" //设置文字颜色
- },
+ }
},
color: [
"#3fb1e3",
@@ -168,10 +174,10 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
legend: {
data: ["持证人数", "未持证人数"],
@@ -182,13 +188,21 @@
}
},
grid: {
- top: '5%',
+ top: "10%",
left: "5%",
right: "6%",
- bottom: "15%",
+ bottom: "4%",
containLabel: true
},
xAxis: {
+ type: "category",
+ axisLabel: {
+ color: "#fff",
+ rotate: -80
+ },
+ data: nameArr
+ },
+ yAxis: {
type: "value",
axisLabel: {
color: "#fff"
@@ -200,13 +214,6 @@
splitLine: {
show: false
}
- },
- yAxis: {
- type: "category",
- axisLabel: {
- color: "#fff"
- },
- data: nameArr
},
series: [
{
@@ -236,12 +243,12 @@
function left3Data(allData) {
let data = [
- { value: allData[0].mnum ? Number(allData[0].mnum) : 0, name: '男' },
- { value: allData[0].gnum ? Number(allData[0].gnum) : 0, name: '女' }
- ]
+ { value: allData[0].mnum ? Number(allData[0].mnum) : 0, name: "男" },
+ { value: allData[0].gnum ? Number(allData[0].gnum) : 0, name: "女" }
+ ];
let option = {
tooltip: {
- trigger: 'item',
+ trigger: "item",
formatter: "{a}<br>{b}:{c}({d}%)",
axisPointer: {
type: "shadow"
@@ -252,42 +259,42 @@
// borderColor: "gray", //设置边框颜色
textStyle: {
color: "#fff" //设置文字颜色
- },
+ }
},
- color: [
- '#008DEC',
- '#886EFF',
- ],
- legend: {
- right: "8%",
- bottom: "10%",
- itemHeight: 10,
- show: true,
- selectedMode: false,
- textStyle: {
- color: "#fff"
- },
- data: ['男', '女'],
- orient: "vertical"
+ color: ["#008DEC", "#886EFF"],
+ // legend: {
+ // right: "8%",
+ // bottom: "10%",
+ // itemHeight: 10,
+ // show: true,
+ // selectedMode: false,
+ // textStyle: {
+ // color: "#fff"
+ // },
+ // data: ['男', '女'],
+ // orient: "vertical"
+ // },
+ grid: {
+ top: "10%",
+ left: "5%",
+ right: "30%",
+ bottom: "4%",
+ containLabel: true
},
series: [
{
- name: '性别比例',
- type: 'pie',
- center: ['43%', '50%'],
- radius: '70%',
+ name: "性别比例",
+ type: "pie",
+ center: ["33%", "50%"],
+ radius: "70%",
data: data,
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- },
+ label: {
+ color: "#fff"
+ }
}
]
};
- return option
+ return option;
}
function right1Data(allData) {
@@ -325,10 +332,10 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
legend: {
@@ -390,10 +397,10 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
legend: {
@@ -446,17 +453,17 @@
let data = [];
let legendData = [];
let datas = allData.sort((a, b) => {
- return b.Count - a.Count
- })
+ return b.Count - a.Count;
+ });
datas.forEach(item => {
let obj = {
name: item.jurname,
value: item.Count
- }
- legendData.push(item.jurname)
+ };
+ legendData.push(item.jurname);
// sumValue += Number(item.Count)
- data.push(obj)
- })
+ data.push(obj);
+ });
// let arrName = getArrayValue(data, "name");
// let arrValue = getArrayValue(data, "value");
// let sumValue = 1000;
@@ -624,16 +631,18 @@
// borderColor: "gray", //设置边框颜色
textStyle: {
color: "#fff" //设置文字颜色
- },
+ }
},
legend: {
- right: "2%",
- top: "10%",
+ right: "5%",
+ top: "5%",
itemHeight: 10,
show: true,
+ itemGap:8,
selectedMode: false,
textStyle: {
- color: "#fff"
+ color: "#fff",
+ fontSize:11
},
data: legendData,
orient: "vertical"
@@ -647,18 +656,18 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
series: [
{
- name: '分局预警占比',
- type: 'pie',
- radius: '75%',
- center: ['30%', '50%'],
- roseType: 'radius',
+ name: "分局预警占比",
+ type: "pie",
+ radius: "75%",
+ center: ["35%", "55%"],
+ roseType: "radius",
itemStyle: {
borderRadius: 0
},
@@ -671,7 +680,7 @@
}
},
data: data
- },
+ }
// {
// name: '面积模式',
// type: 'pie',
@@ -711,15 +720,16 @@
// }
// return res;
// };
- let name = '';
- let label = '';
- let symbolUrl = '';
- let geoData = []
- allData['table'].forEach((item, i) => {
+ let name = "";
+ let label = "";
+ let symbolUrl = "";
+ let geoData = [];
+ allData["table"].forEach((item, i) => {
let obj = {};
if (type === 1) {
- name = '保安员名称';
- label = "押运人员：" +
+ name = "保安员名称";
+ label =
+ "押运人员：" +
item.name +
"<br />当前位置：" +
item.location +
@@ -727,13 +737,13 @@
item.linkman +
"<br />联系电话：" +
item.tel;
- symbolUrl = require('@/assets/img/people.png')
+ symbolUrl = require("@/assets/img/people.png");
obj = {
name: label,
- value: allData['geoData'][i]
- }
+ value: allData["geoData"][i]
+ };
} else if (type === 2) {
- name = '押运车辆';
+ name = "押运车辆";
label =
"押运车辆车牌号：" +
item.carNum +
@@ -745,14 +755,15 @@
item.linkman +
"<br />联系电话：" +
item.tel;
- symbolUrl = require('@/assets/img/car.png')
+ symbolUrl = require("@/assets/img/car.png");
obj = {
name: label,
- value: allData['geoData'][i],
- }
+ value: allData["geoData"][i]
+ };
} else if (type === 3) {
- name = '枪支';
- label = "枪支编号：" +
+ name = "枪支";
+ label =
+ "枪支编号：" +
item.number +
"<br />当前位置：" +
item.location +
@@ -762,17 +773,16 @@
item.linkman +
"<br />联系电话：" +
item.tel;
- symbolUrl = require('@/assets/img/gun.png')
+ symbolUrl = require("@/assets/img/gun.png");
obj = {
name: label,
- value: allData['geoData'][i]
- }
+ value: allData["geoData"][i]
+ };
}
- geoData.push(obj)
- })
+ geoData.push(obj);
+ });
-
- echarts.registerMap('ncMap', ncMap);
+ echarts.registerMap("ncMap", ncMap);
// echarts.registerMap('chinaMapOutline', chinaMapOutline);
let option = {
// backgroundColor: '#181F4E',
@@ -780,12 +790,11 @@
// trigger: 'item',
// },
tooltip: {
- trigger: 'item',
- formatter: function (params) {
- if (typeof (params.value)[1] == "undefined") {
+ trigger: "item",
+ formatter: function(params) {
+ if (typeof params.value[1] == "undefined") {
return params.name;
} else {
- debugger
return params.name;
}
},
@@ -793,104 +802,102 @@
color: "#fff",
borderWidth: "0", //边框宽度设置1
borderColor: "gray", //设置边框颜色
- extraCssText: 'box-shadow: 0 0 3px rgba( 211,211,211, 0.5);',
+ extraCssText: "box-shadow: 0 0 3px rgba( 211,211,211, 0.5);",
textStyle: {
color: "#fff" //设置文字颜色
- },
+ }
},
geo: {
// silent: true,
- map: 'ncMap',
+ map: "ncMap",
show: true,
zoom: 1.04,
- top: '8%',
+ top: "8%",
label: {
show: false,
- color: '#fff',
+ color: "#fff",
emphasis: {
textStyle: {
- color: '#fff'
+ color: "#fff"
}
}
},
roam: true,
itemStyle: {
- areaColor: 'rgba(0,255,255,.02)',
- borderColor: '#00ffff',
+ areaColor: "rgba(0,255,255,.02)",
+ borderColor: "#00ffff",
borderWidth: 1.5,
- shadowColor: '#00ffff',
+ shadowColor: "#00ffff",
shadowOffsetX: 0,
shadowOffsetY: 4,
- shadowBlur: 10,
-
+ shadowBlur: 10
},
emphasis: {
itemStyle: {
- color: 'transparent', //悬浮背景
+ color: "transparent", //悬浮背景
textStyle: {
- color: '#fff'
+ color: "#fff"
}
}
}
},
series: [
{
- map: 'ncMap',
+ map: "ncMap",
// silent: true,
- type: 'map',
+ type: "map",
geoIndex: 0,
// aspectScale: 0.75, //长宽比
zoom: 1.14,
label: {
show: false,
- color: '#fff'
+ color: "#fff"
},
emphasis: {
label: {
- color: '#fff'
+ color: "#fff"
}
},
- top: '10%',
+ top: "10%",
roam: true,
itemStyle: {
- areaColor: 'rgba(0,255,255,.02)',
- borderColor: '#00ffff',
+ areaColor: "rgba(0,255,255,.02)",
+ borderColor: "#00ffff",
borderWidth: 1.5,
- shadowColor: '#00ffff',
+ shadowColor: "#00ffff",
shadowOffsetX: 0,
shadowOffsetY: 4,
- shadowBlur: 10,
-
+ shadowBlur: 10
},
emphasis: {
itemStyle: {
- areaColor: 'transparent', //悬浮背景
+ areaColor: "transparent", //悬浮背景
textStyle: {
- color: '#fff'
+ color: "#fff"
}
}
}
},
{
name: name,
- type: 'scatter',
- coordinateSystem: 'geo',
+ type: "scatter",
+ coordinateSystem: "geo",
// roam: false,
- symbol: 'image://' + symbolUrl,
+ symbol: "image://" + symbolUrl,
symbolSize: [30, 30],
label: {
show: false,
- color: '#fff',
- fontSize: 9,
+ color: "#fff",
+ fontSize: 9
},
itemStyle: {
- color: '#FF0000', //标志颜色
+ color: "#FF0000" //标志颜色
},
data: geoData,
- showEffectOn: 'render',
+ showEffectOn: "render",
rippleEffect: {
- brushType: 'stroke'
+ brushType: "stroke"
},
hoverAnimation: true,
emphasis: {
@@ -899,8 +906,8 @@
zlevel: 1
}
]
- }
- return option
+ };
+ return option;
}
export default {
left1Data,
--
Gitblit v1.9.3