How to hanlde async data with vue-echarts? - vue.js

Question

I am using vue-echarts along with Apache eCharts.
But I do not know how to load async data values.
I have looked through the examples in the docs 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 inside the gaugeOption ref?
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,
},
},
],
});

Answer 1

Figured it out.
I needed to add a watch on the props that first clears the array and then adds the new value back into the array.
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,
},
},
],
});
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,
},
},
],
});