99 lines
		
	
	
		
			2.4 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			99 lines
		
	
	
		
			2.4 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
export default {
 | 
						|
  legend: {
 | 
						|
    right: 20,
 | 
						|
    top: 'middle',
 | 
						|
    orient: 'vertical',
 | 
						|
    textStyle: {color: "#fff", fontSize: 14}
 | 
						|
  },
 | 
						|
  grid: {
 | 
						|
    top: '0%',
 | 
						|
    left: '0%',
 | 
						|
    right: '0px',
 | 
						|
    bottom: '0%'
 | 
						|
  },
 | 
						|
  xAxis: {show: false},
 | 
						|
  yAxis: {show: false},
 | 
						|
  tooltip: {
 | 
						|
  },
 | 
						|
  series: {
 | 
						|
    type: "pie",
 | 
						|
    minShowLabelAngle: 10,
 | 
						|
    radius: [50, 71],
 | 
						|
    itemStyle: {
 | 
						|
      borderColor: "#8d1419",
 | 
						|
      borderWidth: 2
 | 
						|
    },
 | 
						|
    label: {
 | 
						|
      show: false
 | 
						|
    },
 | 
						|
    labelLine: {}
 | 
						|
  },
 | 
						|
  render: (h, params) => {
 | 
						|
    const formatNum = num => {
 | 
						|
      if (num >= 10000000) {
 | 
						|
        return num / 10000000 + "千万"
 | 
						|
      }
 | 
						|
 | 
						|
      if (num >= 10000) {
 | 
						|
        return num / 10000 + "万"
 | 
						|
      }
 | 
						|
 | 
						|
      return parseFloat(num.toFixed(2))
 | 
						|
    }
 | 
						|
 | 
						|
    let total = params.data.reduce((t, e) => {
 | 
						|
      return t + Number(Object.values(e)?.[1] || 0)
 | 
						|
    }, 0)
 | 
						|
    return h(
 | 
						|
        "div",
 | 
						|
        {
 | 
						|
          style: {
 | 
						|
            height: "162px",
 | 
						|
            width: "162px",
 | 
						|
            color: "#8BCCFF",
 | 
						|
            left: "50%",
 | 
						|
            top: "50%",
 | 
						|
            zIndex: '-1',
 | 
						|
            display: "flex",
 | 
						|
            alignItems: "center",
 | 
						|
            justifyContent: "center",
 | 
						|
            flexDirection: "column",
 | 
						|
            position: "absolute",
 | 
						|
            transform: "translate(-50%,-50%)",
 | 
						|
            backgroundPosition: "center"
 | 
						|
          }
 | 
						|
        },
 | 
						|
        [
 | 
						|
          h(
 | 
						|
            'span',
 | 
						|
            {
 | 
						|
              style: {
 | 
						|
                'font-size': '32px',
 | 
						|
                'font-weight': 'bold',
 | 
						|
                'margin-bottom': '3px',
 | 
						|
                'color': '#CEE1FF',
 | 
						|
                'line-height': '28px',
 | 
						|
                'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.1)',
 | 
						|
                'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
 | 
						|
                '-webkit-background-clip': 'text',
 | 
						|
                '-webkit-text-fill-color': 'transparent'
 | 
						|
              }
 | 
						|
            },
 | 
						|
            formatNum(total)
 | 
						|
          ),
 | 
						|
          h('span', {
 | 
						|
            style: {
 | 
						|
              'font-size': '16px',
 | 
						|
              'color': '#CEE1FF',
 | 
						|
              'line-height': '16px',
 | 
						|
              'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.5)',
 | 
						|
              'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
 | 
						|
              '-webkit-background-clip': 'text',
 | 
						|
              '-webkit-text-fill-color': 'transparent'
 | 
						|
            }
 | 
						|
          }, "总量")
 | 
						|
        ]
 | 
						|
    )
 | 
						|
  }
 | 
						|
}
 |