Getting Started with the Vue Circular Gauge Component in Vue 2

25 Apr 20255 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion^® Vue Circular Gauge component.

Prerequisites

System requirements for Syncfusion^® Vue UI components

Dependencies

Below is the list of minimum dependencies required to use the Circular Gauge.

|-- @syncfusion/ej2-vue-circulargauge
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-popups
       |-- @syncfusion/ej2-splitbuttons
       |-- @syncfusion/ej2-vue-base
    |-- @syncfusion/ej2-svg-base
    |-- @syncfusion/ej2-circulargauge

Setting up the Vue 2 project

To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:

npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve

or

yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve

When creating a new project, choose the option Default ([Vue 2] babel, eslint) from the menu.

Once the quickstart project is set up with default settings, proceed to add Syncfusion^® components to the project.

Add Syncfusion^® Vue packages

Syncfusion^® packages are available at npmjs.com. To use Vue components, install the required npm package.

This article uses the Vue Circular gauge component as an example. Install the @syncfusion/ej2-vue-circulargauge package by running the following command:

npm install @syncfusion/ej2-vue-circulargauge --save

or

yarn add @syncfusion/ej2-vue-circulargauge

Adding Syncfusion^® Vue Circular Gauge component

Follow the below steps to add the Vue Circular Gauge component:

1. First, import and register the Circular Gauge component in the script section of the src/App.vue file.

~/src/App.vue

<script>
import { CircularGaugeComponent } from '@syncfusion/ej2-vue-circulargauge';

export default {
  components: {
    'ejs-circulargauge': CircularGaugeComponent
  }
}
</script>

2. In the template section, define the Circular Gauge component.

~/src/App.vue

<template>
    <div id="app">
      <div class='wrapper'>
         <ejs-circulargauge ></ejs-circulargauge>
      </div>
    </div>
</template>

Here is the summarized code for the above steps in the src/App.vue file:

~/src/App.vue

<template>
  <div id="app">
    <div class='wrapper'>
      <ejs-circulargauge></ejs-circulargauge>
    </div>
  </div>
</template>
<script>
import { CircularGaugeComponent } from '@syncfusion/ej2-vue-circulargauge';

export default {
  name: "App",
  components: {
    'ejs-circulargauge': CircularGaugeComponent
  }
}
</script>
<style>
.wrapper {
  max-width: 300px;
  margin: 0 auto;
}
</style>

Run the project

To run the project, use the following command:

npm run serve

or

yarn run serve

Set Pointer Value

You can change the pointer value in the above sample using value property in pointers.

~/src/app.vue

<template>
  <div id="app">
    <div class='wrapper'>
      <ejs-circulargauge>
        <e-axes>
          <e-axis>
            <e-pointers>
              <e-pointer :value='val' />
            </e-pointers>
          </e-axis>
        </e-axes>
      </ejs-circulargauge>
    </div>
  </div>
</template>
<script>
import { CircularGaugeComponent, AxisDirective, AxesDirective, PointerDirective, PointersDirective } 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
  },
  data() {
    return {
      val: 35
    }
  }
}
</script>
<style>
.wrapper {
  max-width: 300px;
  margin: 0 auto;
}
</style>