From e07b830d7c4b3e401f3ffaaa65986618a2a4b77d Mon Sep 17 00:00:00 2001
From: zhengpz <1838927346@qq.com>
Date: Fri, 13 Aug 2021 01:43:53 +0800
Subject: [PATCH] 改首页及统计明细表
---
src/views/home/indexEchart.js | 400 +++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 293 insertions(+), 107 deletions(-)
diff --git a/src/views/home/indexEchart.js b/src/views/home/indexEchart.js
index c7b151f..c3e3cea 100644
--- a/src/views/home/indexEchart.js
+++ b/src/views/home/indexEchart.js
@@ -6,6 +6,7 @@
let data2 = [];
let data3 = [];
let data4 = [];
+ // let legend = ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"];
allData.forEach(item => {
nameArr.push(item.name);
data1.push(item.server.confess);
@@ -13,6 +14,30 @@
data3.push(item.server.security);
data4.push(item.server.armed);
});
+ 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)
+ // }];
let option = {
tooltip: {
trigger: "axis",
@@ -51,7 +76,10 @@
itemWidth: 20,
textStyle: {
color: "#fff"
- }
+ },
+ // formatter: function (legend1) {
+ // return legend1;
+ // }
},
grid: {
top: '5%',
@@ -219,6 +247,83 @@
return option;
}
+function left3Data(allData) {
+ let option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ data: ['男', '女'],
+ bottom: "1%",
+ itemWidth: 20,
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ color: [
+ "#91cc75",
+ "#fac858",
+ "#73c0de",
+ ],
+ grid: {
+ top: '5%',
+ left: "5%",
+ right: "6%",
+ bottom: "15%",
+ 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]
+ },
+ ]
+ };
+ return option
+}
+
function right1Data(allData) {
// let yueData = [
// "一月",
@@ -373,7 +478,6 @@
function right3Data(allData) {
let data = [];
- let sumValue = 0;
let legendData = [];
let datas = allData.sort((a, b) => {
return b.Count - a.Count
@@ -384,14 +488,14 @@
value: item.Count
}
legendData.push(item.jurname)
- sumValue += Number(item.Count)
+ // sumValue += Number(item.Count)
data.push(obj)
})
// let arrName = getArrayValue(data, "name");
// let arrValue = getArrayValue(data, "value");
// let sumValue = 1000;
// let objData = array2obj(data, "name");
- let optionData = getData(data);
+ // let optionData = getData(data);
// function getArrayValue(array, key) {
// var key = key || "value";
@@ -412,59 +516,137 @@
// 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,
- 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;
- }
+ // 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,
@@ -477,6 +659,18 @@
textStyle: {
color: "#fff" //设置文字颜色
},
+ },
+ legend: {
+ right: "2%",
+ top: "10%",
+ itemHeight: 10,
+ show: true,
+ selectedMode: false,
+ textStyle: {
+ color: "#fff"
+ },
+ data: legendData,
+ orient: "vertical"
},
color: [
"#91cc75",
@@ -492,56 +686,47 @@
'#c4ebad',
'#96dee8'
],
-
- legend: {
- right: "2%",
- top: "3%",
- // icon: "circle",
- itemHeight: 10,
- show: true,
- data: legendData,
- selectedMode: false,
- textStyle: {
- color: "#fff"
+ series: [
+ {
+ name: '分局预警占比',
+ type: 'pie',
+ radius: '70%',
+ center: ['30%', '50%'],
+ roseType: 'radius',
+ itemStyle: {
+ borderRadius: 0
+ },
+ label: {
+ show: false
+ },
+ emphasis: {
+ label: {
+ show: false
+ }
+ },
+ data: data
},
- 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
+ // {
+ // 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;
}
@@ -623,8 +808,8 @@
// silent: true,
map: 'ncMap',
show: true,
- zoom: 1.14,
- top: '10%',
+ zoom: 1.04,
+ top: '8%',
label: {
show: false,
color: '#fff',
@@ -726,6 +911,7 @@
export default {
left1Data,
left2Data,
+ left3Data,
right1Data,
right2Data,
right3Data,
--
Gitblit v1.9.3