|
|
@@ -1,150 +1,204 @@
|
|
|
//安全防范设施改造情况数据
|
|
|
-
|
|
|
-let securityPrecautions = (data = []) => {
|
|
|
- var colors = ['#146de0', '#27ef5e', '#ffc140']
|
|
|
+let aqsecurity = (
|
|
|
+ chartData = [
|
|
|
+ {
|
|
|
+ value: 800,
|
|
|
+ name: '主料'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 200,
|
|
|
+ name: '辅料'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 300,
|
|
|
+ name: '包装材料'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+) => {
|
|
|
+ var color = ['#92cd76', '#5370c7', '#ee6666']
|
|
|
+ const sum = chartData.reduce((per, cur) => per + cur.value, 0)
|
|
|
let option = {
|
|
|
+ background: '#fff',
|
|
|
title: {
|
|
|
- text: '',
|
|
|
-
|
|
|
- left: 'left'
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
+ show: true,
|
|
|
+ text: ' ',
|
|
|
+ subtext: sum + '家',
|
|
|
+ x: '29%',
|
|
|
+ y: '33%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#778CA2',
|
|
|
+ fontSize: 20,
|
|
|
+ fontWeight: '400'
|
|
|
+ },
|
|
|
+ subtextStyle: {
|
|
|
+ color: 'rgba(0,0,0,0.85)',
|
|
|
+ fontSize: 20,
|
|
|
+ fontWeight: '400'
|
|
|
+ },
|
|
|
+ textAlign: 'center'
|
|
|
},
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
+ // icon: "diamond",
|
|
|
+ left: '55%',
|
|
|
+ icon: 'circle',
|
|
|
+ textStyle: {
|
|
|
+ color: '#373737',
|
|
|
+
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ color: 'rgba(0,0,0,0.65)'
|
|
|
+ },
|
|
|
+ symbol: {
|
|
|
+ color: 'rgba(0,0,0,0.45)'
|
|
|
+ },
|
|
|
+ percent: {
|
|
|
+ color: 'rgba(0,0,0,0.45)'
|
|
|
+ },
|
|
|
+ value: {
|
|
|
+ color: 'rgba(0,0,0,0.65)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
top: 'center',
|
|
|
- left: '58%',
|
|
|
- data: data,
|
|
|
+ right: '5%',
|
|
|
+ itemGap: 14,
|
|
|
+ itemHeight: 24,
|
|
|
+ itemWidth: 24,
|
|
|
+ data: chartData.name,
|
|
|
formatter: function (name) {
|
|
|
- var data = option.series[0].data
|
|
|
- var total = 0
|
|
|
- var tarValue
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
- total += data[i].value
|
|
|
- if (data[i].name == name) {
|
|
|
- tarValue = data[i].value
|
|
|
- }
|
|
|
+ let obj = {}
|
|
|
+ if (name) {
|
|
|
+ obj = chartData.find(item => item.name === name)
|
|
|
}
|
|
|
- var v = tarValue
|
|
|
- var p = Math.round((tarValue / total) * 100)
|
|
|
- return `${name} ${v}家 ${p}%`
|
|
|
+ return `{name|${name}}{symbol| }{value|${obj.value || 0}家}{percent|${
|
|
|
+ obj.value && ((obj.value / sum) * 100).toFixed(0)
|
|
|
+ }%}`
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- center: ['30%', '50%'],
|
|
|
- name: '生命周期统计',
|
|
|
+ name: '',
|
|
|
type: 'pie',
|
|
|
- radius: '70%',
|
|
|
- data: data,
|
|
|
-
|
|
|
+ roundCap: true,
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ center: ['30%', '50%'],
|
|
|
+ startAngle: 180, //起始角度
|
|
|
+ data: chartData,
|
|
|
itemStyle: {
|
|
|
- normal: {
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
- shadowBlur: 5,
|
|
|
- color: function (param) {
|
|
|
- // console.log(param.dataIndex)
|
|
|
- return colors[param.dataIndex]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- position: 'inner',
|
|
|
- textStyle: {
|
|
|
- fontSize: 14,
|
|
|
- color: '#181818'
|
|
|
- },
|
|
|
- formatter: params => {
|
|
|
- return `${params.value}`
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 1,
|
|
|
+ color: function (params) {
|
|
|
+ return color[params.dataIndex]
|
|
|
}
|
|
|
},
|
|
|
labelLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ length: 8,
|
|
|
+ length2: 16,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1
|
|
|
}
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ fontFamily: 'ysbth',
|
|
|
+ position: 'outside',
|
|
|
+ padding: [0, -4, 0, -4],
|
|
|
+ formatter(params) {
|
|
|
+ if (params.name === '') {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ return `${params.percent.toFixed(0)}%`
|
|
|
+ },
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: '14px',
|
|
|
+ lineHeight: 10
|
|
|
}
|
|
|
}
|
|
|
- ],
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
- shadowBlur: 5
|
|
|
- }
|
|
|
- }
|
|
|
+ ]
|
|
|
}
|
|
|
return option
|
|
|
}
|
|
|
-
|
|
|
-let pieGaData = (title = '暂无设置标题', data = []) => {
|
|
|
+//柱状图堆叠
|
|
|
+let ddsecurity = () => {
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
|
- },
|
|
|
- title: [
|
|
|
- {
|
|
|
- bottom: '10%',
|
|
|
- width: '100%',
|
|
|
- left: 'center',
|
|
|
- text: title
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|
|
}
|
|
|
- ],
|
|
|
- color: ['#169bd5', '#ccc'],
|
|
|
+ },
|
|
|
+
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#51688a"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['在行式自助银行', '离行式自助银行', '营业网点']
|
|
|
+ },
|
|
|
series: [
|
|
|
{
|
|
|
- name: '',
|
|
|
- type: 'pie',
|
|
|
- center: ['45%', '50%'], // 饼图的圆心坐标
|
|
|
- radius: ['50%', '60%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- hoverAnimation: false,
|
|
|
+ name: '在行式自助银行',
|
|
|
+ type: 'bar',
|
|
|
+ color: '#5370c7',
|
|
|
+ stack: 'total',
|
|
|
label: {
|
|
|
- // 饼图图形上的文本标签
|
|
|
-
|
|
|
- normal: {
|
|
|
- // normal 是图形在默认状态下的样式
|
|
|
- show: true,
|
|
|
- position: 'center',
|
|
|
- color: '#169bd5',
|
|
|
- fontSize: 18,
|
|
|
- fontWeight: 'bold',
|
|
|
- formatter: '{b}\n{d}%' // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
|
|
|
- }
|
|
|
+ show: true
|
|
|
},
|
|
|
- labelLine: {
|
|
|
- normal: {
|
|
|
- show: false
|
|
|
- }
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: [320, 302, 301, 334, 390, 330, 320]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '离行式自助银行',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+
|
|
|
+ color: '#92cd76',
|
|
|
+ label: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '营业网点',
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'total',
|
|
|
+ color: '#ee6666',
|
|
|
+ label: {
|
|
|
+ show: true
|
|
|
},
|
|
|
- data: data
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
return option
|
|
|
}
|
|
|
-//网点业务总览
|
|
|
-// [
|
|
|
-// { value: 666, name: '巡查上报' },
|
|
|
-// { value: 193, name: '自行处置' },
|
|
|
-// { value: 300, name: '微信市民举报' },
|
|
|
-// { value: 200, name: '微治理上报' },
|
|
|
-// { value: 100, name: '视频抓拍' }
|
|
|
-// ]
|
|
|
-let dotData = (
|
|
|
- title = '',
|
|
|
|
|
|
- data = []
|
|
|
-) => {
|
|
|
- var colors = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
|
|
|
+let securityPrecautions = (data = []) => {
|
|
|
+ var colors = ['#ee6666','#5370c7' ]
|
|
|
let option = {
|
|
|
title: {
|
|
|
text: '',
|
|
|
+
|
|
|
left: 'left'
|
|
|
},
|
|
|
tooltip: {
|
|
|
@@ -153,8 +207,7 @@ let dotData = (
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
top: 'center',
|
|
|
- left: '55%',
|
|
|
- top:'20%',
|
|
|
+ left: '58%',
|
|
|
data: data,
|
|
|
formatter: function (name) {
|
|
|
var data = option.series[0].data
|
|
|
@@ -167,28 +220,22 @@ let dotData = (
|
|
|
}
|
|
|
}
|
|
|
var v = tarValue
|
|
|
- var p =0
|
|
|
- if(tarValue==0&&total==0){
|
|
|
- p=0
|
|
|
- }else{
|
|
|
-
|
|
|
- p = Math.round((tarValue / total) * 100)
|
|
|
- }
|
|
|
+ var p = Math.round((tarValue / total) * 100)
|
|
|
return `${name} ${v}家 ${p}%`
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- center: ['27%', '40%'],
|
|
|
- name: '生命周期统计',
|
|
|
+ center: ['30%', '50%'],
|
|
|
+
|
|
|
type: 'pie',
|
|
|
- radius: '80%',
|
|
|
+ radius: '70%',
|
|
|
data: data,
|
|
|
- top:'10%',
|
|
|
+
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
- shadowBlur: 5,
|
|
|
+
|
|
|
+ shadowBlur: 1,
|
|
|
color: function (param) {
|
|
|
// console.log(param.dataIndex)
|
|
|
return colors[param.dataIndex]
|
|
|
@@ -212,124 +259,57 @@ let dotData = (
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
- shadowBlur: 5
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
return option
|
|
|
}
|
|
|
+
|
|
|
+//网点业务总览
|
|
|
+// [
|
|
|
+// { value: 666, name: '巡查上报' },
|
|
|
+// { value: 193, name: '自行处置' },
|
|
|
+// { value: 300, name: '微信市民举报' },
|
|
|
+// { value: 200, name: '微治理上报' },
|
|
|
+// { value: 100, name: '视频抓拍' }
|
|
|
+// ]
|
|
|
//保安情况
|
|
|
-let securityData = (
|
|
|
+let dotData = (
|
|
|
title = '',
|
|
|
|
|
|
- data = [
|
|
|
- // { value: 666, name: '已配备' },
|
|
|
- // { value: 193, name: '未配备' }
|
|
|
- ]
|
|
|
+ data = []
|
|
|
) => {
|
|
|
- var color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
|
|
|
+ var colors = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
|
|
|
let option = {
|
|
|
- color: color,
|
|
|
- title: {
|
|
|
- text: '',
|
|
|
-
|
|
|
- left: 'left'
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- backgroundColor: 'rgba(0,0,0,0.5)',
|
|
|
- color: '#fff',
|
|
|
- formatter: function (params) {
|
|
|
- return (
|
|
|
- params.name +
|
|
|
- '<br/>' +
|
|
|
- params.marker +
|
|
|
- '<span style="color:' +
|
|
|
- params.color +
|
|
|
- '">' +
|
|
|
- params.data['name'] +
|
|
|
- '\n' +
|
|
|
- params.data['value'] +
|
|
|
- '</span>'
|
|
|
- )
|
|
|
- }
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['一类库', '二类库', '三类库', '四类库',],
|
|
|
},
|
|
|
- legend: {
|
|
|
- orient: 'vertical',
|
|
|
- icon: 'circle',
|
|
|
- left: '2%',
|
|
|
- top: '32%',
|
|
|
- itemWidth: 14,
|
|
|
- itemGap: 20,
|
|
|
- textStyle: {
|
|
|
- rich: {
|
|
|
- a: {
|
|
|
- color: '#1f1f1f',
|
|
|
- fontSize: 16,
|
|
|
- padding: [0, 10, 0, 0]
|
|
|
- },
|
|
|
- b: {
|
|
|
- color: '#1f1f1f',
|
|
|
- fontSize: 16,
|
|
|
- padding: [0, 10, 0, 10]
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- formatter: function (name) {
|
|
|
- var target, unit
|
|
|
- for (var i = 0, l = data.length; i < l; i++) {
|
|
|
- if (data[i].name == name) {
|
|
|
- target = data[i].value
|
|
|
- unit = data[i].unit
|
|
|
- }
|
|
|
- }
|
|
|
- return `{a| ${name}}{b|${target}}`
|
|
|
- }
|
|
|
+
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
},
|
|
|
series: [
|
|
|
- {
|
|
|
- name: '',
|
|
|
- type: 'pie',
|
|
|
- radius: ['20%', '65%'],
|
|
|
- center: ['65%', '50%'],
|
|
|
- avoidLabelOverlap: true,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: true,
|
|
|
- position: 'inside',
|
|
|
- formatter: '{d}%',
|
|
|
- textStyle: {
|
|
|
- align: 'center',
|
|
|
- baseline: 'middle',
|
|
|
- fontSize: 16,
|
|
|
- fontWeight: '100',
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
- shadowBlur: 5
|
|
|
- }
|
|
|
+
|
|
|
+ {
|
|
|
+ data: data,
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 40,
|
|
|
+ color: '#5370c7',
|
|
|
+ backgroundStyle: {
|
|
|
+ color: 'rgba(220, 220, 220, 0.8)',
|
|
|
+ },
|
|
|
},
|
|
|
- data: data
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
+ ],
|
|
|
+};
|
|
|
return option
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
//离行式自助银行
|
|
|
let LHSData = (
|
|
|
title = '',
|
|
|
@@ -356,10 +336,9 @@ let LHSData = (
|
|
|
title: {
|
|
|
text: title,
|
|
|
left: 'center',
|
|
|
- bottom:'0%'
|
|
|
+ bottom: '0%'
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
series: [
|
|
|
{
|
|
|
type: 'pie',
|
|
|
@@ -400,7 +379,6 @@ let LHSData = (
|
|
|
]
|
|
|
}
|
|
|
return option
|
|
|
-
|
|
|
}
|
|
|
//在行式自助银行
|
|
|
let ZHSData = (
|
|
|
@@ -427,12 +405,12 @@ let ZHSData = (
|
|
|
title: {
|
|
|
text: title,
|
|
|
left: 'center',
|
|
|
- bottom:'0%'
|
|
|
+ bottom: '0%'
|
|
|
},
|
|
|
legend: {
|
|
|
show: true,
|
|
|
icon: 'circle',
|
|
|
-
|
|
|
+
|
|
|
itemWidth: 10,
|
|
|
itemStyle: {
|
|
|
borderColor: 'none'
|
|
|
@@ -452,7 +430,7 @@ let ZHSData = (
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
series: [
|
|
|
{
|
|
|
type: 'pie',
|
|
|
@@ -627,4 +605,4 @@ let resumption = (data, type = 0) => {
|
|
|
return option
|
|
|
}
|
|
|
|
|
|
-export { securityPrecautions, resumption, dotData, securityData, ZHSData, LHSData, pieGaData }
|
|
|
+export { securityPrecautions, resumption, dotData, ZHSData, LHSData, aqsecurity, ddsecurity }
|
coys