From dc91db9bb3473c3ed058f86f74359e15c035a8a5 Mon Sep 17 00:00:00 2001
From: zhengpz <1838927346@qq.com>
Date: Mon, 23 Aug 2021 22:13:10 +0800
Subject: [PATCH] 表查询完善
---
src/views/home/indexEchart.js | 436 +++++++++++++++++++++++++++---------------------------
1 files changed, 219 insertions(+), 217 deletions(-)
diff --git a/src/views/home/indexEchart.js b/src/views/home/indexEchart.js
index c3e3cea..72c7276 100644
--- a/src/views/home/indexEchart.js
+++ b/src/views/home/indexEchart.js
@@ -1,11 +1,12 @@
import * as echarts from "echarts";
-import nc from '../../../public/nc.json';
+import nc from "../../../public/nc.json";
function left1Data(allData) {
let nameArr = [];
let data1 = [];
let data2 = [];
let data3 = [];
let data4 = [];
+ let data5 = [];
// let legend = ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"];
allData.forEach(item => {
nameArr.push(item.name);
@@ -13,31 +14,14 @@
data2.push(item.server.staff);
data3.push(item.server.security);
data4.push(item.server.armed);
+ data5.push(item.server.region);
});
- function add(arr) {
- let total = 0;
- arr.forEach(i => {
- total += Number(i)
- })
- return total
- }
- // let legend1 = ["自招保安单位" + add(data1), "保安培训公司", "保安服务公司", "武装守押公司"];
- // let legendData = [{
- // name: "自招保安单位",
- // value: add(data1)
- // },
- // {
- // name: "保安培训公司",
- // value: add(data2)
- // },
- // {
- // name: "保安服务公司",
- // value: add(data3)
- // },
- // {
- // name: "武装守押公司",
- // value: add(data4)
- // }];
+ nameArr.reverse();
+ data1.reverse();
+ data2.reverse();
+ data3.reverse();
+ data4.reverse();
+ data5.reverse();
let option = {
tooltip: {
trigger: "axis",
@@ -50,13 +34,13 @@
// borderColor: "gray", //设置边框颜色
textStyle: {
color: "#fff" //设置文字颜色
- },
+ }
},
color: [
- '#2ec7c9',
- '#b6a2de',
- '#5ab1ef',
- '#ffb980',
+ "#2ec7c9",
+ "#b6a2de",
+ "#5ab1ef",
+ "#ffb980",
// "#fac858",
// "#73c0de",
@@ -65,27 +49,27 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
- legend: {
- data: ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"],
- bottom: "1%",
- itemWidth: 20,
- textStyle: {
- color: "#fff"
- },
- // formatter: function (legend1) {
- // return legend1;
- // }
- },
+ // legend: {
+ // data: ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"],
+ // bottom: "1%",
+ // itemWidth: 20,
+ // textStyle: {
+ // color: "#fff"
+ // },
+ // // formatter: function (legend1) {
+ // // return legend1;
+ // // }
+ // },
grid: {
- top: '5%',
+ top: "5%",
left: "5%",
- right: "6%",
- bottom: "10%",
+ right: "10%",
+ bottom: "5%",
containLabel: true
},
xAxis: {
@@ -112,7 +96,7 @@
name: "自招保安单位",
type: "bar",
stack: "total",
- barWidth: 20,
+ barWidth: 17,
emphasis: {
focus: "series"
},
@@ -144,6 +128,15 @@
focus: "series"
},
data: data4
+ },
+ {
+ name: "跨区域保安公司",
+ type: "bar",
+ stack: "total",
+ emphasis: {
+ focus: "series"
+ },
+ data: data5
}
]
};
@@ -170,7 +163,7 @@
// borderColor: "gray", //设置边框颜色
textStyle: {
color: "#fff" //设置文字颜色
- },
+ }
},
color: [
"#3fb1e3",
@@ -181,27 +174,36 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
legend: {
data: ["持证人数", "未持证人数"],
bottom: "1%",
+ left :'13%',
itemWidth: 20,
textStyle: {
color: "#fff"
}
},
grid: {
- top: '5%',
+ top: "10%",
left: "5%",
right: "6%",
- bottom: "15%",
+ bottom: "4%",
containLabel: true
},
xAxis: {
+ type: "category",
+ axisLabel: {
+ color: "#fff",
+ rotate: 40
+ },
+ data: nameArr
+ },
+ yAxis: {
type: "value",
axisLabel: {
color: "#fff"
@@ -213,13 +215,6 @@
splitLine: {
show: false
}
- },
- yAxis: {
- type: "category",
- axisLabel: {
- color: "#fff"
- },
- data: nameArr
},
series: [
{
@@ -248,80 +243,59 @@
}
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: "女" }
+ ];
let option = {
tooltip: {
- trigger: 'axis',
+ trigger: "item",
+ formatter: "{a}<br>{b}:{c}({d}%)",
axisPointer: {
- type: 'shadow'
- }
- },
- legend: {
- data: ['男', '女'],
- bottom: "1%",
- itemWidth: 20,
+ type: "shadow"
+ },
+ backgroundColor: "#031952", //设置背景图片 rgba格式
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
textStyle: {
- color: "#fff"
+ color: "#fff" //设置文字颜色
}
},
- color: [
- "#91cc75",
- "#fac858",
- "#73c0de",
- ],
+ color: ["#008DEC", "#886EFF"],
+ // legend: {
+ // right: "8%",
+ // bottom: "10%",
+ // itemHeight: 10,
+ // show: true,
+ // selectedMode: false,
+ // textStyle: {
+ // color: "#fff"
+ // },
+ // data: ['男', '女'],
+ // orient: "vertical"
+ // },
grid: {
- top: '5%',
+ top: "10%",
left: "5%",
- right: "6%",
- bottom: "15%",
+ right: "30%",
+ bottom: "4%",
containLabel: true
},
- xAxis: [
- {
- type: 'value',
- splitLine: {
- show: false
- },
- axisLabel: {
- color: "#fff"
- },
- }
- ],
- yAxis: [
-
- {
- type: 'category',
- data: ['红谷滩分局', '青山湖分局', '南昌市公安局东湖分局', '南昌市公安局西湖分局', '南昌市公安局青云谱分局', '南昌市公安局湾里分局', '南昌市公安局高新开发区分局'],
-
- splitLine: {
- show: false
- },
- axisLabel: {
- color: "#fff"
- },
- }
- ],
series: [
{
- name: '男',
- type: 'bar',
- stack: '性别',
- emphasis: {
- focus: 'series'
- },
- data: [120, 132, 101, 134, 90, 230, 210]
- },
- {
- name: '女',
- type: 'bar',
- stack: '性别',
- emphasis: {
- focus: 'series'
- },
- data: [220, 182, 191, 234, 290, 330, 310]
- },
+ name: "性别比例",
+ type: "pie",
+ center: ["33%", "50%"],
+ radius: "70%",
+ data: data,
+ label: {
+ color: "#fff"
+ }
+ }
]
};
- return option
+ return option;
}
function right1Data(allData) {
@@ -359,10 +333,10 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
legend: {
@@ -424,10 +398,10 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
legend: {
@@ -480,17 +454,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;
@@ -658,16 +632,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:9
},
data: legendData,
orient: "vertical"
@@ -681,18 +657,18 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
series: [
{
- name: '分局预警占比',
- type: 'pie',
- radius: '70%',
- center: ['30%', '50%'],
- roseType: 'radius',
+ name: "分局预警占比",
+ type: "pie",
+ radius: "75%",
+ center: ["35%", "55%"],
+ roseType: "radius",
itemStyle: {
borderRadius: 0
},
@@ -705,7 +681,7 @@
}
},
data: data
- },
+ }
// {
// name: '面积模式',
// type: 'pie',
@@ -745,42 +721,69 @@
// }
// 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 = '名称';
- symbolUrl = require('@/assets/img/people.png')
+ name = "保安员名称";
+ label =
+ "押运人员：" +
+ item.name +
+ "<br />当前位置：" +
+ item.location +
+ "<br />所属公司：" +
+ item.linkman +
+ "<br />联系电话：" +
+ item.tel;
+ symbolUrl = require("@/assets/img/people.png");
obj = {
- name: item.name,
- value: allData['geoData'][i]
- }
+ name: label,
+ value: allData["geoData"][i]
+ };
} else if (type === 2) {
- name = '押运车辆';
- label = '押运车辆车牌号';
- symbolUrl = require('@/assets/img/car.png')
+ name = "押运车辆";
+ label =
+ "押运车辆车牌号：" +
+ item.carNum +
+ "<br />当前位置：" +
+ item.location +
+ "<br />所属公司：" +
+ item.company +
+ "<br />联系人：" +
+ item.linkman +
+ "<br />联系电话：" +
+ item.tel;
+ symbolUrl = require("@/assets/img/car.png");
obj = {
- name: item.carNum,
- value: allData['geoData'][i]
- }
+ name: label,
+ value: allData["geoData"][i]
+ };
} else if (type === 3) {
- name = '枪支';
- label = '枪支编号';
- symbolUrl = require('@/assets/img/gun.png')
+ name = "枪支";
+ label =
+ "枪支编号：" +
+ item.number +
+ "<br />当前位置：" +
+ item.location +
+ "<br />所属公司：" +
+ item.company +
+ "<br />负责人：" +
+ item.linkman +
+ "<br />联系电话：" +
+ item.tel;
+ symbolUrl = require("@/assets/img/gun.png");
obj = {
- name: item.number,
- value: allData['geoData'][i]
- }
+ name: label,
+ 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',
@@ -788,115 +791,114 @@
// 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 {
- return label + ' : ' + params.name;
+ return params.name;
}
},
backgroundColor: "#031952", //设置背景图片 rgba格式
color: "#fff",
borderWidth: "0", //边框宽度设置1
- // borderColor: "gray", //设置边框颜色
+ borderColor: "gray", //设置边框颜色
+ 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: {
@@ -905,8 +907,8 @@
zlevel: 1
}
]
- }
- return option
+ };
+ return option;
}
export default {
left1Data,
--
Gitblit v1.9.3