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

<!-- 购买来源 -->
<template>
  
  <div style="position:relative;">
  	<div
  	  :id="id"
  	  :style="{
  	    width: styleUtil.px2vw(width),
  	    height: styleUtil.px2vh(height),
		opacity:list.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 { fitChartSize } from '@/utils/dataUtil'
  import { useEchart } from '@/hooks/echart'
  import styleUtil from '@/utils/styleUtil'

  const { id, setOption,clearOption,dispose,chartVal} = useEchart()

  let props = defineProps({
    list: {
      type: Array,
      default: () => []
    },
    width: {
      type: Number,
      default: () => 0
    },
    height: {
      type: Number,
      default: () => 0
    }
  })

  let params = ref(null)
	let condShow = ref(0)
	let aIndex = 1
	let newList = ref([])
	let datas = ref([])
  watch(
    () => props.list,
    (val) => {
		aIndex+=1
		if(aIndex>=3&&!val.length){
			  condShow.value = 1
		}
      if (val.length > 0) {
		  console.log(val,'vvvvvvvvvvvvv')
		  newList.value = val.reverse()
		  condShow.value = 2
        setTimeout(() => {
			if(params.value){
				dispose()
			}
			init()
			
        }, 1000)
      }
    },
    {
      immediate: true
    }
  )

  const getSeriesData = () => {
	  
	  
    return props.list.map((item) => {
		item.value?item.value:0;
		return {
		  type: 'bar',
		  name: item.name,
		  clockwise: false,
		  silent: true,
		  roundCap: true,
		  barWidth: '13%',
		  showBackground: true,
		  coordinateSystem: 'polar',
		  data: [item.value]
		}
      
    })
  }
  
  const init = () => {
    if (!params.value) {
      params.value = {
        legend: {
          show: true,
          x: 'center',
          y: '72%',
          itemHeight: fitChartSize(12),
          itemWidth: fitChartSize(12),
          itemGap: fitChartSize(6),
          formatter: function (name) {
			  if(name){
				  let obj = props.list.find((item) => item.name == name)
				  return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
			  }
			// if(obj.value){
				// obj.value?obj.value:0;
				
			// }
		
          },
          textStyle: {
            rich: {
              name: {
                color: '#fff',
                fontSize: fitChartSize(18)
              },
              value: {
                color: '#00D5F6',
                fontWeight: 600,
                fontSize: fitChartSize(18)
              }
            }
          }
        },
        // color: ['#F15A25', '#01FEFE', '#12B5FD'],
        polar: {
          center: ['50%', '40%']
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: getSeriesData()
      }
	  
    } 
	else {
		// dispose()
      params.value.series = getSeriesData()
    }
	
    setOption(params.value)
  }
</script>

<style scoped lang="scss">
	
	.nYong-du{
		position:absolute;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		font-size:fonnt-vw(20);
		// color:#999;
		color:#02f9fa;
		display: flex;
		align-items: center;
		justify-content: center;
	}
  .legend {
    display: flex;
    align-items: center;
    justify-content: center;

    @mixin icon($column) {
      padding: 0 vw(10);
      height: vh(70);
      display: flex;
      flex-direction: $column;
      align-items: center;
      justify-content: center;
    }

    &__wrapper {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: vw(8);
    }
    &-item {
      color: #fff;
    }
    &-item:nth-child(1) {
      @include icon(column);
      background-image: url('@/assets/images/legend-item-1.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(2) {
      @include icon(column);
      background-image: url('@/assets/images/legend-item-1.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(3) {
      @include icon(column);
      background-image: url('@/assets/images/legend-item-1.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(4) {
      @include icon(column-reverse);
      background-image: url('@/assets/images/legend-item-2.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(5) {
      @include icon(column-reverse);
      background-image: url('@/assets/images/legend-item-2.png');
      background-size: 100% 100%;
    }
    &-item:nth-child(6) {
      @include icon(column-reverse);
      background-image: url('@/assets/images/legend-item-2.png');
      background-size: 100% 100%;
    }
    &-item-label {
      font-weight: 400;
      font-size: vw(18);
      line-height: vh(14);
    }
    &-item-value {
      font-weight: bold;
      font-size: vw(22);
      line-height: vh(18);
    }
  }
</style>