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 | 780 +++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 567 insertions(+), 213 deletions(-)
diff --git a/src/views/home/indexEchart.js b/src/views/home/indexEchart.js
index 169adaa..72c7276 100644
--- a/src/views/home/indexEchart.js
+++ b/src/views/home/indexEchart.js
@@ -1,28 +1,46 @@
+import * as echarts from "echarts";
+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);
data1.push(item.server.confess);
data2.push(item.server.staff);
data3.push(item.server.security);
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",
axisPointer: {
type: "shadow"
+ },
+ backgroundColor: "#031952", //设置背景图片 rgba格式
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
}
},
color: [
- '#2ec7c9',
- '#b6a2de',
- '#5ab1ef',
- '#ffb980',
+ "#2ec7c9",
+ "#b6a2de",
+ "#5ab1ef",
+ "#ffb980",
// "#fac858",
// "#73c0de",
@@ -31,24 +49,27 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
- legend: {
- data: ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"],
- bottom: "1%",
- itemWidth: 20,
- textStyle: {
- color: "#fff"
- }
- },
+ // 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: {
@@ -75,7 +96,7 @@
name: "自招保安单位",
type: "bar",
stack: "total",
- barWidth: 20,
+ barWidth: 17,
emphasis: {
focus: "series"
},
@@ -107,6 +128,15 @@
focus: "series"
},
data: data4
+ },
+ {
+ name: "跨区域保安公司",
+ type: "bar",
+ stack: "total",
+ emphasis: {
+ focus: "series"
+ },
+ data: data5
}
]
};
@@ -126,6 +156,13 @@
trigger: "axis",
axisPointer: {
type: "shadow"
+ },
+ backgroundColor: "#031952", //设置背景图片 rgba格式
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
}
},
color: [
@@ -137,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"
@@ -170,19 +216,12 @@
show: false
}
},
- yAxis: {
- type: "category",
- axisLabel: {
- color: "#fff"
- },
- data: nameArr
- },
series: [
{
name: "持证人数",
type: "bar",
// barWidth:30,
- barWidth: 20,
+ barWidth: 15,
stack: "total",
emphasis: {
focus: "series"
@@ -197,6 +236,62 @@
focus: "series"
},
data: data2
+ }
+ ]
+ };
+ return option;
+}
+
+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: "item",
+ formatter: "{a}<br>{b}:{c}({d}%)",
+ axisPointer: {
+ type: "shadow"
+ },
+ backgroundColor: "#031952", //设置背景图片 rgba格式
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // 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"
+ // },
+ grid: {
+ top: "10%",
+ left: "5%",
+ right: "30%",
+ bottom: "4%",
+ containLabel: true
+ },
+ series: [
+ {
+ name: "性别比例",
+ type: "pie",
+ center: ["33%", "50%"],
+ radius: "70%",
+ data: data,
+ label: {
+ color: "#fff"
+ }
}
]
};
@@ -238,10 +333,10 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
legend: {
@@ -303,10 +398,10 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
legend: {
@@ -356,129 +451,202 @@
}
function right3Data(allData) {
- let data = [
- {
- name: "新建县",
- value: 154
- },
- {
- name: "安义县",
- value: 611
- },
- {
- name: "红谷滩新区",
- value: 400
- },
- {
- name: "西湖区",
- value: 200
- },
- {
- name: "东湖区",
- value: 250
- },
- {
- name: "经开区",
- value: 281
- },
- {
- name: "青云谱区",
- value: 320
- },
- {
- name: "高新区",
- value: 231
- },
- {
- name: "湾里区",
- value: 210
- },
- {
- name: "进贤县",
- value: 187
- },
- {
- name: "青山湖区",
- value: 190
- }
- ];
+ let data = [];
+ let legendData = [];
+ let datas = allData.sort((a, b) => {
+ return b.Count - a.Count;
+ });
+ datas.forEach(item => {
+ let obj = {
+ name: item.jurname,
+ value: item.Count
+ };
+ legendData.push(item.jurname);
+ // sumValue += Number(item.Count)
+ data.push(obj);
+ });
// let arrName = getArrayValue(data, "name");
// let arrValue = getArrayValue(data, "value");
- let sumValue = 1000;
+ // let sumValue = 1000;
// let objData = array2obj(data, "name");
- let optionData = getData(data);
+ // let optionData = getData(data);
- function getArrayValue(array, key) {
- var key = key || "value";
- var res = [];
- if (array) {
- array.forEach(function(t) {
- res.push(t[key]);
- });
- }
- return res;
- }
+ // function getArrayValue(array, key) {
+ // var key = key || "value";
+ // var res = [];
+ // if (array) {
+ // array.forEach(function (t) {
+ // res.push(t[key]);
+ // });
+ // }
+ // return res;
+ // }
- function array2obj(array, key) {
- var resObj = {};
- for (var i = 0; i < array.length; i++) {
- resObj[array[i][key]] = array[i];
- }
- return resObj;
- }
+ // function array2obj(array, key) {
+ // var resObj = {};
+ // for (var i = 0; i < array.length; i++) {
+ // resObj[array[i][key]] = array[i];
+ // }
+ // return resObj;
+ // }
- function getData(data) {
- var res = {
- series: [],
- yAxis: []
- };
- for (let i = 0; i < data.length; i++) {
- res.series.push({
- name: "分局预警占比",
- type: "pie",
- clockWise: true,
- z: 2,
- hoverAnimation: false,
- radius: [90 - i * 8 + "%", 85 - i * 8 + "%"],
- center: ["30%", "50%"],
- labelLine: {
- show: false
- },
- label: {
- show: false
- },
- data: [
- {
- value: data[i].value,
- name: data[i].name
- },
- {
- value: sumValue - data[i].value,
- name: "",
- itemStyle: {
- color: "rgba(0,0,0,0)",
- borderWidth: 0
- },
- tooltip: {
- show: false
- },
- label: {
- show: false
- },
- hoverAnimation: false
- }
- ]
- });
- res.yAxis.push(data[i].name);
- }
- return res;
- }
+ // function getData(data) {
+ // var res = {
+ // series: [],
+ // yAxis: []
+ // };
+ // for (let i = 0; i < data.length; i++) {
+ // res.series.push({
+ // name: "分局预警占比",
+ // type: "pie",
+ // clockwise: true,
+ // z: 2,
+ // emphasis: {
+ // scale: false
+ // },
+ // // hoverAnimation: false,
+ // radius: [83 - i * 12 + '%', 78 - i * 12 + '%'],
+ // center: ["30%", "50%"],
+ // labelLine: {
+ // show: false
+ // },
+ // label: {
+ // show: false
+ // },
+ // data: [
+ // {
+ // value: data[i].value,
+ // name: data[i].name
+ // },
+ // {
+ // value: sumValue - data[i].value,
+ // name: "",
+ // itemStyle: {
+ // color: "rgba(0,0,0,0)",
+ // borderWidth: 0
+ // },
+ // tooltip: {
+ // show: false
+ // },
+ // label: {
+ // show: false
+ // },
+ // emphasis: {
+ // scale: false
+ // }
+ // // hoverAnimation: false
+ // }
+ // ]
+ // });
+ // res.yAxis.push(data[i].name);
+ // }
+ // return res;
+ // }
+ // let option = {
+ // tooltip: {
+ // show: true,
+ // trigger: "item",
+ // formatter: "{a}<br>{b}:{c}({d}%)",
+ // backgroundColor: "#031952", //设置背景图片 rgba格式
+ // color: "#fff",
+ // borderWidth: "0", //边框宽度设置1
+ // // borderColor: "gray", //设置边框颜色
+ // textStyle: {
+ // color: "#fff" //设置文字颜色
+ // },
+ // },
+ // color: [
+ // "#91cc75",
+ // "#fac858",
+ // "#73c0de",
+ // "#3ba272",
+ // "#fc8452",
+ // "#9a60b4",
+ // "#3fb1e3",
+ // "#6be6c1",
+ // '#626c91',
+ // '#a0a7e6',
+ // '#c4ebad',
+ // '#96dee8'
+ // ],
+
+ // legend: {
+ // right: "2%",
+ // top: "3%",
+ // // icon: "circle",
+ // itemHeight: 10,
+ // show: true,
+ // data: legendData,
+ // selectedMode: false,
+ // textStyle: {
+ // color: "#fff"
+ // },
+ // orient: "vertical"
+ // },
+ // grid: {
+ // top: "5%",
+ // bottom: "50%",
+ // left: "30%",
+ // containLabel: false
+ // },
+ // yAxis: [
+ // {
+ // type: "category",
+ // inverse: true,
+ // z: 3,
+ // axisLine: {
+ // show: false
+ // },
+ // axisTick: {
+ // show: false
+ // },
+ // axisLabel: {
+ // interval: 0,
+ // inside: false,
+ // color: "#fff",
+ // fontSize: 8,
+ // // textStyle: {
+
+ // // },
+ // show: true
+ // },
+ // data: optionData.yAxis
+ // }
+ // ],
+ // xAxis: [
+ // {
+ // show: false
+ // }
+ // ],
+ // series: optionData.series
+ // };
let option = {
tooltip: {
show: true,
trigger: "item",
- formatter: "{a}<br>{b}:{c}({d}%)"
+ formatter: "{a}<br>{b}:{c}({d}%)",
+ backgroundColor: "#031952", //设置背景图片 rgba格式
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ }
+ },
+ legend: {
+ right: "5%",
+ top: "5%",
+ itemHeight: 10,
+ show: true,
+ itemGap:8,
+ selectedMode: false,
+ textStyle: {
+ color: "#fff",
+ fontSize:9
+ },
+ data: legendData,
+ orient: "vertical"
},
color: [
"#91cc75",
@@ -489,79 +657,265 @@
"#9a60b4",
"#3fb1e3",
"#6be6c1",
- '#626c91',
- '#a0a7e6',
- '#c4ebad',
- '#96dee8'
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
],
+ series: [
+ {
+ name: "分局预警占比",
+ type: "pie",
+ radius: "75%",
+ center: ["35%", "55%"],
+ roseType: "radius",
+ itemStyle: {
+ borderRadius: 0
+ },
+ label: {
+ show: false
+ },
+ emphasis: {
+ label: {
+ show: false
+ }
+ },
+ data: data
+ }
+ // {
+ // name: '面积模式',
+ // type: 'pie',
+ // radius: [20, 140],
+ // center: ['75%', '50%'],
+ // roseType: 'area',
+ // itemStyle: {
+ // borderRadius: 5
+ // },
+ // data: [
+ // {value: 30, name: 'rose 1'},
+ // {value: 28, name: 'rose 2'},
+ // {value: 26, name: 'rose 3'},
+ // {value: 24, name: 'rose 4'},
+ // {value: 22, name: 'rose 5'},
+ // {value: 20, name: 'rose 6'},
+ // {value: 18, name: 'rose 7'},
+ // {value: 16, name: 'rose 8'}
+ // ]
+ // }
+ ]
+ };
+ return option;
+}
+function middleData(allData, type) {
+ var ncMap = nc;
+ // var convertData = function (allData) {
+ // var res = [];
+ // for (var i = 0; i < data.length; i++) {
+ // var geoCoord = geoCoordMap[data[i].name];
+ // if (geoCoord) {
+ // res.push({
+ // name: data[i].name,
+ // value: geoCoord.concat(data[i].value)
+ // });
+ // }
+ // }
+ // return res;
+ // };
+ let name = "";
+ let label = "";
+ let symbolUrl = "";
+ let geoData = [];
+ allData["table"].forEach((item, i) => {
+ let obj = {};
+ if (type === 1) {
+ name = "保安员名称";
+ label =
+ "押运人员：" +
+ item.name +
+ "<br />当前位置：" +
+ item.location +
+ "<br />所属公司：" +
+ item.linkman +
+ "<br />联系电话：" +
+ item.tel;
+ symbolUrl = require("@/assets/img/people.png");
+ obj = {
+ name: label,
+ value: allData["geoData"][i]
+ };
+ } else if (type === 2) {
+ name = "押运车辆";
+ label =
+ "押运车辆车牌号：" +
+ item.carNum +
+ "<br />当前位置：" +
+ item.location +
+ "<br />所属公司：" +
+ item.company +
+ "<br />联系人：" +
+ item.linkman +
+ "<br />联系电话：" +
+ item.tel;
+ symbolUrl = require("@/assets/img/car.png");
+ obj = {
+ name: label,
+ value: allData["geoData"][i]
+ };
+ } else if (type === 3) {
+ name = "枪支";
+ label =
+ "枪支编号：" +
+ item.number +
+ "<br />当前位置：" +
+ item.location +
+ "<br />所属公司：" +
+ item.company +
+ "<br />负责人：" +
+ item.linkman +
+ "<br />联系电话：" +
+ item.tel;
+ symbolUrl = require("@/assets/img/gun.png");
+ obj = {
+ name: label,
+ value: allData["geoData"][i]
+ };
+ }
+ geoData.push(obj);
+ });
- legend: {
- right: "2%",
- top: "3%",
- // icon: "circle",
- itemHeight: 10,
- show: true,
- data: [
- "新建县",
- "安义县",
- "红谷滩新区",
- "西湖区",
- "东湖区",
- "经开区",
- "青云谱区",
- "高新区",
- "湾里区",
- "进贤县",
- "青山湖区"
- ],
- selectedMode: false,
- textStyle: {
- color: "#fff"
+ echarts.registerMap("ncMap", ncMap);
+ // echarts.registerMap('chinaMapOutline', chinaMapOutline);
+ let option = {
+ // backgroundColor: '#181F4E',
+ // tooltip: {
+ // trigger: 'item',
+ // },
+ tooltip: {
+ trigger: "item",
+ formatter: function(params) {
+ if (typeof params.value[1] == "undefined") {
+ return params.name;
+ } else {
+ return params.name;
+ }
},
- orient: "vertical"
+ backgroundColor: "#031952", //设置背景图片 rgba格式
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ borderColor: "gray", //设置边框颜色
+ extraCssText: "box-shadow: 0 0 3px rgba( 211,211,211, 0.5);",
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ }
},
- grid: {
- top: "5%",
- bottom: "50%",
- left: "30%",
- containLabel: false
- },
- yAxis: [
- {
- type: "category",
- inverse: true,
- z: 3,
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- interval: 0,
- inside: false,
+ geo: {
+ // silent: true,
+ map: "ncMap",
+ show: true,
+ zoom: 1.04,
+ top: "8%",
+ label: {
+ show: false,
+ color: "#fff",
+ emphasis: {
textStyle: {
- color: "#fff",
- fontSize: 8
- },
- show: true
- },
- data: optionData.yAxis
+ color: "#fff"
+ }
+ }
+ },
+
+ roam: true,
+ itemStyle: {
+ areaColor: "rgba(0,255,255,.02)",
+ borderColor: "#00ffff",
+ borderWidth: 1.5,
+ shadowColor: "#00ffff",
+ shadowOffsetX: 0,
+ shadowOffsetY: 4,
+ shadowBlur: 10
+ },
+ emphasis: {
+ itemStyle: {
+ color: "transparent", //悬浮背景
+ textStyle: {
+ color: "#fff"
+ }
+ }
}
- ],
- xAxis: [
+ },
+ series: [
{
- show: false
+ map: "ncMap",
+ // silent: true,
+ type: "map",
+ geoIndex: 0,
+ // aspectScale: 0.75, //长宽比
+ zoom: 1.14,
+ label: {
+ show: false,
+ color: "#fff"
+ },
+ emphasis: {
+ label: {
+ color: "#fff"
+ }
+ },
+ top: "10%",
+ roam: true,
+ itemStyle: {
+ areaColor: "rgba(0,255,255,.02)",
+ borderColor: "#00ffff",
+ borderWidth: 1.5,
+ shadowColor: "#00ffff",
+ shadowOffsetX: 0,
+ shadowOffsetY: 4,
+ shadowBlur: 10
+ },
+ emphasis: {
+ itemStyle: {
+ areaColor: "transparent", //悬浮背景
+ textStyle: {
+ color: "#fff"
+ }
+ }
+ }
+ },
+ {
+ name: name,
+ type: "scatter",
+ coordinateSystem: "geo",
+ // roam: false,
+ symbol: "image://" + symbolUrl,
+ symbolSize: [30, 30],
+ label: {
+ show: false,
+ color: "#fff",
+ fontSize: 9
+ },
+ itemStyle: {
+ color: "#FF0000" //标志颜色
+ },
+ data: geoData,
+ showEffectOn: "render",
+ rippleEffect: {
+ brushType: "stroke"
+ },
+ hoverAnimation: true,
+ emphasis: {
+ scale: true
+ },
+ zlevel: 1
}
- ],
- series: optionData.series
+ ]
};
return option;
}
export default {
left1Data,
left2Data,
+ left3Data,
right1Data,
right2Data,
- right3Data
+ right3Data,
+ middleData
};
--
Gitblit v1.9.3