Animation in Vue Circular Gauge component

11 Jun 202415 minutes to read

All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the animationDuration property. The animation for the Circular Gauge is enabled when the animationDuration property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the animationDuration property is set to 0, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order.

  1. The axis line will be animated in the rendering direction (clockwise or anticlockwise).
  2. Each tick line and label will then be animated.
  3. If available, ranges will be animated.
  4. If available, pointers will be animated in the same way as pointer animation.
  5. If available, annotations will be animated.

The animation of the Circular Gauge is demonstrated in the following example.

<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-circulargauge :animationDuration=2000 :background='background' style='display:block' align='center'
                id='gauge'>
                <e-axes>
                    <e-axis :radius='gaugeRadius' :annotations='annotations' :startAngle='startAngle'
                        :endAngle='endAngle' :majorTicks='majorTicks' :lineStyle='lineStyle' :minorTicks='minorTicks'
                        :labelStyle='labelStyle'>
                        <e-pointers>
                            <e-pointer :value='value' :radius='pointerRadius' :color='color'
                                :pointerWidth='pointerWidth' :cap='cap' :needleTail='needleTail'></e-pointer>
                        </e-pointers>
                        <e-ranges>
                            <e-range start="0" end="30" color="#E63B86" startWidth="22" endWidth="22" radius="60%"
                                :linearGradient="linearGradient"></e-range>
                            <e-range start="30" end="60" color="#E0E0E0" startWidth="22" endWidth="22"
                                radius="60%"></e-range>
                        </e-ranges>
                    </e-axis>
                </e-axes>
            </ejs-circulargauge>
        </div>
    </div>
</template>

<script setup>
import { provide } from "vue";
import { CircularGaugeComponent as EjsCirculargauge, AxesDirective as EAxes, AxisDirective as EAxis, PointersDirective as EPointers, PointerDirective as EPointer, RangeDirective as ERange, RangesDirective as ERanges, Annotations, Gradient } from '@syncfusion/ej2-vue-circulargauge';

const annotations = [{
    angle: 165,
    radius: '35%',
    content: '<div style="font-size:18px;margin-left: -20px;margin-top: -12px; color:#9DD55A">60</div>',
    zIndex: '1'
}];
const linearGradient = {
    startValue: '0%',
    endValue: '100%',
    colorStop: [
        { color: '#9e40dc', offset: '0%', opacity: 1 },
        { color: '#d93c95', offset: '70%', opacity: 1 },
    ],
};
const gaugeRadius = '80%';
const startAngle = 230;
const endAngle = 130;
const background = 'transparent';
const majorTicks = {
    offset: 5
};
const lineStyle = { width: 8, color: '#E0E0E0' };
const minorTicks = {
    offset: 5
};
const labelStyle = {
    font: {
        fontFamily: 'inherit'
    },
    offset: -1
};
const value = 60;
const pointerRadius = '60%';
const pointerWidth = 7;
const color = '#c06c84';
const cap = {
    radius: 8,
    color: '#c06c84',
    border: { width: 0 }
};
const needleTail = {
    length: '0%',
}

provide('circulargauge', [Annotations, Gradient]);

</script>
<style>
.wrapper {
    max-width: 400px;
    margin: 0 auto;
}
</style>
<template>
    <div id="app">
        <div class='wrapper'>
            <ejs-circulargauge :animationDuration=2000 :background='background' style='display:block' align='center'
                id='gauge'>
                <e-axes>
                    <e-axis :radius='gaugeRadius' :annotations='annotations' :startAngle='startAngle'
                        :endAngle='endAngle' :majorTicks='majorTicks' :lineStyle='lineStyle' :minorTicks='minorTicks'
                        :labelStyle='labelStyle'>
                        <e-pointers>
                            <e-pointer :value='value' :radius='pointerRadius' :color='color'
                                :pointerWidth='pointerWidth' :cap='cap' :needleTail='needleTail'></e-pointer>
                        </e-pointers>
                        <e-ranges>
                            <e-range start="0" end="30" color="#E63B86" startWidth="22" endWidth="22" radius="60%"
                                :linearGradient="linearGradient"></e-range>
                            <e-range start="30" end="60" color="#E0E0E0" startWidth="22" endWidth="22"
                                radius="60%"></e-range>
                        </e-ranges>
                    </e-axis>
                </e-axes>
            </ejs-circulargauge>
        </div>
    </div>
</template>

<script>

import { CircularGaugeComponent, AxesDirective, AxisDirective, PointerDirective, PointersDirective, RangesDirective, RangeDirective, Annotations, Gradient } from '@syncfusion/ej2-vue-circulargauge';

export default {
    name: "App",
    components: {
        "ejs-circulargauge": CircularGaugeComponent,
        "e-axes": AxesDirective,
        "e-axis": AxisDirective,
        "e-pointers": PointersDirective,
        "e-pointer": PointerDirective,
        "e-ranges": RangesDirective,
        "e-range": RangeDirective
    },
    data() {
        return {
            annotations: [{
                angle: 165,
                radius: '35%',
                content: '<div style="font-size:18px;margin-left: -20px;margin-top: -12px; color:#9DD55A">60</div>',
                zIndex: '1'
            }],
            linearGradient: {
                startValue: '0%',
                endValue: '100%',
                colorStop: [
                    { color: '#9e40dc', offset: '0%', opacity: 1 },
                    { color: '#d93c95', offset: '70%', opacity: 1 },
                ],
            },
            gaugeRadius: '80%',
            startAngle: 230,
            endAngle: 130,
            background: 'transparent',
            majorTicks: {
                offset: 5
            },
            lineStyle: { width: 8, color: '#E0E0E0' },
            minorTicks: {
                offset: 5
            },
            labelStyle: {
                font: {
                    fontFamily: 'inherit'
                },
                offset: -1
            },
            value: 60,
            pointerRadius: '60%',
            pointerWidth: 7,
            color: '#c06c84',
            cap: {
                radius: 8,
                color: '#c06c84',
                border: { width: 0 }
            },
            needleTail: {
                length: '0%',
            }
        }
    },
    provide: {
        circulargauge: [Annotations, Gradient]
    },
}
</script>
<style>
.wrapper {
    max-width: 400px;
    margin: 0 auto;
}
</style>

Only the pointer of the Circular Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this link to enable only pointer animation.