|
|
@@ -139,9 +139,9 @@ let ddsecurity = () => {
|
|
|
type: 'value',
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
- color: "#51688a"
|
|
|
+ color: '#51688a'
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'category',
|
|
|
@@ -165,7 +165,7 @@ let ddsecurity = () => {
|
|
|
name: '离行式自助银行',
|
|
|
type: 'bar',
|
|
|
stack: 'total',
|
|
|
-
|
|
|
+
|
|
|
color: '#92cd76',
|
|
|
label: {
|
|
|
show: true
|
|
|
@@ -194,7 +194,7 @@ let ddsecurity = () => {
|
|
|
}
|
|
|
|
|
|
let securityPrecautions = (data = []) => {
|
|
|
- var colors = ['#ee6666','#5370c7' ]
|
|
|
+ var colors = ['#ee6666', '#5370c7']
|
|
|
let option = {
|
|
|
title: {
|
|
|
text: '',
|
|
|
@@ -204,6 +204,7 @@ let securityPrecautions = (data = []) => {
|
|
|
tooltip: {
|
|
|
trigger: 'item'
|
|
|
},
|
|
|
+
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
top: 'center',
|
|
|
@@ -227,14 +228,13 @@ let securityPrecautions = (data = []) => {
|
|
|
series: [
|
|
|
{
|
|
|
center: ['30%', '50%'],
|
|
|
-
|
|
|
+
|
|
|
type: 'pie',
|
|
|
radius: '70%',
|
|
|
data: data,
|
|
|
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
-
|
|
|
shadowBlur: 1,
|
|
|
color: function (param) {
|
|
|
// console.log(param.dataIndex)
|
|
|
@@ -258,13 +258,11 @@ let securityPrecautions = (data = []) => {
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
-
|
|
|
+ shadowOffsetX: 0
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- ],
|
|
|
-
|
|
|
+ ]
|
|
|
}
|
|
|
return option
|
|
|
}
|
|
|
@@ -281,105 +279,70 @@ let securityPrecautions = (data = []) => {
|
|
|
let dotData = (
|
|
|
title = '',
|
|
|
|
|
|
- data = []
|
|
|
+ data = [],
|
|
|
+ num = 0
|
|
|
) => {
|
|
|
var colors = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
|
|
|
let option = {
|
|
|
xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['一类库', '二类库', '三类库', '四类库',],
|
|
|
- },
|
|
|
-
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
+ type: 'category',
|
|
|
+ data: ['一类库', '二类库', '三类库', '四类库']
|
|
|
},
|
|
|
- series: [
|
|
|
-
|
|
|
- {
|
|
|
- data: data,
|
|
|
- type: 'bar',
|
|
|
- barWidth: 40,
|
|
|
- color: '#5370c7',
|
|
|
- backgroundStyle: {
|
|
|
- color: 'rgba(220, 220, 220, 0.8)',
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
-};
|
|
|
- return option
|
|
|
-}
|
|
|
-
|
|
|
|
|
|
-//离行式自助银行
|
|
|
-let LHSData = (
|
|
|
- title = '',
|
|
|
-
|
|
|
- data = [
|
|
|
- // { value: 666, name: '已配备' },
|
|
|
- // { value: 193, name: '未配备' }
|
|
|
- ]
|
|
|
-) => {
|
|
|
- let color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
|
|
|
- const handleData = {}
|
|
|
- let sum = 0
|
|
|
- // 求和
|
|
|
- data.map(item => {
|
|
|
- sum += item.value
|
|
|
- })
|
|
|
- // 数据处理
|
|
|
- data.map(item => {
|
|
|
- handleData[item.name] = item
|
|
|
- handleData[item.name].percentage = ((item.value / sum) * 100).toFixed(1) + '%'
|
|
|
- })
|
|
|
-
|
|
|
- let option = {
|
|
|
- title: {
|
|
|
- text: title,
|
|
|
- left: 'center',
|
|
|
- bottom: '0%'
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
},
|
|
|
-
|
|
|
series: [
|
|
|
{
|
|
|
- type: 'pie',
|
|
|
- color: ['#4D88FE', '#50CCCB', '#FFBF3C'],
|
|
|
- radius: '130%',
|
|
|
- left: 'center',
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- position: 'inside', // 在内部显示，outseide 是在外部显示
|
|
|
- show: true,
|
|
|
- formatter: '{c}'
|
|
|
- }
|
|
|
- },
|
|
|
data: data,
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
- }
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- normal: {
|
|
|
- show: false
|
|
|
+ type: 'bar',
|
|
|
+ label: {
|
|
|
+ position: 'top', // 顶部显示
|
|
|
+ formatter: function (params) {
|
|
|
+ // dataIndex是当前柱状图的索引
|
|
|
+ let num = (dataList1[params.dataIndex] + dataList2[params.dataIndex]) / dataList2[params.dataIndex]
|
|
|
+ num = Math.round(num * 100) / 100 // 保留两位小数,不四舍五入
|
|
|
+ return num + '%'
|
|
|
}
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
- shadowBlur: 5,
|
|
|
- borderColor: '#fff'
|
|
|
- }
|
|
|
+
|
|
|
+ barWidth: 40,
|
|
|
+ color: '#5370c7',
|
|
|
+ backgroundStyle: {
|
|
|
+ color: 'rgba(220, 220, 220, 0.8)'
|
|
|
}
|
|
|
- // itemStyle: {
|
|
|
- // borderColor: '#fff'
|
|
|
- // }
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
return option
|
|
|
}
|
|
|
+var get = function (e) {
|
|
|
+ var newStr = ' '
|
|
|
+ var start, end
|
|
|
+ var name_len = e.name.length //每个内容名称的长度
|
|
|
+ var max_name = 5 //每行最多显示的字数
|
|
|
+ var new_row = Math.ceil(name_len / max_name) // 最多能显示几行，向上取整比如2.1就是3行
|
|
|
+ if (name_len > max_name) {
|
|
|
+ //如果长度大于每行最多显示的字数
|
|
|
+ for (var i = 0; i < new_row; i++) {
|
|
|
+ //循环次数就是行数
|
|
|
+ var old = '' //每次截取的字符
|
|
|
+ start = i * max_name //截取的起点
|
|
|
+ end = start + max_name //截取的终点
|
|
|
+ if (i == new_row - 1) {
|
|
|
+ //最后一行就不换行了
|
|
|
+ old = e.name.substring(start)
|
|
|
+ } else {
|
|
|
+ old = e.name.substring(start, end) + '\n'
|
|
|
+ }
|
|
|
+ newStr += old //拼接字符串
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ //如果小于每行最多显示的字数就返回原来的字符串
|
|
|
+ newStr = e.name
|
|
|
+ }
|
|
|
+ return newStr + `(${e.value})`
|
|
|
+}
|
|
|
//在行式自助银行
|
|
|
let ZHSData = (
|
|
|
title = '在行式自助银行',
|
|
|
@@ -388,88 +351,41 @@ let ZHSData = (
|
|
|
// { value: 193, name: '大堂式设备' }
|
|
|
]
|
|
|
) => {
|
|
|
- let color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
|
|
|
- const handleData = {}
|
|
|
- let sum = 0
|
|
|
- // 求和
|
|
|
- data.map(item => {
|
|
|
- sum += item.value
|
|
|
- })
|
|
|
- // 数据处理
|
|
|
- data.map(item => {
|
|
|
- handleData[item.name] = item
|
|
|
- handleData[item.name].percentage = ((item.value / sum) * 100).toFixed(1) + '%'
|
|
|
- })
|
|
|
-
|
|
|
let option = {
|
|
|
- title: {
|
|
|
- text: title,
|
|
|
- left: 'center',
|
|
|
- bottom: '0%'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- show: true,
|
|
|
- icon: 'circle',
|
|
|
-
|
|
|
- itemWidth: 10,
|
|
|
- itemStyle: {
|
|
|
- borderColor: 'none'
|
|
|
- },
|
|
|
- textStyle: {
|
|
|
- rich: {
|
|
|
- name: {
|
|
|
- color: '#606266',
|
|
|
- fontSize: 14
|
|
|
- },
|
|
|
- percentage: {
|
|
|
- color: '#606266',
|
|
|
- fontSize: 16,
|
|
|
- padding: [0, 0, 0, 30],
|
|
|
- align: 'right'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
series: [
|
|
|
{
|
|
|
+ color: ['#5470c6', '#91cc75', '#ee6666', '#73c0de'],
|
|
|
+ name: '',
|
|
|
type: 'pie',
|
|
|
- color: ['#4D88FE', '#50CCCB', '#FFBF3C'],
|
|
|
- radius: '130%',
|
|
|
- left: 'center',
|
|
|
+ radius: '50%',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data: data,
|
|
|
label: {
|
|
|
normal: {
|
|
|
- position: 'inside', // 在内部显示，outseide 是在外部显示
|
|
|
- show: true,
|
|
|
- formatter: '{c}'
|
|
|
- }
|
|
|
+ formatter: get,
|
|
|
+ rich: {
|
|
|
+ b: {
|
|
|
+ width: 20,
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: '#656565' // 改变标示文字的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
},
|
|
|
- data: data,
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
}
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- normal: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.8)',
|
|
|
- shadowBlur: 5,
|
|
|
- borderColor: '#fff'
|
|
|
- }
|
|
|
}
|
|
|
- // itemStyle: {
|
|
|
- // borderColor: '#fff'
|
|
|
- // }
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
+
|
|
|
return option
|
|
|
}
|
|
|
//日常履职完成率
|
|
|
@@ -605,4 +521,4 @@ let resumption = (data, type = 0) => {
|
|
|
return option
|
|
|
}
|
|
|
|
|
|
-export { securityPrecautions, resumption, dotData, ZHSData, LHSData, aqsecurity, ddsecurity }
|
|
|
+export { securityPrecautions, resumption, dotData, ZHSData, aqsecurity, ddsecurity }
|
凉纪