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

//安全防范设施改造情况数据
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: {
      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',
      right: '5%',
      itemGap: 14,
      itemHeight: 24,
      itemWidth: 24,
      data: chartData.name,
      formatter: function (name) {
        let obj = {}
        if (name) {
          obj = chartData.find(item => item.name === name)
        }
        return `{name|${name}}{symbol| }{value|${obj.value || 0}家}{percent|${
          obj.value && ((obj.value / sum) * 100).toFixed(0)
        }%}`
      }
    },
    series: [
      {
        name: '',
        type: 'pie',
        roundCap: true,
        radius: ['40%', '70%'],
        center: ['30%', '50%'],
        startAngle: 180, //起始角度
        data: chartData,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1,
          color: function (params) {
            return color[params.dataIndex]
          }
        },
        labelLine: {
          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
        }
      }
    ]
  }
  return option
}
//柱状图堆叠
let ddsecurity = (
  data = {
    bankingGa38: [1, 2, 3],
    offlineGa38: [1, 2, 3],
    onlineGa38: [1, 2, 3]
  }
) => {
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#51688a'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: ['在行式自助银行', '离行式自助银行', '营业网点']
    },
    series: [
      {
        name: 'GA38-2015',
        type: 'bar',
        color: '#5370c7',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: data.onlineGa38
      },
      {
        name: 'GA38-2021',
        type: 'bar',
        stack: 'total',

        color: '#92cd76',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: data.offlineGa38
      },
      {
        name: '未达标',
        type: 'bar',
        stack: 'total',
        color: '#ee6666',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: data.bankingGa38
      }
    ]
  }
  return option
}

let securityPrecautions = (data = []) => {
  var colors = ['#ee6666', '#5370c7']
  let option = {
    title: {
      text: '',

      left: 'left'
    },
    tooltip: {
      trigger: 'item'
    },

    legend: {
      orient: 'vertical',
      top: 'center',
      left: '58%',
      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: ['30%', '50%'],

        type: 'pie',
        radius: '70%',
        data: data,

        itemStyle: {
          normal: {
            shadowBlur: 1,
            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
          }
        }
      }
    ]
  }
  return option
}

//网点业务总览
// [
//   { value: 666, name: '巡查上报' },
//   { value: 193, name: '自行处置' },
//   { value: 300, name: '微信市民举报' },
//   { value: 200, name: '微治理上报' },
//   { value: 100, name: '视频抓拍' }
// ]
//保安情况
let dotData = (
  title = '',

  data = [],
  num = 0,
  listNames = ['一类库', '二类库', '三类库', '四类库']
) => {
  var colors = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
  let option = {
    xAxis: {
      type: 'category',
      data: listNames
    },

    yAxis: {
      type: 'value'
    },
    series: [
      {
        show: true,
        data: data,
        type: 'bar',

        label: {
          show: true,
          //数值展示的位置
          textStyle: {
            color: 'black',
            fontSize: 12
          },
          position: 'top', // 顶部显示
          formatter: function (params) {
            return (
              data[params.dataIndex] +
              '(' +
              (data[params.dataIndex] ?  (data[params.dataIndex] / num) * 100:0).toFixed(0) +
              '%)'
            )
          }
        },

        barWidth: 40,
        color: '#5370c7',
        backgroundStyle: {
          color: 'rgba(220, 220, 220, 0.8)'
        }
      }
    ]
  }
  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 = '在行式自助银行',
  data = [
    // { value: 666, name: '穿墙式设备' },
    // { value: 193, name: '大堂式设备' }
  ]
) => {
  let option = {
    series: [
      {
        color: ['#5470c6', '#91cc75', '#ee6666', '#73c0de'],
        name: '',
        type: 'pie',
        radius: '50%',
        center: ['50%', '50%'],
        data: data,
        label: {
          normal: {
            formatter: get,
            rich: {
              b: {
                width: 20,
                fontSize: 12
              }
            },
            textStyle: {
              color: '#656565' // 改变标示文字的颜色
            }
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  return option
}
//日常履职完成率
let resumption = (data, type = 0) => {
  var getzszy = [] //数据点名称
  var getzswcl = [] //招生完成率
  var getzswcl2 = [] //招生完成率
  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)
  }
  var num = type == 0 ? '18%' : '25%'
  var numleft = type == 0 ? '35%' : '25%'
  let option = {
    grid: {
      right: num,
      bottom: '3%',
      left: numleft,
      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, ZHSData, aqsecurity, ddsecurity }