vue3+ts+echarts的问题？

Question

<template>
  <div>
    <div style="height: calc(100vh - 190px);width:100%" ref="chartsMonitorRef"></div>
  </div>
</template>

<script lang='ts' setup>
import {ref,reactive,onMounted,onActivated,nextTick,toRefs,watch,watchEffect} from 'vue'
import * as echarts from 'echarts';
import {getLocalTime} from '/@/utils/publicMethod'

const chartsMonitorRef = ref();
interface Props {
    CpuChartData: {timestamp: number;value:number}[]
}

let props = defineProps<Props>()
const {CpuChartData} = toRefs(props)

watch(
  () => props.CpuChartData,
  (newProps) => {
    initChartsMonitor()
  }
)
const state = reactive({
    myCharts: [] as EmptyArrayType,
});
onMounted(() => {
  initChartsMonitor()
  initEchartsResize();
})
onActivated(() => {
    initEchartsResizeFun();
});
const initEchartsResizeFun = () => {
    nextTick(() => {
        for (let i = 0; i < state.myCharts.length; i++) {
            state.myCharts[i].resize();
        }
    });
};
const initEchartsResize = () => {
    window.addEventListener('resize', initEchartsResizeFun);
};

const initChartsMonitor = () => {
  let myChart = echarts.getInstanceByDom(chartsMonitorRef.value);
  if(myChart==null){
    myChart = echarts.init(chartsMonitorRef.value);
  }
  myChart.showLoading({
    text: '加载中',
    color: '#c23531',
    textColor: '#000',
    maskColor: 'rgba(255, 255, 255, 0.8)',
    zlevel: 0,
  });
  const data = (() => {
    let res: string[] = [];
    CpuChartData.value.forEach((item) => {
      res.push(String(item.value.toFixed(1)))
    })
    return res;
  })();
  const categories = (function () {
    let res: string[] = [];
    CpuChartData.value.forEach((item) => {
      res.push(getLocalTime(item.timestamp))
    })
    return res;
  })();
  const option = {
    legend: {},
    grid: {
            top: 30,
            right: 30,
            bottom: 80,
            left: '5%',
        },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#283b56'
        }
      },
      formatter: function (params: any) {
        var relVal = 'CPU'
        for (var i = 0, l = params.length; i < l; i++) {
          relVal += '<br/>' + params[i].marker +params[i].name+ ': ' + params[i].value + '%'
        }
        return relVal
      }
    },
    dataZoom:[{
      show: true,
      start: 0,
      end: 100,
      maxSpan: 100,
    }],
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: categories.map(function (str) {
        return str.replace(' ', '\n')
      }),
      splitLine: {
        show: true
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true
      },
      axisLabel: {
        formatter: function(_value: any) {
          return _value.toFixed(1) + '%'
        }
      }
    },
    series: [
      {
        type: 'line',
        data: data,
        lineStyle: {
          width: 1,
          color: '#f28e2b'
        },
        itemStyle: {
          color: '#f28e2b',
          borderColor: '#f28e2b'
        },
        showSymbol: false,
        areaStyle: {
          opacity: .8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#f28e2b'
            }
          ])
        },
      }
    ]
  };
    myChart.setOption(option);
  myChart.hideLoading()
    state.myCharts.push(myChart);
};
</script>
<style scoped>
</style>

这是我写的echarts组件

在父组件里面去调用这个组件，并传值
在父组件里面使用wtach监听日周月的变化，然后从新进行CpuChartData值的获取

现在是想在每次发起请求获取值的时候，echarts有一个加载loading的动画
可不可以提供一个思路或者方法，请指教一下

Answer 1

换一个思路, 不给echarts添加loading, 而是给他的外层元素添加loading,正好用的还是elementUI组件库, 它提供了一个属性https://element.eleme.cn/2.3/...
加载echarts前显示loading, 而后myChart.setOption(option);之后再不显示

<template>
  <div v-loading="loading">
    <div style="height: calc(100vh - 190px);width:100%" ref="chartsMonitorRef"></div>
  </div>
</template>

<script lang='ts' setup>
import {ref,reactive,onMounted,onActivated,nextTick,toRefs,watch,watchEffect} from 'vue'
import * as echarts from 'echarts';
import {getLocalTime} from '/@/utils/publicMethod'

let loading = false;

const chartsMonitorRef = ref();
interface Props {
    CpuChartData: {timestamp: number;value:number}[]
}

let props = defineProps<Props>()
const {CpuChartData} = toRefs(props)

watch(
  () => props.CpuChartData,
  (newProps) => {
    initChartsMonitor()
  }
)
const state = reactive({
    myCharts: [] as EmptyArrayType,
});
onMounted(() => {
  initChartsMonitor()
  initEchartsResize();
})
onActivated(() => {
    initEchartsResizeFun();
});
const initEchartsResizeFun = () => {
    nextTick(() => {
        for (let i = 0; i < state.myCharts.length; i++) {
            state.myCharts[i].resize();
        }
    });
};
const initEchartsResize = () => {
    window.addEventListener('resize', initEchartsResizeFun);
};

const initChartsMonitor = () => {
  let myChart = echarts.getInstanceByDom(chartsMonitorRef.value);
  if(myChart==null){
    myChart = echarts.init(chartsMonitorRef.value);
  }

    loading  = true

  const data = (() => {
    let res: string[] = [];
    CpuChartData.value.forEach((item) => {
      res.push(String(item.value.toFixed(1)))
    })
    return res;
  })();
  const categories = (function () {
    let res: string[] = [];
    CpuChartData.value.forEach((item) => {
      res.push(getLocalTime(item.timestamp))
    })
    return res;
  })();
  const option = {
    legend: {},
    grid: {
            top: 30,
            right: 30,
            bottom: 80,
            left: '5%',
        },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#283b56'
        }
      },
      formatter: function (params: any) {
        var relVal = 'CPU'
        for (var i = 0, l = params.length; i < l; i++) {
          relVal += '<br/>' + params[i].marker +params[i].name+ ': ' + params[i].value + '%'
        }
        return relVal
      }
    },
    dataZoom:[{
      show: true,
      start: 0,
      end: 100,
      maxSpan: 100,
    }],
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: categories.map(function (str) {
        return str.replace(' ', '\n')
      }),
      splitLine: {
        show: true
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true
      },
      axisLabel: {
        formatter: function(_value: any) {
          return _value.toFixed(1) + '%'
        }
      }
    },
    series: [
      {
        type: 'line',
        data: data,
        lineStyle: {
          width: 1,
          color: '#f28e2b'
        },
        itemStyle: {
          color: '#f28e2b',
          borderColor: '#f28e2b'
        },
        showSymbol: false,
        areaStyle: {
          opacity: .8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#f28e2b'
            }
          ])
        },
      }
    ]
  };
    myChart.setOption(option);
  myChart.hideLoading()
    state.myCharts.push(myChart);
loading = false
};
</script>
<style scoped>
</style>