soc_app/src/views/menu/cockpit/indexEcharts.js

//安全防范设施改造情况数据
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} <br/>{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 +
          '<br/>' +
          params.marker +
          '<span style="color:' +
          params.color +
          '">' +
          params.data['name'] +
          '\n' +
          params.data['value'] +
          '</span>'
        )
      }
    },
    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 +
          '<br/>' +
          params.marker +
          '<span style="color:' +
          params.color +
          '">' +
          params.data['name'] +
          '\n' +
          params.data['value'] +
          '</span>'
        )
      }
    },
    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 +
          '<br/>' +
          params.marker +
          '<span style="color:' +
          params.color +
          '">' +
          params.data['name'] +
          '\n' +
          params.data['value'] +
          '</span>'
        )
      }
    },
    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] + '<br>完成率: ' + 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 }