//安全防范设施改造情况数据 let securityPrecautions = ( data = [ { value: 1048, name: 'GA38-2021' }, { value: 735, name: 'GA38-2015' }, { value: 580, name: '未达标' } ] ) => { var colors = ['#146de0', '#27ef5e', '#ffc140'] let option = { title: { text: '安全防范改造情况', left: 'left' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', top: 'center', left: '50%', data: data, 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 } } var v = tarValue var p = Math.round((tarValue / total) * 100) return `${name} ${v}家 ${p}%` } }, series: [ { center: ['25%', '60%'], name: '生命周期统计', type: 'pie', radius: '50%', data: data, 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}` } }, labelLine: { show: false }, emphasis: { 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 } //GA38-2021标准 let pieGaData = ( title = '暂无设置标题', data = [ { value: 55, name: '203', label: { normal: { show: true } } }, { value: 45, name: '正常1', label: { normal: { show: false } } } ] ) => { let option = { tooltip: { trigger: 'item', formatter: '{a}
{b}: {c} ({d}%)' }, title: [ { bottom: 1, width: '100%', left: 'center', text: title } ], color: ['#169bd5', '#ccc'], series: [ { name: '', type: 'pie', center: ['50%', '50%'], // 饼图的圆心坐标 radius: ['50%', '60%'], avoidLabelOverlap: false, hoverAnimation: false, label: { // 饼图图形上的文本标签 normal: { // normal 是图形在默认状态下的样式 show: true, position: 'center', color: '#169bd5', fontSize: 18, fontWeight: 'bold', formatter: '{b}\n{d}%' // {b}:数据名; {c}:数据值; {d}:百分比,可以自定义显示内容, } }, labelLine: { normal: { show: false } }, data: data } ] } return option } //网点业务总览 let dotData = ( title = '网点业务库总览', data = [ { value: 666, name: '巡查上报' }, { value: 193, name: '自行处置' }, { value: 300, name: '微信市民举报' }, { value: 200, name: '微治理上报' }, { value: 100, name: '视频抓拍' } ] ) => { console.log(data, 'sss') var color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red'] let option = { color: color, title: { text: title, left: 'left' }, tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0.5)', color: '#fff', formatter: function (params) { return ( params.name + '
' + params.marker + '' + params.data['name'] + '\n' + params.data['value'] + '' ) } }, 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}}` } }, 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 } ] } return option } //保安情况 let securityData = ( title = '保安配备情况', data = [ { value: 666, name: '已配备' }, { value: 193, name: '未配备' } ] ) => { var color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red'] let option = { color: color, title: { text: title, left: 'left' }, tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0.5)', color: '#fff', formatter: function (params) { return ( params.name + '
' + params.marker + '' + params.data['name'] + '\n' + params.data['value'] + '' ) } }, 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}}` } }, 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 } ] } return option } //离行式自助银行 let LHSData = ( title = '', data = [ { value: 666, name: '已配备' }, { value: 193, name: '未配备' } ] ) => { var color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red'] let option = { color: color, title: { text: title, left: 'left' }, tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0.5)', color: '#fff', formatter: function (params) { return ( params.name + '
' + params.marker + '' + params.data['name'] + '\n' + params.data['value'] + '' ) } }, 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}}` } }, series: [ { name: '', type: 'pie', radius: ['20%', '65%'], center: ['75%', '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 }, data: data } ] } return option } //在行式自助银行 let ZHSData = ( 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' }, legend: { show: true, icon: 'circle', right: '3%', left: 'center', bottom: '10%', itemWidth: 10, itemStyle: { borderColor: 'none' }, textStyle: { rich: { name: { color: '#606266', fontSize: 14 }, percentage: { color: '#606266', fontSize: 16, padding: [0, 0, 0, 30], align: 'right' } } } }, tooltip: { trigger: 'item' }, 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 } }, itemStyle: { normal: { shadowColor: 'rgba(0, 0, 0, 0.8)', shadowBlur: 5, borderColor: '#fff' } }, // itemStyle: { // borderColor: '#fff' // } } ] } return option } //日常履职完成率 let resumption = (data, type = 0) => { var getzszy = ['每日履职', '报警测试', 'UPS维护', '夜间值守', '离行巡检'] //数据点名称 var getzswcl = [101, 100, 100, 98.65, 98.3] //招生完成率 var getzswcl2 = [101, 100, 100, 98.65, 98.3] //招生完成率 var getzswclzd = [] //招生完成率100% if (type == 0) { if (data && data.length > 0) { getzszy = data.map(item => item.orgName) getzswcl = data.map(item => parseInt(item.rate * 100)) getzswcl2 = data.map(item => parseInt(item.rate * 100) + '%') } } else { if (data && data.length > 0) { getzszy = data.map(item => item.orgName) getzswcl = data.map(item => { if (item.isNo) { return parseInt(item.rate * 100) } else { return parseInt(item.rate) } }) getzswcl2 = data.map(item => { if (item.isNo) { return parseInt(item.rate * 100) + '%' } else { return item.rate + '项' } }) } } for (let i = 0; i < getzswcl.length; i++) { if (getzswcl[i] > 100) { getzswcl[i] = 100 } getzswclzd.push(100) } let option = { grid: { right: '25%', bottom: '3%', left: '25%', top: '3%' }, tooltip: { trigger: 'axis', axisPointer: { type: 'none' }, formatter: function (params) { return getzszy[params[0].dataIndex] + '
完成率: ' + getzswcl2[params[0].dataIndex] } }, xAxis: { show: false, type: 'value' }, yAxis: [ { type: 'category', inverse: true, axisLabel: { show: true, textStyle: { color: '#666666', fontSize: '13' } }, splitLine: { show: false }, axisTick: { show: false }, axisLine: { show: false }, data: getzszy }, { type: 'category', inverse: true, axisTick: 'none', axisLine: 'none', show: true, axisLabel: { textStyle: { color: '#333333', fontSize: '13' }, // formatter: '{value}%' formatter: function (value, index) { return value } }, data: getzswcl2 } ], series: [ { name: '值', type: 'bar', zlevel: 1, itemStyle: { normal: { barBorderRadius: 5, color: '#4E7BFE' } }, barWidth: 10, data: getzswcl }, { name: '背景', type: 'bar', barWidth: 10, barGap: '-100%', data: getzswclzd, itemStyle: { normal: { color: 'rgba(103,150,253,0.3)', barBorderRadius: 5 } } } ] } return option } export { securityPrecautions, resumption, dotData, securityData, ZHSData, LHSData, pieGaData }