Setting header of panels in Vue Dashboard Layout component
21 Feb 202524 minutes to read
The Dashboard Layout component is mostly used to represent the data used for monitoring or managing a process. These data or any HTML template can be placed as the content of a panel using the content property. Also, word or phrase that summarize the panel’s content can be added as the header on the top of each panel using the header property of the panel.
The following sample demonstrates how to add content for each panel using the header and content properties of the panels.
<template>
<div class="col-lg-8 control-section">
<ejs-dashboardlayout id="defaultLayout" :cellSpacing="spacing" :columns="7">
<e-panels>
<e-panel id="panel0" :row="0" :col="0" :sizeX="1" :sizeY="1" header="<div>Panel 0</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel1" :row="0" :col="1" :sizeX="3" :sizeY="2" header="<div>Panel 1</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel2" :row="0" :col="4" :sizeX="1" :sizeY="3" header="<div>Panel 2</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel3" :row="1" :col="0" :sizeX="1" :sizeY="1" header="<div>Panel 3</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel4" :row="2" :col="0" :sizeX="2" :sizeY="1" header="<div>Panel 4</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel5" :row="2" :col="2" :sizeX="1" :sizeY="1" header="<div>Panel 5</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel6" :row="2" :col="3" :sizeX="1" :sizeY="1" header="<div>Panel 6</div>"
content='<div class="content">Panel Content<div>'></e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>
</template>
<script setup>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent as EjsDashboardlayout, PanelDirective as EPanel, PanelsDirective as EPanels } from "@syncfusion/ej2-vue-layouts";
const spacing = [10, 10];
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
/* Dashboard Layout component styles */
#defaultLayout .e-panel .e-panel-container .e-panel-header {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
padding: 10px
}
.e-panel-content {
text-align: center;
padding: 20px;
line-height: 20px;
}
#defaultLayout .e-panel {
transition: none !important;
}
</style><template>
<div class="col-lg-8 control-section">
<ejs-dashboardlayout id="defaultLayout" :cellSpacing="spacing" :columns="7">
<e-panels>
<e-panel id="panel0" :row="0" :col="0" :sizeX="1" :sizeY="1" header="<div>Panel 0</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel1" :row="0" :col="1" :sizeX="3" :sizeY="2" header="<div>Panel 1</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel2" :row="0" :col="4" :sizeX="1" :sizeY="3" header="<div>Panel 2</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel3" :row="1" :col="0" :sizeX="1" :sizeY="1" header="<div>Panel 3</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel4" :row="2" :col="0" :sizeX="2" :sizeY="1" header="<div>Panel 4</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel5" :row="2" :col="2" :sizeX="1" :sizeY="1" header="<div>Panel 5</div>"
content='<div class="content">Panel Content<div>'></e-panel>
<e-panel id="panel6" :row="2" :col="3" :sizeX="1" :sizeY="1" header="<div>Panel 6</div>"
content='<div class="content">Panel Content<div>'></e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>
</template>
<script>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from "@syncfusion/ej2-vue-layouts";
export default {
name: "App",
components: {
"ejs-dashboardlayout": DashboardLayoutComponent,
"e-panels": PanelsDirective,
"e-panel": PanelDirective
},
data: function () {
return {
spacing: [10, 10]
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
/* Dashboard Layout component styles */
#defaultLayout .e-panel .e-panel-container .e-panel-header {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
padding: 10px
}
.e-panel-content {
text-align: center;
padding: 20px;
line-height: 20px;
}
#defaultLayout .e-panel {
transition: none !important;
}
</style>Setting Content of panels using v-slot directive
The Dashboard Layout component in Syncfusion’s Vue.js suite facilitates dynamic content insertion into panels through the v-slot directive. This feature allows for the definition of custom content for each panel in a flexible and maintainable manner. By leveraging v-slot, it becomes straightforward to incorporate complex HTML structures, custom components, or dynamic content into each panel of the Dashboard Layout.
In the example below, the v-slot directive is employed with a named slot ‘panel0Content’ to specify the content for ‘panel0’. The content is encapsulated within a <template> tag, which corresponds to the :content attribute of the <e-panel>.
<template>
<div class="col-lg-8 control-section">
<ejs-dashboardlayout id="defaultLayout" :cellSpacing="spacing" :columns="7">
<e-panels>
<e-panel id="panel0" :row="0" :col="0" :sizeX="1" :sizeY="1" header="<div>Panel 0</div>" :content="'panel0Content'">
<template v-slot:panel0Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
<e-panel id="panel1" :row="0" :col="1" :sizeX="3" :sizeY="2" header="<div>Panel 1</div>" :content="'panel1Content'">
<template v-slot:panel1Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
<e-panel id="panel2" :row="0" :col="4" :sizeX="1" :sizeY="3" header="<div>Panel 2</div>" :content="'panel2Content'">
<template v-slot:panel2Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
<e-panel id="panel3" :row="1" :col="0" :sizeX="1" :sizeY="1" header="<div>Panel 3</div>" :content="'panel3Content'">
<template v-slot:panel3Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
<e-panel id="panel4" :row="2" :col="0" :sizeX="2" :sizeY="1" header="<div>Panel 4</div>" :content="'panel4Content'">
<template v-slot:panel4Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
<e-panel id="panel5" :row="2" :col="2" :sizeX="1" :sizeY="1" header="<div>Panel 5</div>" :content="'panel5Content'">
<template v-slot:panel5Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
<e-panel id="panel6" :row="2" :col="3" :sizeX="1" :sizeY="1" header="<div>Panel 6</div>" :content="'panel6Content'">
<template v-slot:panel6Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>
</template>
<script>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from "@syncfusion/ej2-vue-layouts";
export default {
name: "App",
components: {
"ejs-dashboardlayout": DashboardLayoutComponent,
"e-panels": PanelsDirective,
"e-panel": PanelDirective
},
data: function () {
return {
spacing: [10, 10]
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
#defaultLayout .e-panel .e-panel-container .e-panel-header {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
padding: 10px
}
.e-panel-content {
text-align: center;
padding: 20px;
}
#defaultLayout .e-panel {
transition: none !important;
}
</style><template>
<div class="col-lg-8 control-section">
<ejs-dashboardlayout id="defaultLayout" :cellSpacing="spacing" :columns="7">
<e-panels>
<e-panel id="panel0" :row="0" :col="0" :sizeX="1" :sizeY="1" header="<div>Panel 0</div>" :content="'panel0Content'">
<template v-slot:panel0Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
<e-panel id="panel1" :row="0" :col="1" :sizeX="3" :sizeY="2" header="<div>Panel 1</div>" :content="'panel1Content'">
<template v-slot:panel1Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
<e-panel id="panel2" :row="0" :col="4" :sizeX="1" :sizeY="3" header="<div>Panel 2</div>" :content="'panel2Content'">
<template v-slot:panel2Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
<e-panel id="panel3" :row="1" :col="0" :sizeX="1" :sizeY="1" header="<div>Panel 3</div>" :content="'panel3Content'">
<template v-slot:panel3Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
<e-panel id="panel4" :row="2" :col="0" :sizeX="2" :sizeY="1" header="<div>Panel 4</div>" :content="'panel4Content'">
<template v-slot:panel4Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
<e-panel id="panel5" :row="2" :col="2" :sizeX="1" :sizeY="1" header="<div>Panel 5</div>" :content="'panel5Content'">
<template v-slot:panel5Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
<e-panel id="panel6" :row="2" :col="3" :sizeX="1" :sizeY="1" header="<div>Panel 6</div>" :content="'panel6Content'">
<template v-slot:panel6Content>
<div class="content">Panel Content</div>
</template>
</e-panel>
</e-panels>
</ejs-dashboardlayout>
</div>
</template>
<script>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from "@syncfusion/ej2-vue-layouts";
export default {
name: "App",
components: {
"ejs-dashboardlayout": DashboardLayoutComponent,
"e-panels": PanelsDirective,
"e-panel": PanelDirective
},
data: function () {
return {
spacing: [10, 10]
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
#defaultLayout .e-panel .e-panel-container .e-panel-header {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
padding: 10px
}
.e-panel-content {
text-align: center;
padding: 20px;
}
#defaultLayout .e-panel {
transition: none !important;
}
</style>Placing components as content of panels
In a dashboard, components like the chart, grids, maps, gauge, and more etc. can be used to present a complex data. Such components can be placed as the panel content by assigning the corresponding component element as the content of the panel.
To design a Vue Dashboard Layout with UI components, you can check on this video:
The following sample demonstrates how to add EJ2 Chart components as the content for each panel in the Dashboard Layout component.
<template>
<div className="control-section" id="control_dash">
<div className="content-wrapper">
<!-- Dashboard Layout component declaration -->
<ejs-dashboardlayout ref="DashbordInstance" :columns="7" id='edit_dashboard' :allowResizing="false"
:allowDragging="true">
<e-panels>
<e-panel :row="0" :col="0" :sizeX="3" :sizeY="2" header="<div>Product usage ratio</div>"
:content="pie"></e-panel>
<e-panel :row="0" :col="3" :sizeX="3" :sizeY="2" header="<div>Mobile browsers usage</div>"
:content="pie1"></e-panel>
<e-panel :row="1" :col="0" :sizeX="3" :sizeY="2" header="<div>Spline Chart</div>" :content="spline"></e-panel>
</e-panels>
</ejs-dashboardlayout>
<!-- end of Dashboard Layout component -->
</div>
</div>
</template>
<script setup>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent as EjsDashboardlayout, PanelDirective as EPanel, PanelsDirective as EPanels } from "@syncfusion/ej2-vue-layouts";
// Import syncfusion chart component from charts package
import { AccumulationChartComponent, SeriesDirective, SeriesCollectionDirective, PieSeries, AccumulationDataLabel, AccumulationTooltip, ChartComponent, SplineAreaSeries, Legend, DateTime, AccumulationSeriesDirective, AccumulationSeriesCollectionDirective } from "@syncfusion/ej2-vue-charts";
import { createApp } from "vue";
var splineTemplate = createApp().component("contentTemp1", {
components: {
"ejs-chart": ChartComponent,
"e-series-collection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
template: `
<div id="container" style='display:block;height:100%, width:100%;'>
<!-- Chart component declaration -->
<ejs-chart class="chart-content" ref="splineInstance" style='display:block;height:100%, width:100%;':primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :height='height' :width='width' :border='border'>
<e-series-collection>
<e-series :dataSource='seriesData' type='SplineArea' xName='x' yName='y' name='Jan' width=2 opacity=0.5 :fill="fill0"></e-series>
<e-series :dataSource='seriesData1' type='SplineArea' xName='x' yName='y' name='Feb' width=2 opacity=0.5 :fill="fill1"></e-series>
</e-series-collection>
</ejs-chart>
<!-- end of chart component -->
</div>`,
data: function () {
return {
seriesData: [
{ x: new Date(2002, 0, 1), y: 2.2 }, { x: new Date(2003, 0, 1), y: 3.4 },
{ x: new Date(2004, 0, 1), y: 2.8 }, { x: new Date(2005, 0, 1), y: 1.6 },
{ x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 2.5 },
{ x: new Date(2008, 0, 1), y: 2.9 }, { x: new Date(2009, 0, 1), y: 3.8 },
{ x: new Date(2010, 0, 1), y: 1.4 }, { x: new Date(2011, 0, 1), y: 3.1 }
],
seriesData1: [
{ x: new Date(2002, 0, 1), y: 2 }, { x: new Date(2003, 0, 1), y: 1.7 },
{ x: new Date(2004, 0, 1), y: 1.8 }, { x: new Date(2005, 0, 1), y: 2.1 },
{ x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 1.6 },
{ x: new Date(2008, 0, 1), y: 1.5 }, { x: new Date(2009, 0, 1), y: 2.7 },
{ x: new Date(2010, 0, 1), y: 1.5 }, { x: new Date(2011, 0, 1), y: 2.2 }
],
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'DateTime',
labelFormat: 'y',
majorGridLines: { width: 0 },
intervalType: 'Years',
edgeLabelPlacement: 'Shift'
},
//Initializing Primary Y Axis
primaryYAxis: {
labelFormat: '{value}%',
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
},
chartArea: {
border: {
width: 0
}
},
border: {
color: 'transparent'
},
width: "100%",
fill1: 'rgb(0, 189, 174)',
fill0: 'rgb(239, 183, 202)',
height: "99%"
};
},
provide: { 'chart': [SplineAreaSeries, Legend, DateTime] },
mounted() {
this.$refs.splineInstance.ej2Instances.height = "100%";
this.$refs.splineInstance.ej2Instances.width = "100%";
}
});
var pietemplate = createApp().component("contentTemp2", {
components: {
"ejs-accumulationchart": AccumulationChartComponent,
"e-accumulation-series-collection": AccumulationSeriesCollectionDirective,
"e-accumulation-series": AccumulationSeriesDirective
},
template: `
<div id="app" style='display:block;height:100%; width:100%;'>
<ejs-accumulationchart class="chart-content" ref="accumulationInstance" style='display:block;height:100%; width:100%;' :legendSettings="legendSettings" :tooltip="tooltip">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius="40%" :dataLabel="dataLabel"> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>`,
data() {
return {
seriesData: [
{ x: 'TypeScript', y: 13, text: 'TS 13%' },
{ x: 'React', y: 12.5, text: 'Reat 12.5%' },
{ x: 'MVC', y: 12, text: 'MVC 12%' },
{ x: 'Core', y: 12.5, text: 'Core 12.5%' },
{ x: 'Vue', y: 10, text: 'Vue 10%' },
{ x: 'Angular', y: 40, text: 'Angular 40%' }
],
legendSettings: { visible: false },
dataLabel: { visible: true, position: 'Inside', name: 'value' },
tooltip: {
enable: true, header: '<b>${point.x}</b>', format: 'Composition: <b>${point.y}</b>'
},
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel, AccumulationTooltip]
},
mounted() {
this.$refs.accumulationInstance.ej2Instances.height = "100%";
this.$refs.accumulationInstance.ej2Instances.width = "100%";
}
});
var pietemplate1 = createApp().component("contentTemp3", {
components: {
"ejs-accumulationchart": AccumulationChartComponent,
"e-accumulation-series-collection": AccumulationSeriesCollectionDirective,
"e-accumulation-series": AccumulationSeriesDirective
},
template: `
<div id="app1" style='display:block;height:100%; width:100%;'>
<ejs-accumulationchart class="chart-content" ref="accumulationInstance" style='display:block;height:100%; width:100%;' :legendSettings="legendSettings" :tooltip="tooltip">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius="40%" :dataLabel="dataLabel"> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>`,
data() {
return {
seriesData: [
{ 'x': 'Chrome', y: 37, text: '37%' },
{ 'x': 'UC Browser', y: 17, text: '17%' },
{ 'x': 'iPhone', y: 19, text: '19%' },
{ 'x': 'Others', y: 4, text: '4%' },
{ 'x': 'Opera', y: 11, text: '11%' },
{ 'x': 'Android', y: 12, text: '12%' }
],
legendSettings: { visible: false },
dataLabel: { visible: true, position: 'Inside', name: 'value' },
tooltip: {
enable: true, header: '<b>${point.x}</b>', format: 'Composition: <b>${point.y}</b>'
},
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel, AccumulationTooltip]
},
mounted() {
this.$refs.accumulationInstance.ej2Instances.height = "100%";
this.$refs.accumulationInstance.ej2Instances.width = "100%";
}
});
const spline = () => {
return { template: splineTemplate }
};
const pie = () => {
return { template: pietemplate }
};
const pie1 = () => {
return { template: pietemplate1 }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
/* Dashboard Layout component styles */
#dashboard_default .e-panel .e-panel-content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 100px;
}
.chart-content {
height: 100%;
width: 100%;
}
#container {
width: 100%;
height: 100%;
}
#dashboard_default .e-panel {
transition: none !important;
}
</style><template>
<div className="control-section" id="control_dash">
<div className="content-wrapper">
<!-- Dashboard Layout component declaration -->
<ejs-dashboardlayout ref="DashbordInstance" :columns="7" id='edit_dashboard' :allowResizing="false"
:allowDragging="true">
<e-panels>
<e-panel :row="0" :col="0" :sizeX="3" :sizeY="2" header="<div>Product usage ratio</div>"
:content="pie"></e-panel>
<e-panel :row="0" :col="3" :sizeX="3" :sizeY="2" header="<div>Mobile browsers usage</div>"
:content="pie1"></e-panel>
<e-panel :row="1" :col="0" :sizeX="3" :sizeY="2" header="<div>Spline Chart</div>" :content="spline"></e-panel>
</e-panels>
</ejs-dashboardlayout>
<!-- end of Dashboard Layout component -->
</div>
</div>
</template>
<script>
// Import syncfusion Dashboard Layout component from layouts package
import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from "@syncfusion/ej2-vue-layouts";
// Import syncfusion chart component from charts package
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationDataLabel, AccumulationTooltip, ChartComponent, SplineAreaSeries, Legend, DateTime, SeriesDirective, SeriesCollectionDirective } from "@syncfusion/ej2-vue-charts";
import { createApp } from "vue";
var splineTemplate = createApp().component("contentTemp1", {
components: {
"ejs-chart": ChartComponent,
"e-series-collection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
template: `
<div id="container" style='display:block;height:100%, width:100%;'>
<!-- Chart component declaration -->
<ejs-chart class="chart-content" ref="splineInstance" style='display:block;height:100%, width:100%;':primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:chartArea='chartArea' :height='height' :width='width' :border='border'>
<e-series-collection>
<e-series :dataSource='seriesData' type='SplineArea' xName='x' yName='y' name='Jan' width=2 opacity=0.5 :fill="fill0"></e-series>
<e-series :dataSource='seriesData1' type='SplineArea' xName='x' yName='y' name='Feb' width=2 opacity=0.5 :fill="fill1"></e-series>
</e-series-collection>
</ejs-chart>
<!-- end of chart component -->
</div>`,
data: function () {
return {
seriesData: [
{ x: new Date(2002, 0, 1), y: 2.2 }, { x: new Date(2003, 0, 1), y: 3.4 },
{ x: new Date(2004, 0, 1), y: 2.8 }, { x: new Date(2005, 0, 1), y: 1.6 },
{ x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 2.5 },
{ x: new Date(2008, 0, 1), y: 2.9 }, { x: new Date(2009, 0, 1), y: 3.8 },
{ x: new Date(2010, 0, 1), y: 1.4 }, { x: new Date(2011, 0, 1), y: 3.1 }
],
seriesData1: [
{ x: new Date(2002, 0, 1), y: 2 }, { x: new Date(2003, 0, 1), y: 1.7 },
{ x: new Date(2004, 0, 1), y: 1.8 }, { x: new Date(2005, 0, 1), y: 2.1 },
{ x: new Date(2006, 0, 1), y: 2.3 }, { x: new Date(2007, 0, 1), y: 1.6 },
{ x: new Date(2008, 0, 1), y: 1.5 }, { x: new Date(2009, 0, 1), y: 2.7 },
{ x: new Date(2010, 0, 1), y: 1.5 }, { x: new Date(2011, 0, 1), y: 2.2 }
],
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'DateTime',
labelFormat: 'y',
majorGridLines: { width: 0 },
intervalType: 'Years',
edgeLabelPlacement: 'Shift'
},
//Initializing Primary Y Axis
primaryYAxis: {
labelFormat: '{value}%',
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 }
},
chartArea: {
border: {
width: 0
}
},
border: {
color: 'transparent'
},
width: "100%",
fill1: 'rgb(0, 189, 174)',
fill0: 'rgb(239, 183, 202)',
height: "99%"
};
},
provide: {
chart: [SplineAreaSeries, Legend, DateTime]
},
mounted() {
this.$refs.splineInstance.ej2Instances.height = "100%";
this.$refs.splineInstance.ej2Instances.width = "100%";
}
});
var pietemplate = createApp().component("contentTemp2", {
components: {
"ejs-accumulationchart": AccumulationChartComponent,
"e-accumulation-series-collection": AccumulationSeriesCollectionDirective,
"e-accumulation-series": AccumulationSeriesDirective
},
template: `
<div id="app" style='display:block;height:100%; width:100%;'>
<ejs-accumulationchart class="chart-content" ref="accumulationInstance" style='display:block;height:100%; width:100%;' :legendSettings="legendSettings" :tooltip="tooltip">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius="40%" :dataLabel="dataLabel"> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>`,
data() {
return {
seriesData: [
{ x: 'TypeScript', y: 13, text: 'TS 13%' },
{ x: 'React', y: 12.5, text: 'Reat 12.5%' },
{ x: 'MVC', y: 12, text: 'MVC 12%' },
{ x: 'Core', y: 12.5, text: 'Core 12.5%' },
{ x: 'Vue', y: 10, text: 'Vue 10%' },
{ x: 'Angular', y: 40, text: 'Angular 40%' }
],
legendSettings: { visible: false },
dataLabel: { visible: true, position: 'Inside', name: 'value' },
tooltip: {
enable: true, header: '<b>${point.x}</b>', format: 'Composition: <b>${point.y}</b>'
},
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel, AccumulationTooltip]
},
mounted() {
this.$refs.accumulationInstance.ej2Instances.height = "100%";
this.$refs.accumulationInstance.ej2Instances.width = "100%";
}
});
var pietemplate1 = createApp().component("contentTemp3", {
components: {
"ejs-accumulationchart": AccumulationChartComponent,
"e-accumulation-series-collection": AccumulationSeriesCollectionDirective,
"e-accumulation-series": AccumulationSeriesDirective
},
template: `
<div id="app1" style='display:block;height:100%; width:100%;'>
<ejs-accumulationchart class="chart-content" ref="accumulationInstance" style='display:block;height:100%; width:100%;' :legendSettings="legendSettings" :tooltip="tooltip">
<e-accumulation-series-collection>
<e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius="40%" :dataLabel="dataLabel"> </e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
</div>`,
data() {
return {
seriesData: [
{ 'x': 'Chrome', y: 37, text: '37%' },
{ 'x': 'UC Browser', y: 17, text: '17%' },
{ 'x': 'iPhone', y: 19, text: '19%' },
{ 'x': 'Others', y: 4, text: '4%' },
{ 'x': 'Opera', y: 11, text: '11%' },
{ 'x': 'Android', y: 12, text: '12%' }
],
legendSettings: { visible: false },
dataLabel: { visible: true, position: 'Inside', name: 'value' },
tooltip: {
enable: true, header: '<b>${point.x}</b>', format: 'Composition: <b>${point.y}</b>'
},
};
},
provide: {
accumulationchart: [PieSeries, AccumulationDataLabel, AccumulationTooltip]
},
mounted() {
this.$refs.accumulationInstance.ej2Instances.height = "100%";
this.$refs.accumulationInstance.ej2Instances.width = "100%";
}
});
export default {
name: "App",
components: {
"ejs-dashboardlayout": DashboardLayoutComponent,
"e-panels": PanelsDirective,
"e-panel": PanelDirective
},
data: function () {
return {
spline: function () {
return { template: splineTemplate }
},
pie: function () {
return { template: pietemplate }
},
pie1: function () {
return { template: pietemplate1 }
}
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
/* Dashboard Layout component styles */
#dashboard_default .e-panel .e-panel-content {
vertical-align: middle;
font-weight: 600;
font-size: 20px;
text-align: center;
line-height: 100px;
}
.chart-content {
height: 100%;
width: 100%;
}
#container {
width: 100%;
height: 100%;
}
#dashboard_default .e-panel {
transition: none !important;
}
</style>You can refer to our Vue Dashboard Layout feature tour page for its groundbreaking feature representations. You can also explore our Vue Dashboard Layout example to knows how to present and manipulate data.