Getting Started with the Vue Linear Gauge Component in Vue 2
25 Apr 202520 minutes to read
This article provides a step-by-step guide for setting up a Vue 2 project usingVue-CLI and integrating the Syncfusion® Vue Linear Gauge component
Prerequisites
System requirements for Syncfusion® Vue UI components
Dependencies
The list of dependencies required to use the Linear Gauge component in your application is given below:
|--@syncfusion/ej2-vue-lineargauge|--@syncfusion/ej2-base|--@syncfusion/ej2-vue-base|--@syncfusion/ej2-svg-base|--@syncfusion/ej2-lineargaugeSetting up the Vue 2 project
To generate a Vue 2 project using Vue-CLI, use thevue create command. Follow these steps to install Vue CLI and create a new project:
npm install -g @vue/clivue create quickstartcd quickstartnpm run serveor
yarn global add @vue/clivue create quickstartcd quickstartyarn run serveWhen creating a new project, choose the optionDefault ([Vue 2] babel, eslint) from the menu.
Once thequickstart project is set up with default settings, proceed to add Syncfusion® components to the project.
Add Syncfusion® Vue packages
Syncfusion® packages are available atnpmjs.com. To use Vue components, install the required npm package.
This article uses theVue Linear Gauge component as an example. Install the@syncfusion/ej2-vue-lineargauge package by running the following command:
npm install @syncfusion/ej2-vue-lineargauge --saveor
yarn add @syncfusion/ej2-vue-lineargaugeAdding Syncfusion® Vue Linear Gauge component
Follow the below steps to add the Vue Linear Gauge component:
1. First, import and register the Linear Gauge component in thescript section of thesrc/App.vue file.
<scriptsetup>import{LinearGaugeComponentasEjsLineargauge}from'@syncfusion/ej2-vue-lineargauge';</script><script>import{LinearGaugeComponent}from'@syncfusion/ej2-vue-lineargauge';exportdefault{name:"App",components:{"ejs-lineargauge":LineargaugeComponent},}</script>2. In thetemplate section, define the Linear Gauge component.
<template><divid="app"><ejs-lineargauge></ejs-lineargauge></div></template>Here is the summarized code for the above steps in thesrc/App.vue file:
<template><div><divclass="content-wrapper"><divalign='center'><ejs-lineargauge></ejs-lineargauge></div></div></div></template><scriptsetup>import{LinearGaugeComponentasEjsLineargauge}from'@syncfusion/ej2-vue-lineargauge';</script><style>#content-wrapper{padding:0px!important;}</style><template><div><divclass="content-wrapper"><divalign='center'><ejs-lineargauge></ejs-lineargauge></div></div></div></template><script>import{LinearGaugeComponent}from'@syncfusion/ej2-vue-lineargauge';exportdefault{name:"App",components:{'ejs-lineargauge':LinearGaugeComponent}}</script><style>#content-wrapper{padding:0px!important;}</style>Run the project
To run the project, use the following command:
npm run serveor
yarn run serveModule Injection
LinearGauge component is segregated into the individual feature-wise modules. In order to use a particular feature, inject its feature module using theprovide: {}. Please find the feature module name and description as follows.
- Annotation - Inject this module to use the annotation features.
- GaugeTooltip - Inject this module to use the tooltip features.
Now import the above mentioned modules from linear gauge package and inject it into the LinearGauge component usingprovide: {} .
import{LinearGaugeComponent,Annotations,GaugeTooltip}from"@syncfusion/ej2-vue-lineargauge";provide:{lineargauge:[Annotations,GaugeTooltip]},Adding the Linear Gauge Title
The title can be added to the Linear Gauge component using thetitle property in the Linear Gauge.
<template><div><divclass="content-wrapper"><ejs-lineargaugestyle='display:block':title='title'></ejs-lineargauge></div></div></template><scriptsetup>import{LinearGaugeComponentasEjsLineargauge}from"@syncfusion/ej2-vue-lineargauge";consttitle='linear gauge';</script><style>#content-wrapper{padding:0px!important;}</style><template><div><divclass="content-wrapper"><ejs-lineargaugestyle='display:block':title='title'></ejs-lineargauge></div></div></template><script>import{LinearGaugeComponent}from"@syncfusion/ej2-vue-lineargauge";exportdefault{name:"App",components:{'ejs-lineargauge':LinearGaugeComponent},data:function(){return{title:'linear gauge',}}};</script><style>#content-wrapper{padding:0px!important;}</style>Axis Range
The range of the axis can be set using theminimum andmaximum properties in the Linear Gauge.
<template><div><divclass="content-wrapper"><ejs-lineargauge><e-axes><e-axisminimum=0maximum=200></e-axis></e-axes></ejs-lineargauge></div></div></template><scriptsetup>import{LinearGaugeComponentasEjsLineargauge,AxesDirectiveasEAxes,AxisDirectiveasEAxis}from"@syncfusion/ej2-vue-lineargauge";</script><style>#content-wrapper{padding:0px!important;}</style><template><div><divclass="content-wrapper"><ejs-lineargauge><e-axes><e-axisminimum=0maximum=200></e-axis></e-axes></ejs-lineargauge></div></div></template><script>import{LinearGaugeComponent,AxesDirective,AxisDirective}from"@syncfusion/ej2-vue-lineargauge";exportdefault{name:"App",components:{'ejs-lineargauge':LinearGaugeComponent,'e-axes':AxesDirective,'e-axis':AxisDirective}};</script><style>#content-wrapper{padding:0px!important;}</style>Customizing the axis labels
To denote the axis labels with temperature units, add the °C as suffix to each label. This can be achieved by setting the{value}°C to theformat property in thelabelStyle object of the axis. Here,{value} acts as a placeholder for each axis label.
To change the pointer value from the default value of the gauge, set thevalue property inpointers object of the axis.
<template><div><divclass="content-wrapper"><divalign='center'><ejs-lineargauge><e-axes><e-axisminimum=0maximum=200:ranges='ranges'><e-pointers><e-pointervalue=140></e-pointer></e-pointers></e-axis></e-axes></ejs-lineargauge></div></div></div></template><scriptsetup>import{LinearGaugeComponentasEjsLineargauge,AxesDirectiveasEAxes,AxisDirectiveasEAxis,PointerDirectiveasEPointer,PointersDirectiveasEPointers}from"@syncfusion/ej2-vue-lineargauge";constranges=[{start:0,end:80,startWidth:15,endWidth:15},{start:80,end:120,startWidth:15,endWidth:15},{start:120,end:140,startWidth:15,endWidth:15},{start:140,end:200,startWidth:15,endWidth:15}];</script><style>#content-wrapper{padding:0px!important;}</style><template><div><divclass="content-wrapper"><divalign='center'><ejs-lineargauge><e-axes><e-axisminimum=0maximum=200:ranges='ranges'><e-pointers><e-pointervalue=140></e-pointer></e-pointers></e-axis></e-axes></ejs-lineargauge></div></div></div></template><script>import{LinearGaugeComponent,AxesDirective,AxisDirective,PointerDirective,PointersDirective}from"@syncfusion/ej2-vue-lineargauge";exportdefault{name:"App",components:{"ejs-lineargauge":LinearGaugeComponent,"e-axes":AxesDirective,"e-axis":AxisDirective,"e-pointers":PointersDirective,"e-pointer":PointerDirective},data:function(){return{labelStyle:{format:'{value}°C'},ranges:[{start:0,end:80,startWidth:15,endWidth:15},{start:80,end:120,startWidth:15,endWidth:15},{start:120,end:140,startWidth:15,endWidth:15},{start:140,end:200,startWidth:15,endWidth:15}]}}};</script><style>#content-wrapper{padding:0px!important;}</style>Set Pointer Value
The pointer value is changed in the below sample using thevalue property inpointers object of the axis.
<template><div><divclass="content-wrapper"><divalign='center'><ejs-lineargauge><e-axes><e-axisminimum=0maximum=200><e-pointers><e-pointervalue=40color='green'></e-pointer></e-pointers></e-axis></e-axes></ejs-lineargauge></div></div></div></template><scriptsetup>import{LinearGaugeComponentasEjsLineargauge,AxesDirectiveasEAxes,AxisDirectiveasEAxis,PointerDirectiveasEPointer,PointersDirectiveasEPointers}from"@syncfusion/ej2-vue-lineargauge";</script><style>#content-wrapper{padding:0px!important;}</style><template><div><divclass="content-wrapper"><divalign='center'><ejs-lineargauge><e-axes><e-axisminimum=0maximum=200><e-pointers><e-pointervalue=40color='green'></e-pointer></e-pointers></e-axis></e-axes></ejs-lineargauge></div></div></div></template><script>import{LinearGaugeComponent,AxesDirective,AxisDirective,PointerDirective,PointersDirective}from"@syncfusion/ej2-vue-lineargauge";exportdefault{name:"App",components:{"ejs-lineargauge":LinearGaugeComponent,"e-axes":AxesDirective,"e-axis":AxisDirective,"e-pointers":PointersDirective,"e-pointer":PointerDirective},};</script><style>#content-wrapper{padding:0px!important;}</style>[8]ページ先頭