Setting header of panels in Vue Dashboard Layout component
18 Nov 201824 minutes to read
The Dashboard Layout component is commonly used to present monitoring or management data. HTML templates and other content can be placed inside a panel using the content property. A concise label or phrase summarizing the panel’s content can be added at the top of each panel using the header property of the panel.
The following sample demonstrates how to provide header and content for each 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='<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/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.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/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.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/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.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/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.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
Dashboard panels can host other UI components such as charts, grids, maps, and gauges by assigning the corresponding component element to the panel’s content of the panel.
To see a demonstration of composing a Dashboard Layout with UI components, view this video:
The following sample shows adding EJ2 Chart components as panel content.
<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/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.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/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material3.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>Refer to the Vue Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore the Vue Dashboard Layout example to knows how to present and manipulate data.