mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
feat(charts): add the charts demos
This commit is contained in:
Alexander Zhukov
parent
cf9ccf1850
commit
dd7acac528
25 changed files with 925 additions and 228 deletions
|
|
@ -2,7 +2,76 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-chartjs-bar-horizontal',
|
||||
template: ``,
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<canvas baseChart
|
||||
[datasets]="chartData"
|
||||
[labels]="chartLabels"
|
||||
[options]="chartOptions"
|
||||
[legend]="chartLegend"
|
||||
[chartType]="chartType"></canvas>
|
||||
`,
|
||||
})
|
||||
export class ChartjsBarHorizontalComponent {
|
||||
chartData = [
|
||||
{
|
||||
label: 'Dataset 1',
|
||||
backgroundColor: 'red',
|
||||
borderColor: 'red',
|
||||
borderWidth: 1,
|
||||
data: [
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Dataset 2',
|
||||
backgroundColor: 'blue',
|
||||
borderColor: 'blue',
|
||||
data: [
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
],
|
||||
},
|
||||
];
|
||||
chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
chartOptions = {
|
||||
// Elements options apply to all of the options unless overridden in a dataset
|
||||
// In this case, we are setting the border of each horizontal bar to be 2px wide
|
||||
elements: {
|
||||
rectangle: {
|
||||
borderWidth: 2,
|
||||
},
|
||||
},
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: 'right',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Horizontal Bar Chart',
|
||||
},
|
||||
};
|
||||
chartLegend: boolean = true;
|
||||
chartType: string = 'horizontalBar';
|
||||
|
||||
private randomScalingFactor() {
|
||||
return Math.round(Math.random() * 100);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-chart-js-bar',
|
||||
selector: 'ngx-chartjs-bar',
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
|
|
@ -11,16 +11,15 @@ import { Component } from '@angular/core';
|
|||
],
|
||||
template: `
|
||||
<canvas baseChart
|
||||
[datasets]="barChartData"
|
||||
[labels]="barChartLabels"
|
||||
[options]="barChartOptions"
|
||||
[legend]="barChartLegend"
|
||||
[chartType]="barChartType"></canvas>
|
||||
[datasets]="chartData"
|
||||
[labels]="chartLabels"
|
||||
[options]="chartOptions"
|
||||
[legend]="chartLegend"
|
||||
[chartType]="chartType"></canvas>
|
||||
`,
|
||||
})
|
||||
export class ChartjsBarComponent {
|
||||
|
||||
barChartOptions: any = {
|
||||
chartOptions: any = {
|
||||
scaleShowVerticalLines: false,
|
||||
responsive: true,
|
||||
legend: {
|
||||
|
|
@ -29,36 +28,35 @@ export class ChartjsBarComponent {
|
|||
},
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(148,159,177,1)',
|
||||
xAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(148,159,177,1)',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: 'white',
|
||||
},
|
||||
},
|
||||
ticks: {
|
||||
fontColor: 'white',
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(148,159,177,1)',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: 'white',
|
||||
},
|
||||
},
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(148,159,177,1)',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: 'white',
|
||||
},
|
||||
}],
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||
|
||||
barChartType: string = 'bar';
|
||||
|
||||
barChartLegend: boolean = true;
|
||||
|
||||
barChartData: any[] = [
|
||||
chartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
|
||||
chartType: string = 'bar';
|
||||
chartLegend: boolean = true;
|
||||
chartData: any[] = [
|
||||
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
|
||||
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
|
||||
];
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-chart-js-line',
|
||||
selector: 'ngx-chartjs-line',
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
|
|
@ -11,44 +11,46 @@ import { Component } from '@angular/core';
|
|||
],
|
||||
template: `
|
||||
<canvas baseChart
|
||||
[datasets]="lineChartData"
|
||||
[labels]="lineChartLabels"
|
||||
[options]="lineChartOptions"
|
||||
[legend]="lineChartLegend"
|
||||
[chartType]="lineChartType"></canvas>
|
||||
[datasets]="chartData"
|
||||
[labels]="chartLabels"
|
||||
[options]="chartOptions"
|
||||
[legend]="chartLegend"
|
||||
[chartType]="chatyType"></canvas>
|
||||
`,
|
||||
})
|
||||
export class ChartjsLineComponent {
|
||||
|
||||
lineChartData: any[] = [
|
||||
chartData: any[] = [
|
||||
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
|
||||
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
|
||||
{ data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C' },
|
||||
];
|
||||
|
||||
lineChartLabels: any[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
|
||||
lineChartOptions: any = {
|
||||
chartLabels: any[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
chartOptions: any = {
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(148,159,177,1)',
|
||||
xAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(148,159,177,1)',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: 'white',
|
||||
},
|
||||
},
|
||||
ticks: {
|
||||
fontColor: 'white',
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(148,159,177,1)',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: 'white',
|
||||
},
|
||||
},
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(148,159,177,1)',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: 'white',
|
||||
},
|
||||
}],
|
||||
],
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
|
|
@ -56,9 +58,6 @@ export class ChartjsLineComponent {
|
|||
},
|
||||
},
|
||||
};
|
||||
|
||||
lineChartLegend: boolean = true;
|
||||
|
||||
lineChartType: string = 'line';
|
||||
|
||||
chartLegend: boolean = true;
|
||||
chatyType: string = 'line';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,130 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-chartjs-multiple-xaxis',
|
||||
template: ``,
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<canvas baseChart
|
||||
[datasets]="chartData"
|
||||
[labels]="chartLabels"
|
||||
[options]="chartOptions"
|
||||
[legend]="chartLegend"
|
||||
[chartType]="chartType"></canvas>
|
||||
`,
|
||||
})
|
||||
export class ChartjsMultipleXaxisComponent {
|
||||
chartType: string = 'line';
|
||||
chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
chartOptions: {
|
||||
responsive: true;
|
||||
legend: {
|
||||
position: 'bottom';
|
||||
};
|
||||
hover: {
|
||||
mode: 'index';
|
||||
};
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
display: true;
|
||||
scaleLabel: {
|
||||
display: true;
|
||||
labelString: 'Month';
|
||||
};
|
||||
}
|
||||
];
|
||||
yAxes: [
|
||||
{
|
||||
display: true;
|
||||
scaleLabel: {
|
||||
display: true;
|
||||
labelString: 'Value';
|
||||
};
|
||||
}
|
||||
];
|
||||
};
|
||||
title: {
|
||||
display: true;
|
||||
text: 'Chart.js Line Chart - Different point sizes';
|
||||
};
|
||||
};
|
||||
chartLegend: boolean = true;
|
||||
chartData: any[] = [
|
||||
{
|
||||
label: 'dataset - big points',
|
||||
data: [
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
],
|
||||
backgroundColor: 'red',
|
||||
borderColor: 'red',
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
pointRadius: 15,
|
||||
pointHoverRadius: 10,
|
||||
},
|
||||
{
|
||||
label: 'dataset - individual point sizes',
|
||||
data: [
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
],
|
||||
backgroundColor: 'blue',
|
||||
borderColor: 'blue',
|
||||
fill: false,
|
||||
borderDash: [5, 5],
|
||||
pointRadius: [2, 4, 6, 18, 0, 12, 20],
|
||||
},
|
||||
{
|
||||
label: 'dataset - large pointHoverRadius',
|
||||
data: [
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
],
|
||||
backgroundColor: 'green',
|
||||
borderColor: 'green',
|
||||
fill: false,
|
||||
pointHoverRadius: 30,
|
||||
},
|
||||
{
|
||||
label: 'dataset - large pointHitRadius',
|
||||
data: [
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
this.randomScalingFactor(),
|
||||
],
|
||||
backgroundColor: 'yellow',
|
||||
borderColor: 'yellow',
|
||||
fill: false,
|
||||
pointHitRadius: 20,
|
||||
},
|
||||
];
|
||||
|
||||
private randomScalingFactor() {
|
||||
return Math.round(Math.random() * 100);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-chart-js-pie',
|
||||
selector: 'ngx-chartjs-pie',
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
|
|
@ -10,39 +10,42 @@ import { Component } from '@angular/core';
|
|||
`,
|
||||
],
|
||||
template: `
|
||||
<canvas baseChart
|
||||
[data]="pieChartData"
|
||||
[labels]="pieChartLabels"
|
||||
[options]="pieChartOptions"
|
||||
[chartType]="pieChartType"></canvas>
|
||||
<canvas baseChart width="400" height="400"
|
||||
[data]="chartData"
|
||||
[labels]="chartLabels"
|
||||
[options]="chartOptions"
|
||||
[chartType]="chartType"></canvas>
|
||||
`,
|
||||
})
|
||||
export class ChartjsPieComponent {
|
||||
|
||||
pieChartType: string = 'pie';
|
||||
pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||
pieChartData: number[] = [300, 500, 100];
|
||||
pieChartOptions: any = {
|
||||
chartType: string = 'pie';
|
||||
chartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
|
||||
chartData: number[] = [300, 500, 100];
|
||||
chartOptions: any = {
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(148,159,177,1)',
|
||||
xAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(148,159,177,1)',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: 'white',
|
||||
},
|
||||
},
|
||||
ticks: {
|
||||
fontColor: 'white',
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(148,159,177,1)',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: 'white',
|
||||
},
|
||||
},
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
display: true,
|
||||
color: 'rgba(148,159,177,1)',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: 'white',
|
||||
},
|
||||
}],
|
||||
],
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
|
|
@ -50,5 +53,4 @@ export class ChartjsPieComponent {
|
|||
},
|
||||
},
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
|||
26
src/app/pages/charts/chartjs/chartjs-radar.component.ts
Normal file
26
src/app/pages/charts/chartjs/chartjs-radar.component.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-chartjs-radar',
|
||||
styles: [
|
||||
`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`,
|
||||
],
|
||||
template: `
|
||||
<canvas baseChart
|
||||
[datasets]="chartData"
|
||||
[labels]="chartLabels"
|
||||
[chartType]="chartType"></canvas>
|
||||
`,
|
||||
})
|
||||
export class ChartjsRadarComponent {
|
||||
chartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
|
||||
chartData: any = [
|
||||
{ data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A' },
|
||||
{ data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B' },
|
||||
];
|
||||
chartType: string = 'radar';
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<nga-card size="large">
|
||||
<nga-card-header>Pie</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-chart-js-pie></ngx-chart-js-pie>
|
||||
<ngx-chartjs-pie></ngx-chartjs-pie>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<nga-card size="large">
|
||||
<nga-card-header>Bar</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-chart-js-bar></ngx-chart-js-bar>
|
||||
<ngx-chartjs-bar></ngx-chartjs-bar>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<nga-card size="large">
|
||||
<nga-card-header>Line</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-chart-js-line></ngx-chart-js-line>
|
||||
<ngx-chartjs-line></ngx-chartjs-line>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
<nga-card size="large">
|
||||
<nga-card-header>Multiple x-axis</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-chartjs-multiple-xaxis></ngx-chartjs-multiple-xaxis>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
|
|
@ -34,6 +35,15 @@
|
|||
<nga-card size="large">
|
||||
<nga-card-header>Bar Horizontal</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-chartjs-bar-horizontal></ngx-chartjs-bar-horizontal>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Radar</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-chartjs-radar></ngx-chartjs-radar>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,4 @@ import { Component } from '@angular/core';
|
|||
selector: 'ngx-chartjs',
|
||||
templateUrl: './chartjs.component.html',
|
||||
})
|
||||
|
||||
export class ChartjsComponent {
|
||||
}
|
||||
export class ChartjsComponent {}
|
||||
|
|
|
|||
|
|
@ -10,12 +10,13 @@ import { ChartjsLineComponent } from './chartjs/chartjs-line.component';
|
|||
import { ChartjsPieComponent } from './chartjs/chartjs-pie.component';
|
||||
import { ChartjsMultipleXaxisComponent } from './chartjs/chartjs-multiple-xaxis.component';
|
||||
import { ChartjsBarHorizontalComponent } from './chartjs/chartjs-bar-horizontal.component';
|
||||
import { ChartjsRadarComponent } from './chartjs/chartjs-radar.component';
|
||||
import { D3BarComponent } from './d3/d3-bar.component';
|
||||
import { D3LineComponent } from './d3/d3-line.component';
|
||||
import { D3PieComponent } from './d3/d3-pie.component';
|
||||
import { D3PlotComponent } from './d3/d3-plot.component';
|
||||
import { D3AreaStackComponent } from './d3/d3-area-stack.component';
|
||||
import { D3PolarComponent } from './d3/d3-polar.component';
|
||||
import { D3AdvancedPieComponent } from './d3/d3-advanced-pie.component';
|
||||
import { EchartsLineComponent } from './echarts/echarts-line.component';
|
||||
import { EchartsPieComponent } from './echarts/echarts-pie.component';
|
||||
import { EchartsBarComponent } from './echarts/echarts-bar.component';
|
||||
|
|
@ -30,12 +31,13 @@ const components = [
|
|||
ChartjsPieComponent,
|
||||
ChartjsMultipleXaxisComponent,
|
||||
ChartjsBarHorizontalComponent,
|
||||
ChartjsRadarComponent,
|
||||
D3BarComponent,
|
||||
D3LineComponent,
|
||||
D3PieComponent,
|
||||
D3PlotComponent,
|
||||
D3AreaStackComponent,
|
||||
D3PolarComponent,
|
||||
D3AdvancedPieComponent,
|
||||
EchartsLineComponent,
|
||||
EchartsPieComponent,
|
||||
EchartsBarComponent,
|
||||
|
|
@ -46,16 +48,7 @@ const components = [
|
|||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
SharedModule,
|
||||
ChartsRoutingModule,
|
||||
AngularEchartsModule,
|
||||
NgxChartsModule,
|
||||
Ng2Charts,
|
||||
],
|
||||
declarations: [
|
||||
...routedComponents,
|
||||
...components,
|
||||
],
|
||||
imports: [SharedModule, ChartsRoutingModule, AngularEchartsModule, NgxChartsModule, Ng2Charts],
|
||||
declarations: [...routedComponents, ...components],
|
||||
})
|
||||
export class ChartsModule { }
|
||||
export class ChartsModule {}
|
||||
|
|
|
|||
32
src/app/pages/charts/d3/d3-advanced-pie.component.ts
Normal file
32
src/app/pages/charts/d3/d3-advanced-pie.component.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-d3-advanced-pie',
|
||||
template: `
|
||||
<ngx-charts-advanced-pie-chart
|
||||
[view]="view"
|
||||
[scheme]="colorScheme"
|
||||
[results]="single">
|
||||
</ngx-charts-advanced-pie-chart>
|
||||
`,
|
||||
})
|
||||
export class D3AdvancedPieComponent {
|
||||
single = [
|
||||
{
|
||||
name: 'Germany',
|
||||
value: 8940000,
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
value: 5000000,
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
value: 7200000,
|
||||
},
|
||||
];
|
||||
view: any[] = [700, 400];
|
||||
colorScheme = {
|
||||
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
};
|
||||
}
|
||||
|
|
@ -2,7 +2,76 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-d3-area-stack',
|
||||
template: ``,
|
||||
template: `
|
||||
<ngx-charts-area-chart
|
||||
[view]="view"
|
||||
[scheme]="colorScheme"
|
||||
[results]="multi"
|
||||
[xAxis]="showXAxis"
|
||||
[yAxis]="showYAxis"
|
||||
[legend]="showLegend"
|
||||
[showXAxisLabel]="showXAxisLabel"
|
||||
[showYAxisLabel]="showYAxisLabel"
|
||||
[xAxisLabel]="xAxisLabel"
|
||||
[yAxisLabel]="yAxisLabel"
|
||||
[autoScale]="autoScale">
|
||||
</ngx-charts-area-chart>
|
||||
`,
|
||||
})
|
||||
export class D3AreaStackComponent {
|
||||
multi = [
|
||||
{
|
||||
name: 'Germany',
|
||||
series: [
|
||||
{
|
||||
name: '2010',
|
||||
value: 7300000,
|
||||
},
|
||||
{
|
||||
name: '2011',
|
||||
value: 8940000,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
name: 'USA',
|
||||
series: [
|
||||
{
|
||||
name: '2010',
|
||||
value: 7870000,
|
||||
},
|
||||
{
|
||||
name: '2011',
|
||||
value: 8270000,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
name: 'France',
|
||||
series: [
|
||||
{
|
||||
name: '2010',
|
||||
value: 5000002,
|
||||
},
|
||||
{
|
||||
name: '2011',
|
||||
value: 5800000,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
view: any[] = [700, 400];
|
||||
showLegend = true;
|
||||
colorScheme = {
|
||||
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
};
|
||||
autoScale = true;
|
||||
showXAxis = true;
|
||||
showYAxis = true;
|
||||
showXAxisLabel = true;
|
||||
showYAxisLabel = true;
|
||||
xAxisLabel = 'Country';
|
||||
yAxisLabel = 'Population';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,38 +18,30 @@ import { Component } from '@angular/core';
|
|||
`,
|
||||
})
|
||||
export class D3BarComponent {
|
||||
|
||||
single = [{
|
||||
name: 'Germany',
|
||||
value: 8940000,
|
||||
}, {
|
||||
name: 'USA',
|
||||
value: 5000000,
|
||||
}, {
|
||||
name: 'France',
|
||||
value: 7200000,
|
||||
}];
|
||||
|
||||
single = [
|
||||
{
|
||||
name: 'Germany',
|
||||
value: 8940000,
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
value: 5000000,
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
value: 7200000,
|
||||
},
|
||||
];
|
||||
view: any[] = [700, 400];
|
||||
|
||||
showLegend = true;
|
||||
|
||||
colorScheme = {
|
||||
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
};
|
||||
|
||||
showXAxis = true;
|
||||
|
||||
showYAxis = true;
|
||||
|
||||
showLabels = true;
|
||||
|
||||
showXAxisLabel = true;
|
||||
|
||||
xAxisLabel = 'Country';
|
||||
|
||||
showYAxisLabel = true;
|
||||
|
||||
yAxisLabel = 'Population';
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,56 +18,57 @@ import { Component } from '@angular/core';
|
|||
`,
|
||||
})
|
||||
export class D3LineComponent {
|
||||
|
||||
multi = [{
|
||||
name: 'Germany',
|
||||
series: [{
|
||||
name: '2010',
|
||||
value: 7300000,
|
||||
}, {
|
||||
name: '2011',
|
||||
value: 8940000,
|
||||
}],
|
||||
}, {
|
||||
name: 'USA',
|
||||
series: [{
|
||||
name: '2010',
|
||||
value: 7870000,
|
||||
}, {
|
||||
name: '2011',
|
||||
value: 8270000,
|
||||
}],
|
||||
}, {
|
||||
name: 'France',
|
||||
series: [{
|
||||
name: '2010',
|
||||
value: 5000002,
|
||||
}, {
|
||||
name: '2011',
|
||||
value: 5800000,
|
||||
}],
|
||||
}];
|
||||
|
||||
multi = [
|
||||
{
|
||||
name: 'Germany',
|
||||
series: [
|
||||
{
|
||||
name: '2010',
|
||||
value: 7300000,
|
||||
},
|
||||
{
|
||||
name: '2011',
|
||||
value: 8940000,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
series: [
|
||||
{
|
||||
name: '2010',
|
||||
value: 7870000,
|
||||
},
|
||||
{
|
||||
name: '2011',
|
||||
value: 8270000,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
series: [
|
||||
{
|
||||
name: '2010',
|
||||
value: 5000002,
|
||||
},
|
||||
{
|
||||
name: '2011',
|
||||
value: 5800000,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
view: any[] = [700, 400];
|
||||
|
||||
showLegend = true;
|
||||
|
||||
colorScheme = {
|
||||
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
};
|
||||
|
||||
showXAxis = true;
|
||||
|
||||
showYAxis = true;
|
||||
|
||||
showLabels = true;
|
||||
|
||||
showXAxisLabel = true;
|
||||
|
||||
xAxisLabel = 'Country';
|
||||
|
||||
showYAxisLabel = true;
|
||||
|
||||
yAxisLabel = 'Population';
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,44 +3,40 @@ import { Component } from '@angular/core';
|
|||
@Component({
|
||||
selector: 'ngx-d3-pie',
|
||||
template: `
|
||||
<ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="single" [legend]="showLegend"
|
||||
[labels]="showLabels">
|
||||
<ngx-charts-pie-chart
|
||||
[view]="view"
|
||||
[scheme]="colorScheme"
|
||||
[results]="single"
|
||||
[legend]="showLegend"
|
||||
[labels]="showLabels">
|
||||
</ngx-charts-pie-chart>
|
||||
`,
|
||||
})
|
||||
export class D3PieComponent {
|
||||
|
||||
single = [{
|
||||
name: 'Germany',
|
||||
value: 8940000,
|
||||
}, {
|
||||
name: 'USA',
|
||||
value: 5000000,
|
||||
}, {
|
||||
name: 'France',
|
||||
value: 7200000,
|
||||
}];
|
||||
|
||||
single = [
|
||||
{
|
||||
name: 'Germany',
|
||||
value: 8940000,
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
value: 5000000,
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
value: 7200000,
|
||||
},
|
||||
];
|
||||
view: any[] = [700, 400];
|
||||
|
||||
showLegend = true;
|
||||
|
||||
colorScheme = {
|
||||
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
};
|
||||
|
||||
showXAxis = true;
|
||||
|
||||
showYAxis = true;
|
||||
|
||||
showLabels = true;
|
||||
|
||||
showXAxisLabel = true;
|
||||
|
||||
xAxisLabel = 'Country';
|
||||
|
||||
showYAxisLabel = true;
|
||||
|
||||
yAxisLabel = 'Population';
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-d3-plot',
|
||||
template: ``,
|
||||
})
|
||||
export class D3PlotComponent {
|
||||
}
|
||||
|
|
@ -2,7 +2,86 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-d3-polar',
|
||||
template: ``,
|
||||
template: `
|
||||
<ngx-charts-polar-chart
|
||||
[view]="view"
|
||||
[scheme]="colorScheme"
|
||||
[results]="multi"
|
||||
[xAxis]="showXAxis"
|
||||
[yAxis]="showYAxis"
|
||||
[legend]="showLegend"
|
||||
[showXAxisLabel]="showXAxisLabel"
|
||||
[showYAxisLabel]="showYAxisLabel"
|
||||
[xAxisLabel]="xAxisLabel"
|
||||
[yAxisLabel]="yAxisLabel"
|
||||
[autoScale]="autoScale">
|
||||
</ngx-charts-polar-chart>
|
||||
`,
|
||||
})
|
||||
export class D3PolarComponent {
|
||||
multi = [
|
||||
{
|
||||
name: 'Germany',
|
||||
series: [
|
||||
{
|
||||
name: '1990',
|
||||
value: 31476,
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 36953,
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 40632,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'USA',
|
||||
series: [
|
||||
{
|
||||
name: '1990',
|
||||
value: 37060,
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 45986,
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 49737,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'France',
|
||||
series: [
|
||||
{
|
||||
name: '1990',
|
||||
value: 29476,
|
||||
},
|
||||
{
|
||||
name: '2000',
|
||||
value: 34774,
|
||||
},
|
||||
{
|
||||
name: '2010',
|
||||
value: 36240,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
view: any[] = [700, 400];
|
||||
showLegend = true;
|
||||
colorScheme = {
|
||||
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
};
|
||||
autoScale = true;
|
||||
showXAxis = true;
|
||||
showYAxis = true;
|
||||
showXAxisLabel = true;
|
||||
showYAxisLabel = true;
|
||||
xAxisLabel = 'Country';
|
||||
yAxisLabel = 'Population';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,20 +25,26 @@
|
|||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Equatin Plots</nga-card-header>
|
||||
<nga-card-body></nga-card-body>
|
||||
<nga-card-header>Advanced Pie</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-d3-advanced-pie></ngx-d3-advanced-pie>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Area Chart</nga-card-header>
|
||||
<nga-card-body></nga-card-body>
|
||||
<nga-card-body>
|
||||
<ngx-d3-area-stack></ngx-d3-area-stack>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Polar Chart</nga-card-header>
|
||||
<nga-card-body></nga-card-body>
|
||||
<nga-card-body>
|
||||
<ngx-d3-polar></ngx-d3-polar>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,5 +4,4 @@ import { Component } from '@angular/core';
|
|||
selector: 'ngx-d3',
|
||||
templateUrl: './d3.component.html',
|
||||
})
|
||||
export class D3Component {
|
||||
}
|
||||
export class D3Component {}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,92 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-echarts-area-stack',
|
||||
template: ``,
|
||||
template: `
|
||||
<div echarts [options]="options" class="echart"></div>
|
||||
`,
|
||||
})
|
||||
export class EchartsAreaStackComponent {
|
||||
options = {
|
||||
title: {
|
||||
text: '堆叠区域图',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985',
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
data: [320, 332, 301, 334, 390, 330, 320],
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
},
|
||||
},
|
||||
areaStyle: { normal: {} },
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,73 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-echarts-bar-animation',
|
||||
template: ``,
|
||||
template: `
|
||||
<div echarts [options]="options" class="echart"></div>
|
||||
`,
|
||||
})
|
||||
export class EchartsBarAnimationComponent {
|
||||
xAxisData = [];
|
||||
data1 = [];
|
||||
data2 = [];
|
||||
|
||||
options = {
|
||||
title: {
|
||||
text: '柱状图动画延迟',
|
||||
},
|
||||
legend: {
|
||||
data: ['bar', 'bar2'],
|
||||
align: 'left',
|
||||
},
|
||||
toolbox: {
|
||||
// y: 'bottom',
|
||||
feature: {
|
||||
magicType: {
|
||||
type: ['stack', 'tiled'],
|
||||
},
|
||||
dataView: {},
|
||||
saveAsImage: {
|
||||
pixelRatio: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: this.xAxisData,
|
||||
silent: false,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
data: this.data1,
|
||||
animationDelay: function(idx) {
|
||||
return idx * 10;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'bar2',
|
||||
type: 'bar',
|
||||
data: this.data2,
|
||||
animationDelay: function(idx) {
|
||||
return idx * 10 + 100;
|
||||
},
|
||||
},
|
||||
],
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelayUpdate: function(idx) {
|
||||
return idx * 5;
|
||||
},
|
||||
};
|
||||
|
||||
constructor() {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
this.xAxisData.push('类目' + i);
|
||||
this.data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
|
||||
this.data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,116 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-echarts-multiple-xaxis',
|
||||
template: ``,
|
||||
template: `
|
||||
<div echarts [options]="options" class="echart"></div>
|
||||
`,
|
||||
})
|
||||
export class EchartsMultipleXaxisComponent {
|
||||
private colors = ['#5793f3', '#d14a61', '#675bba'];
|
||||
|
||||
options = {
|
||||
color: this.colors,
|
||||
|
||||
tooltip: {
|
||||
trigger: 'none',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['2015 降水量', '2016 降水量'],
|
||||
},
|
||||
grid: {
|
||||
top: 70,
|
||||
bottom: 50,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: this.colors[1],
|
||||
},
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
formatter: function(params) {
|
||||
return '降水量 ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [
|
||||
'2016-1',
|
||||
'2016-2',
|
||||
'2016-3',
|
||||
'2016-4',
|
||||
'2016-5',
|
||||
'2016-6',
|
||||
'2016-7',
|
||||
'2016-8',
|
||||
'2016-9',
|
||||
'2016-10',
|
||||
'2016-11',
|
||||
'2016-12',
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLine: {
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: this.colors[0],
|
||||
},
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
formatter: params => {
|
||||
return '降水量 ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [
|
||||
'2015-1',
|
||||
'2015-2',
|
||||
'2015-3',
|
||||
'2015-4',
|
||||
'2015-5',
|
||||
'2015-6',
|
||||
'2015-7',
|
||||
'2015-8',
|
||||
'2015-9',
|
||||
'2015-10',
|
||||
'2015-11',
|
||||
'2015-12',
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '2015 降水量',
|
||||
type: 'line',
|
||||
xAxisIndex: 1,
|
||||
smooth: true,
|
||||
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||||
},
|
||||
{
|
||||
name: '2016 降水量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,46 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-echarts-radar',
|
||||
template: ``,
|
||||
template: `
|
||||
<div echarts [options]="options" class="echart"></div>
|
||||
`,
|
||||
})
|
||||
export class EchartsRadarComponent {
|
||||
options = {
|
||||
title: {
|
||||
text: '基础雷达图',
|
||||
},
|
||||
tooltip: {},
|
||||
legend: {
|
||||
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
indicator: [
|
||||
{ name: '销售（sales）', max: 6500 },
|
||||
{ name: '管理（Administration）', max: 16000 },
|
||||
{ name: '信息技术（Information Techology）', max: 30000 },
|
||||
{ name: '客服（Customer Support）', max: 38000 },
|
||||
{ name: '研发（Development）', max: 52000 },
|
||||
{ name: '市场（Marketing）', max: 25000 },
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '预算 vs 开销（Budget vs spending）',
|
||||
type: 'radar',
|
||||
// areaStyle: {normal: {}},
|
||||
data: [
|
||||
{
|
||||
value: [4300, 10000, 28000, 35000, 50000, 19000],
|
||||
name: '预算分配（Allocated Budget）',
|
||||
},
|
||||
{
|
||||
value: [5000, 14000, 28000, 31000, 42000, 21000],
|
||||
name: '实际开销（Actual Spending）',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,19 +26,33 @@
|
|||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Multiple x-axis</nga-card-header>
|
||||
<nga-card-body></nga-card-body>
|
||||
<nga-card-body>
|
||||
<ngx-echarts-multiple-xaxis></ngx-echarts-multiple-xaxis>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Area Stack</nga-card-header>
|
||||
<nga-card-body></nga-card-body>
|
||||
<nga-card-body>
|
||||
<ngx-echarts-area-stack></ngx-echarts-area-stack>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Bar Animation</nga-card-header>
|
||||
<nga-card-body></nga-card-body>
|
||||
<nga-card-body>
|
||||
<ngx-echarts-bar-animation></ngx-echarts-bar-animation>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Radar</nga-card-header>
|
||||
<nga-card-body>
|
||||
<ngx-echarts-radar></ngx-echarts-radar>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
|
||||
ngx-echarts-pie, ngx-echarts-bar, ngx-echarts-line {
|
||||
ngx-echarts-pie,
|
||||
ngx-echarts-bar,
|
||||
ngx-echarts-line {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,5 +5,4 @@ import { Component } from '@angular/core';
|
|||
styleUrls: ['./echarts.component.scss'],
|
||||
templateUrl: './echarts.component.html',
|
||||
})
|
||||
export class EchartsComponent {
|
||||
}
|
||||
export class EchartsComponent {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue