fengjie-datascreen/src/components/PieRow/index.vue

<template>
	<div style="position:relative;">
		<div
		  :id="id"
		  :style="{
		    width: styleUtil.px2vw(width),
		    height: styleUtil.px2vh(height),
			opacity:dataList.length?1:0,
		  }"
		/>
		<div v-if="condShow==0" class="nYong-du">加载中...</div>
		<div v-if="condShow==1" class="nYong-du">暂无数据</div>
	</div>

</template>

<script setup>
  import styleUtil from '@/utils/styleUtil'
  import { fitChartSize } from '@/utils/dataUtil'
  import { useEchart } from '@/hooks/echart'

  const props = defineProps({
    width: {
      type: Number,
      default: () => 0
    },
    height: {
      type: Number,
      default: () => 0
    },
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dataList: {
      type: Array,
      default: () => []
    },
    label: {
      type: String,
      default: () => ''
    },
    total: {
      type: Number,
      default: () => 0
    }
  })

  const { id,chart, setOption,chartVal,dispose ,clearOption} = useEchart()
	let condShow = ref(0)
	let aIndex = 1
	var colorList = []
	// ['#2380fb', '#d9011b','#feae00']
  watch(
    () => props.dataList,
    (newVal) => {
		
		aIndex+=1
		if(aIndex>=3&&!newVal.length){
			condShow.value = 1
			
		}
      if (newVal.length > 0) {
		    colorList = []
			nextTick(() => {
				clearOption();
				init()
			})
      }else{
		
	  }
    },
    { immediate: true }
  )
  
  const init = ()=>{
    if(condShow.value===2){
      return;
    }
	clearOption()
	colorList = [];
    condShow.value = 2
	const validDataList = props.dataList.filter(item => {
	    return item && item.name && (item.value || item.value === 0);
	});
	  props.dataList.forEach((item,index)=>{

		  if(item.name=='负面'){
			  colorList.push('#d9011b')
		  }
		  else if(item.name=='正面'){
			colorList.push('#50F0A6')
		  }
		  else if(item.name=='中性'){
			colorList.push('#2380fb')
		  }
		  else{
			   colorList = ['#3BA272', '#73C0DE','#EE6666','#FAC858','#91CC75','#5470C6','#d9011b','#feae00','#50F0A6']
		  }
	  })

	  var defaultCofig = {
	    color: colorList,
	    legend: {
	      orient: 'vertical',
	      x: '64%',
	      y: 'center',
	      itemWidth: fitChartSize(12),
	      itemHeight: fitChartSize(12),
	      itemGap: fitChartSize(10),
	      textStyle: {
	        color: '#ffffff',
	        fontSize: fitChartSize(14)
	      },
		  formatter: (name) => {
		   // let percent = props.dataList.find((item) => item.name == name).value
		     const item = validDataList.find((item) => item.name === name);
		     
		     const percent = item ? item.value : 0;
		     
		     const displayName = name || '';
		     return `${displayName}\u3000${percent}%`;
		 
		  },
	    },
	    series: [
	      {
	        type: 'pie',
	        center: ['30%', '50%'],
	        radius: ['40%', '55%'],
	        itemStyle: {
	          borderWidth: fitChartSize(4),
	          borderColor: '#093672'
	        },
	        label: {
	          show: true,
	          position: 'center',
	          fontWeight: 'bold',
	          formatter: () => {
	            return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
	          },
	          rich: {
	            value: {
	              color: '#fff',
	              fontSize: fitChartSize(24),
	              fontWeight: 'bold',
	              padding: [0, 0, 5, 0]
	            },
	            name: {
	              color: '#fff',
	              fontSize: fitChartSize(12)
	            }
	          }
	        },
	        labelLine: {
	          show: false
	        },
	        data: validDataList
	      }
	    ]
	  }
	  // defaultCofig.series[0].data = props.dataList
	 //  defaultCofig.legend.formatter = (name) => {
	 //    let percent = props.dataList.find((item) => item.name == name).value
		// if(name){
		// 	return name + '\u3000' + `${percent}%`
		// }else{
		// 	return name + '\u3000' + `${0}%`
		// }
	 //  }
	  // defaultCofig.series[0].label.formatter = () => {
	  //   return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
	  // }
	  setOption({},true)
	const changeChart =  setOption({
	    ...defaultCofig,
	    ...props.config
	  })
	  
	changeChart.off('legendselectchanged');
    changeChart.on('legendselectchanged', function (e) {
      console.log(e,'e')
      var echartsArr = [];
      for (let key in e.selected) {
        if (e.selected[key]) {
          echartsArr.push(key)
        }
      }
      var echartsNum = 0;
      props.dataList.forEach(item => {
        if(echartsArr.includes(item.name)){
          echartsNum += parseFloat(item.value)
        }
      })
	
      defaultCofig.series[0].label.formatter = `{value|${parseInt(echartsNum/100*props.total)}}` + '\n' + `{name|${props.label}}`;
      setOption({
        ...defaultCofig,
        ...props.config
      })
    });
  }
</script>

<style scoped lang="scss">

	.nYong-du{
		position:absolute;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		font-size:vw(18);
		// color:#999;
		color:#02f9fa;
		display: flex;
		align-items: center;
		justify-content: center;

	}
</style>