How to hanlde async data?

[BenJackGill]

I do not know how to handle async data with vue eCharts.

I have looked through the examples and I still can't figure it out.

Can anyone take a look at this SFC and tell me how to update the data value?

Currently the gaugeData array loads with a value of 0 and stays that way even though props.totalScore gets updated with a new value.

<template>
    <vue-echarts
        class="echart-container"
        autoresize
        :option="gaugeOption"
    />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

const props = defineProps({
  totalScore: {
    type: Number,
    required: true,
  },
  reportDate: {
    type: String,
    required: true,
  },
});

const gaugeData = [
  {
    value: props.totalScore,
  },
];

const gaugeOption = ref({
  series: [
    {
      emphasis: {
        disabled: true,
      },
      data: gaugeData,
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: 3,
      radius: '95%',
      center: ['50%', '95%'],
      pointer: {
        icon: 'circle',
        length: '12%',
        width: 50,
        offsetCenter: [0, '-90%'],
        itemStyle: {
          color: '#FFFFFF',
          borderColor: scoreHexColor,
          borderWidth: 5,
          shadowColor: 'rgba(10, 31, 68, 0.5)',
          shadowBlur: 2,
          shadowOffsetY: 0.1,
        },
      },
      axisLine: {
        show: true,
        roundCap: true,
        lineStyle: {
          width: 10,
          color: [
            [0.48, '#ee6352'],
            [0.52],
            [0.66, '#ff8b3b'],
            [0.7],
            [0.83, '#fac05e'],
            [0.87],
            [1, '#59cd90'],
          ],
        },
      },
      axisTick: {
        length: 2,
        lineStyle: {
          color: '#8a94a6',
          width: 2,
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      title: {
        show: false,
      },
      detail: {
        rich: {
          header: {
            fontSize: 36,
            fontWeight: 700,
            fontFamily: 'Open Sans',
            color: '#0a1f44',
          },
          subHeader: {
            fontSize: 16,
            fontWeight: 400,
            fontFamily: 'Open Sans',
            color: '#8a94a6',
          },
        },
        formatter: (value: number) => {
          return `{header|${value}}\n{subHeader|${props.reportDate}}`;
        },
        offsetCenter: [0, '-20%'],
        valueAnimation: true,
      },
    },
  ],
});
</script>

<style lang="scss" scoped>
.echart-container {
  height: 300px;
  max-width: 300px;
  margin-top: -135px;
}
</style>

EDIT UPDATE:

I can now get the chart to load correctly using another ref and a watch of the props.

But when the props change it draws a new number ON TOP of the old one. But I need it to replace the old number.

See here how it looks on page load (this is correct):

And see here how it looks when I try to change the gaugeDataRef value (this is wrong, the value is drawn on top of the old one):

Here is the updated code:

import { computed, ref, watch } from 'vue';

const props = defineProps({
  totalScore: {
    type: Number,
    required: true,
  },
  reportDate: {
    type: String,
    required: true,
  },
});

const gaugeDataRef = ref<number[]>([]);

watch(props, () => {
  gaugeDataRef.value.slice(0, 1);
  gaugeDataRef.value.push(props.totalScore);
});

const gaugeOption = ref({
  series: [
    {
      emphasis: {
        disabled: true,
      },
      data: gaugeDataRef.value,
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: 3,
      radius: '95%',
      center: ['50%', '95%'],
      pointer: {
        icon: 'circle',
        length: '12%',
        width: 50,
        offsetCenter: [0, '-90%'],
        itemStyle: {
          color: '#FFFFFF',
          borderColor: scoreHexColor,
          borderWidth: 5,
          shadowColor: 'rgba(10, 31, 68, 0.5)',
          shadowBlur: 2,
          shadowOffsetY: 0.1,
        },
      },
      axisLine: {
        show: true,
        roundCap: true,
        lineStyle: {
          width: 10,
          color: [
            [0.48, '#ee6352'],
            [0.52],
            [0.66, '#ff8b3b'],
            [0.7],
            [0.83, '#fac05e'],
            [0.87],
            [1, '#59cd90'],
          ],
        },
      },
      axisTick: {
        length: 2,
        lineStyle: {
          color: '#8a94a6',
          width: 2,
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      title: {
        show: false,
      },
      detail: {
        rich: {
          header: {
            fontSize: 36,
            fontWeight: 700,
            fontFamily: 'Open Sans',
            color: '#0a1f44',
          },
          subHeader: {
            fontSize: 16,
            fontWeight: 400,
            fontFamily: 'Open Sans',
            color: '#8a94a6',
          },
        },
        formatter: (value: number) => {
          return `{header|${value}}\n{subHeader|${props.reportDate}}`;
        },
        offsetCenter: [0, '-20%'],
        valueAnimation: true,
      },
    },
  ],
});