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

<template>
	<div style="position: relative;">
		<div
		  :id="id"
		  :style="{
		    width: styleUtil.px2vw(width),
		    height: styleUtil.px2vh(height),
			opacity:data.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
    },
    data: {
      type: Array,
      default: () => []
    },
    xAxisData: {
      type: Array,
      default: () => []
    },
    config: {
      type: Object,
      default: () => {}
    },
    seriesConfig: {
      type: Object,
      default: () => {}
    }
  })

  const { id, setOption } = useEchart()

  let timer = null
  let currentIndex = -1
  let condShow = ref(0)
  let params = null
  var defaultColors = ['#06E2FF', '#02FFB8', '#FF465F', '#FFCA36', '#9A4BFC', '#044EFF']
  const defaultSeriesConfig = (index) => {
    return {
      type: 'line',
      smooth: true,
      symbol: 'none',
      symbolSize: fitChartSize(8),
      itemStyle: {
        color: '#0B2F63',
        borderColor: defaultColors[index],
        borderWidth: fitChartSize(4)
      },
      lineStyle: {
        color: defaultColors[index]
      }
    }
  }
  const defaultConfig = {
    colors: defaultColors,
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'transparent',
      borderWidth: 0,
      formatter: (e) => {
        let valueStr = ''
        e.map((item) => {
          valueStr += `<div>${item.axisValueLabel}：${item.value}</div>`
        })
        let str = `<div style="
                background: #07356B;
                border: 1px solid #0096FF;
                color: #fff;
                font-weight: bold;
                font-size: ${fitChartSize(18)}px;
                border-radius: ${fitChartSize(4)}px;
                padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;">
                ${valueStr}</div>`
        return str
      }
    },
    grid: {
      left: '2%',
      right: '10%',
      bottom: '5%',
      top: '10%',
      containLabel: true
    },
    legend: {
      orient: 'horizontal',
      x: 'center',
      y: 'top',
      icon: 'rect',
      itemWidth: fitChartSize(12),
      itemHeight: fitChartSize(12),
      itemGap: fitChartSize(12),
      textStyle: {
        color: '#ffffff',
        fontSize: fitChartSize(22)
      }
    },
    title: {
      show: false
    },
    xAxis: {
      boundaryGap: false,
      type: 'category',
      data: [],
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(5, 72, 134, 1)'
        }
      },
      axisLabel: {
        fontSize: fitChartSize(18),
        color: 'rgba(255,255,255,0.9)'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        fontSize: fitChartSize(18),
        color: 'rgba(255,255,255,0.9)'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 150, 255,0.4)',
          type: 'dashed'
        }
      }
    },
    series: []
  }
  const init = () => {
    if (params) {
      props.data.map((item, index) => {
        params.series[index].data = item.data
      })
    } else {
      defaultConfig.xAxis.data = props.xAxisData
      props.data.map((item, index) => {
        defaultConfig.series.push({
          ...defaultSeriesConfig(index),
          ...props.seriesConfig,
          name: item.name,
          data: item.data
        })
      })
      params = {
        ...defaultConfig,
        ...props.config
      }
    }
    setOption(params)
  }
  let aIndex = 1
  watch(
    [() => props.data, () => props.xAxisData],
    (val) => {
	  aIndex+=1
	  if(aIndex>=3&&!val[0][0].data.length){
		  condShow.value = 1
	  }
      if (val[0].length > 0 && val[1].length > 0) {
		  condShow.value = 2
        setTimeout(() => {
          init()
        }, 1000)
      }else{
		  // condShow.value = 1
	  }
    },
    { immediate: true }
  )
  // // 切换tooltip
  // const switchTooltip = () => {
  //   // 取消之前高亮的图形
  //   chart.value.dispatchAction({
  //     type: 'downplay',
  //     seriesIndex: 0,
  //     dataIndex: currentIndex
  //   })
  //   currentIndex = (currentIndex + 1) % 8
  //   // 高亮当前图形
  //   chart.value.dispatchAction({
  //     type: 'highlight',
  //     seriesIndex: 0,
  //     dataIndex: currentIndex
  //   })
  //   // 显示tooltip
  //   chart.value.dispatchAction({
  //     type: 'showTip',
  //     seriesIndex: 0,
  //     dataIndex: currentIndex
  //   })
  // }
  // const startTooltipLoop = () => {
  //   timer = setInterval(() => switchTooltip(), 3000)
  // }
  // const closeSwitchTooltip = () => {
  //   clearInterval(timer)
  //   timer = undefined
  // }
</script>
<style lang="scss">
	.nYong-du{
		position:absolute;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		font-size:font-vw(18);
		// color:#999;
		color:#02f9fa;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>