From e352f6419f6b2b49567421785694a20d23ecb13d Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 02 Aug 2021 19:48:15 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/zhba_regulatory
---
src/views/home/indexEchart.js | 339 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 255 insertions(+), 84 deletions(-)
diff --git a/src/views/home/indexEchart.js b/src/views/home/indexEchart.js
index 169adaa..3d08623 100644
--- a/src/views/home/indexEchart.js
+++ b/src/views/home/indexEchart.js
@@ -1,3 +1,5 @@
+import * as echarts from "echarts";
+import nc from '../../../public/nc.json';
function left1Data(allData) {
let nameArr = [];
let data1 = [];
@@ -16,7 +18,14 @@
trigger: "axis",
axisPointer: {
type: "shadow"
- }
+ },
+ backgroundColor: "#031952", //设置背景图片 rgba格式
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ },
},
color: [
'#2ec7c9',
@@ -45,7 +54,7 @@
}
},
grid: {
- top:'5%',
+ top: '5%',
left: "5%",
right: "6%",
bottom: "10%",
@@ -126,7 +135,14 @@
trigger: "axis",
axisPointer: {
type: "shadow"
- }
+ },
+ backgroundColor: "#031952", //设置背景图片 rgba格式
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ },
},
color: [
"#3fb1e3",
@@ -151,7 +167,7 @@
}
},
grid: {
- top:'5%',
+ top: '5%',
left: "5%",
right: "6%",
bottom: "15%",
@@ -182,7 +198,7 @@
name: "持证人数",
type: "bar",
// barWidth:30,
- barWidth: 20,
+ barWidth: 15,
stack: "total",
emphasis: {
focus: "series"
@@ -356,76 +372,45 @@
}
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 sumValue = 0;
+ 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);
- 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 = {
@@ -439,7 +424,7 @@
clockWise: true,
z: 2,
hoverAnimation: false,
- radius: [90 - i * 8 + "%", 85 - i * 8 + "%"],
+ radius: [83 - i * 12 + '%', 78 - i * 12 + '%'],
center: ["30%", "50%"],
labelLine: {
show: false
@@ -478,7 +463,14 @@
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" //设置文字颜色
+ },
},
color: [
"#91cc75",
@@ -501,19 +493,7 @@
// icon: "circle",
itemHeight: 10,
show: true,
- data: [
- "新建县",
- "安义县",
- "红谷滩新区",
- "西湖区",
- "东湖区",
- "经开区",
- "青云谱区",
- "高新区",
- "湾里区",
- "进贤县",
- "青山湖区"
- ],
+ data: legendData,
selectedMode: false,
textStyle: {
color: "#fff"
@@ -558,10 +538,201 @@
};
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 = '名称';
+ symbolUrl = require('@/assets/img/people.png')
+ obj = {
+ name: item.name,
+ value: allData['geoData'][i]
+ }
+ } else if (type === 2) {
+ name = '押运车辆';
+ label = '押运车辆车牌号';
+ symbolUrl = require('@/assets/img/car.png')
+ obj = {
+ name: item.carNum,
+ value: allData['geoData'][i]
+ }
+ } else if (type === 3) {
+ name = '枪支';
+ label = '枪支编号';
+ symbolUrl = require('@/assets/img/gun.png')
+ obj = {
+ name: item.number,
+ value: allData['geoData'][i]
+ }
+ }
+ geoData.push(obj)
+ })
+
+
+ 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 label + ' : ' + params.name;
+ }
+ },
+ backgroundColor: "#031952", //设置背景图片 rgba格式
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ },
+ },
+ geo: {
+ // silent: true,
+ map: 'ncMap',
+ show: true,
+ zoom: 1.14,
+ top: '10%',
+ label: {
+ normal: {
+ show: false,
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ emphasis: {
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ },
+
+ roam: true,
+ itemStyle: {
+ normal: {
+ areaColor: 'rgba(0,255,255,.02)',
+ borderColor: '#00ffff',
+ borderWidth: 1.5,
+ shadowColor: '#00ffff',
+ shadowOffsetX: 0,
+ shadowOffsetY: 4,
+ shadowBlur: 10,
+ },
+ emphasis: {
+ color: 'transparent', //悬浮背景
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ }
+ },
+ series: [
+ {
+ map: 'ncMap',
+ // silent: true,
+ type: 'map',
+ geoIndex: 0,
+ // aspectScale: 0.75, //长宽比
+ zoom: 1.14,
+ label: {
+ normal: {
+ show: false,
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ emphasis: {
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ },
+ top: '10%',
+ roam: true,
+ itemStyle: {
+ normal: {
+ areaColor: 'rgba(0,255,255,.02)',
+ borderColor: '#00ffff',
+ borderWidth: 1.5,
+ shadowColor: '#00ffff',
+ shadowOffsetX: 0,
+ shadowOffsetY: 4,
+ shadowBlur: 10,
+ },
+ emphasis: {
+ areaColor: 'transparent', //悬浮背景
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ }
+ },
+ {
+ name: name,
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ // roam: false,
+ symbol: 'image://' + symbolUrl,
+ symbolSize: [30, 30],
+ label: {
+ normal: {
+ show: false,
+ textStyle: {
+ color: '#fff',
+ fontSize: 9,
+ },
+ // formatter(value) {
+ // return value.data.value[0]
+ // }
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#FF0000', //标志颜色
+ }
+ },
+ data: geoData,
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ hoverAnimation: true,
+ zlevel: 1
+ }
+ ]
+ }
+ return option
+}
export default {
left1Data,
left2Data,
right1Data,
right2Data,
- right3Data
+ right3Data,
+ middleData
};
--
Gitblit v1.9.3