Animation in Vue Linear Gauge component

11 Jun 202411 minutes to read

All of the elements in the Linear 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 Linear 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, ticks, labels, and ranges will all be animated at the same time.
  2. If available, pointers will be animated in the same way as pointer animation.
  3. If available, annotations will be animated.

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

<template>
    <div id="app">
        <div class='wrapper'>
             <ejs-lineargauge animationDuration='3000'  style='display:block' align='center' id='defaultContainer' :orientation='orientation'>
                <e-annotations>
                    <e-annotation :axisIndex='axisIndex' :axisValue='axisValue' :x='positionX' zIndex='1' :y='positionY' :zIndex='zIndex' :content="content">
                    </e-annotation>
                </e-annotations>
                <e-axes>
                    <e-axis :majorTicks='majorTicks' :minorTicks='minorTicks' :labelStyle='labelStyle' >
                        <e-pointers>
                            <e-pointer :value='value' :height='height' :placement='placement' :width='width' :offset='offset' :markerType='markerType' ></e-pointer>
                        </e-pointers>
                        <e-ranges>
                        <e-range start=0 end="50" startWidth="10" endWidth="10" color="#F45656" offset="35"></e-range>
                        </e-ranges>
                    </e-axis>
                </e-axes>
             </ejs-lineargauge>
        </div>
    </div>
</template>

<script setup>
import { provide } from "vue";

import { LinearGaugeComponent as EjsLineargauge, Annotations, AxisDirective as EAxis, AxesDirective as EAxes, AnnotationDirective as EAnnotation, AnnotationsDirective as EAnnotations,
    PointerDirective as EPointer, PointersDirective as EPointers, RangeDirective as ERange, RangesDirective as ERanges } from '@syncfusion/ej2-vue-lineargauge';

const content = '<div id="pointer" style="width: 70px;margin-left:-25%;margin-top: 42%;font-size: 16px;">10 MPH</div>';
const orientation = "Horizontal";
const value = 10;
const height = 15;
const width = 15;
const offset = -40;
const markerType = 'Triangle';
const placement = 'Near';
const majorTicks = { 
    interval: 10,
    height: 20,
    color: '#9E9E9E'
};
const minorTicks = {
    interval: 2,
    height: 10,
    color: '#9E9E9E'
};
const labelStyle = {
    offset: 48,
    font: {
        fontFamily: 'inherit'
    }
};
const axisIndex = 0;
const axisValue = 10;
const positionX = 10;
const positionY = -70;
const zIndex = '1';

provide('lineargauge', [Annotations])

</script>
<style>
.wrapper {
    max-width: 400px;
    margin: 0 auto;
}
</style>
<template>
    <div id="app">
        <div class='wrapper'>
             <ejs-lineargauge animationDuration='3000'  style='display:block' align='center' id='defaultContainer' :orientation='orientation'>
                <e-annotations>
                    <e-annotation :axisIndex='axisIndex' :axisValue='axisValue' :x='positionX' zIndex='1' :y='positionY' :zIndex='zIndex' :content="content">
                    </e-annotation>
                </e-annotations>
                <e-axes>
                    <e-axis :majorTicks='majorTicks' :minorTicks='minorTicks' :labelStyle='labelStyle' >
                        <e-pointers>
                            <e-pointer :value='value' :height='height' :placement='placement' :width='width' :offset='offset' :markerType='markerType' ></e-pointer>
                        </e-pointers>
                        <e-ranges>
                        <e-range start=0 end="50" startWidth="10" endWidth="10" color="#F45656" offset="35"></e-range>
                        </e-ranges>
                    </e-axis>
                </e-axes>
             </ejs-lineargauge>
        </div>
    </div>
</template>

<script>

import { LinearGaugeComponent, Annotations, AxesDirective, AxisDirective, AnnotationDirective, AnnotationsDirective,
    PointersDirective, PointerDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-vue-lineargauge';

export default {
name: "App",
components: {
"ejs-lineargauge":LinearGaugeComponent,
"e-annotations":AnnotationsDirective,
"e-annotation":AnnotationDirective,
"e-axes":AxesDirective,
"e-axis":AxisDirective,
"e-pointers":PointersDirective,
"e-pointer":PointerDirective,
"e-ranges":RangesDirective,
"e-range":RangeDirective
},
    data() {
        return {
          content:'<div id="pointer" style="width: 70px;margin-left:-25%;margin-top: 42%;font-size: 16px;">10 MPH</div>',
        orientation:"Horizontal",
        value:10,
        height:15,
        width:15,
        offset:-40,
        markerType:'Triangle',
        placement:'Near',
        majorTicks: { 
            interval: 10,
            height:20,
            color:'#9E9E9E'
        },
        minorTicks:{
            interval: 2,
            height:10,
            color:'#9E9E9E'
        },
        labelStyle:{
            offset: 48,
            font: {
                fontFamily: 'inherit'
            }
        },
        axisIndex: 0,
        axisValue: 10,
        positionX: 10,
        positionY: -70,
        zIndex:'1'
        }
    },
     provide: {
        lineargauge: [Annotations]
    },
}
</script>
<style>
.wrapper {
    max-width: 400px;
    margin: 0 auto;
}
</style>

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