diff --git a/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts b/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts index 5023704c..72b700a3 100644 --- a/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts @@ -2,7 +2,76 @@ import { Component } from '@angular/core'; @Component({ selector: 'ngx-chartjs-bar-horizontal', - template: ``, + styles: [ + ` + :host { + display: block; + } + `, + ], + template: ` + + `, }) 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); + } } diff --git a/src/app/pages/charts/chartjs/chartjs-bar.component.ts b/src/app/pages/charts/chartjs/chartjs-bar.component.ts index b50059de..17b5c2ba 100644 --- a/src/app/pages/charts/chartjs/chartjs-bar.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-bar.component.ts @@ -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: ` + [datasets]="chartData" + [labels]="chartLabels" + [options]="chartOptions" + [legend]="chartLegend" + [chartType]="chartType"> `, }) 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' }, ]; - } diff --git a/src/app/pages/charts/chartjs/chartjs-line.component.ts b/src/app/pages/charts/chartjs/chartjs-line.component.ts index b390abb3..333d07b8 100644 --- a/src/app/pages/charts/chartjs/chartjs-line.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-line.component.ts @@ -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: ` + [datasets]="chartData" + [labels]="chartLabels" + [options]="chartOptions" + [legend]="chartLegend" + [chartType]="chatyType"> `, }) 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'; } diff --git a/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts b/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts index 73540222..21ee99dc 100644 --- a/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts @@ -2,7 +2,130 @@ import { Component } from '@angular/core'; @Component({ selector: 'ngx-chartjs-multiple-xaxis', - template: ``, + styles: [ + ` + :host { + display: block; + } + `, + ], + template: ` + + `, }) 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); + } } diff --git a/src/app/pages/charts/chartjs/chartjs-pie.component.ts b/src/app/pages/charts/chartjs/chartjs-pie.component.ts index 7efe84fb..8b707214 100644 --- a/src/app/pages/charts/chartjs/chartjs-pie.component.ts +++ b/src/app/pages/charts/chartjs/chartjs-pie.component.ts @@ -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: ` - + `, }) 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 { }, }, }; - } diff --git a/src/app/pages/charts/chartjs/chartjs-radar.component.ts b/src/app/pages/charts/chartjs/chartjs-radar.component.ts new file mode 100644 index 00000000..01d4721a --- /dev/null +++ b/src/app/pages/charts/chartjs/chartjs-radar.component.ts @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-chartjs-radar', + styles: [ + ` + :host { + display: block; + } + `, + ], + template: ` + + `, +}) +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'; +} diff --git a/src/app/pages/charts/chartjs/chartjs.component.html b/src/app/pages/charts/chartjs/chartjs.component.html index 432067ff..cc8236c5 100644 --- a/src/app/pages/charts/chartjs/chartjs.component.html +++ b/src/app/pages/charts/chartjs/chartjs.component.html @@ -3,7 +3,7 @@ Pie - + @@ -11,7 +11,7 @@ Bar - + @@ -19,7 +19,7 @@ Line - + @@ -27,6 +27,7 @@ Multiple x-axis + @@ -34,6 +35,15 @@ Bar Horizontal + + + + +
+ + Radar + +
diff --git a/src/app/pages/charts/chartjs/chartjs.component.ts b/src/app/pages/charts/chartjs/chartjs.component.ts index 2d43952a..91131a3d 100644 --- a/src/app/pages/charts/chartjs/chartjs.component.ts +++ b/src/app/pages/charts/chartjs/chartjs.component.ts @@ -4,6 +4,4 @@ import { Component } from '@angular/core'; selector: 'ngx-chartjs', templateUrl: './chartjs.component.html', }) - -export class ChartjsComponent { -} +export class ChartjsComponent {} diff --git a/src/app/pages/charts/charts.module.ts b/src/app/pages/charts/charts.module.ts index 462fc518..402e5fd9 100644 --- a/src/app/pages/charts/charts.module.ts +++ b/src/app/pages/charts/charts.module.ts @@ -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 {} diff --git a/src/app/pages/charts/d3/d3-advanced-pie.component.ts b/src/app/pages/charts/d3/d3-advanced-pie.component.ts new file mode 100644 index 00000000..172f0cf0 --- /dev/null +++ b/src/app/pages/charts/d3/d3-advanced-pie.component.ts @@ -0,0 +1,32 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-d3-advanced-pie', + template: ` + + + `, +}) +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'], + }; +} diff --git a/src/app/pages/charts/d3/d3-area-stack.component.ts b/src/app/pages/charts/d3/d3-area-stack.component.ts index 3af2e102..8300574f 100644 --- a/src/app/pages/charts/d3/d3-area-stack.component.ts +++ b/src/app/pages/charts/d3/d3-area-stack.component.ts @@ -2,7 +2,76 @@ import { Component } from '@angular/core'; @Component({ selector: 'ngx-d3-area-stack', - template: ``, + template: ` + + + `, }) 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'; } diff --git a/src/app/pages/charts/d3/d3-bar.component.ts b/src/app/pages/charts/d3/d3-bar.component.ts index 12d87e42..d26fc0ec 100644 --- a/src/app/pages/charts/d3/d3-bar.component.ts +++ b/src/app/pages/charts/d3/d3-bar.component.ts @@ -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'; - } diff --git a/src/app/pages/charts/d3/d3-line.component.ts b/src/app/pages/charts/d3/d3-line.component.ts index 250d352d..d40d92e5 100644 --- a/src/app/pages/charts/d3/d3-line.component.ts +++ b/src/app/pages/charts/d3/d3-line.component.ts @@ -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'; - } diff --git a/src/app/pages/charts/d3/d3-pie.component.ts b/src/app/pages/charts/d3/d3-pie.component.ts index 1733cd59..e00fd9a5 100644 --- a/src/app/pages/charts/d3/d3-pie.component.ts +++ b/src/app/pages/charts/d3/d3-pie.component.ts @@ -3,44 +3,40 @@ import { Component } from '@angular/core'; @Component({ selector: 'ngx-d3-pie', template: ` - + `, }) 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'; - } diff --git a/src/app/pages/charts/d3/d3-plot.component.ts b/src/app/pages/charts/d3/d3-plot.component.ts deleted file mode 100644 index 6e05de09..00000000 --- a/src/app/pages/charts/d3/d3-plot.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'ngx-d3-plot', - template: ``, -}) -export class D3PlotComponent { -} diff --git a/src/app/pages/charts/d3/d3-polar.component.ts b/src/app/pages/charts/d3/d3-polar.component.ts index f151a57f..9d2affe0 100644 --- a/src/app/pages/charts/d3/d3-polar.component.ts +++ b/src/app/pages/charts/d3/d3-polar.component.ts @@ -2,7 +2,86 @@ import { Component } from '@angular/core'; @Component({ selector: 'ngx-d3-polar', - template: ``, + template: ` + + + `, }) 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'; } diff --git a/src/app/pages/charts/d3/d3.component.html b/src/app/pages/charts/d3/d3.component.html index 081ff9de..ddfa5014 100644 --- a/src/app/pages/charts/d3/d3.component.html +++ b/src/app/pages/charts/d3/d3.component.html @@ -25,20 +25,26 @@
- Equatin Plots - + Advanced Pie + + +
Area Chart - + + +
Polar Chart - + + +
diff --git a/src/app/pages/charts/d3/d3.component.ts b/src/app/pages/charts/d3/d3.component.ts index d8a6ec0a..33b899db 100644 --- a/src/app/pages/charts/d3/d3.component.ts +++ b/src/app/pages/charts/d3/d3.component.ts @@ -4,5 +4,4 @@ import { Component } from '@angular/core'; selector: 'ngx-d3', templateUrl: './d3.component.html', }) -export class D3Component { -} +export class D3Component {} diff --git a/src/app/pages/charts/echarts/echarts-area-stack.component.ts b/src/app/pages/charts/echarts/echarts-area-stack.component.ts index 5857b342..12184a25 100644 --- a/src/app/pages/charts/echarts/echarts-area-stack.component.ts +++ b/src/app/pages/charts/echarts/echarts-area-stack.component.ts @@ -2,7 +2,92 @@ import { Component } from '@angular/core'; @Component({ selector: 'ngx-echarts-area-stack', - template: ``, + template: ` +
+ `, }) 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], + }, + ], + }; } diff --git a/src/app/pages/charts/echarts/echarts-bar-animation.component.ts b/src/app/pages/charts/echarts/echarts-bar-animation.component.ts index adb6b758..f3e9fb43 100644 --- a/src/app/pages/charts/echarts/echarts-bar-animation.component.ts +++ b/src/app/pages/charts/echarts/echarts-bar-animation.component.ts @@ -2,7 +2,73 @@ import { Component } from '@angular/core'; @Component({ selector: 'ngx-echarts-bar-animation', - template: ``, + template: ` +
+ `, }) 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); + } + } } diff --git a/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts b/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts index 6fb9aba2..7eaa1c55 100644 --- a/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts +++ b/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts @@ -2,7 +2,116 @@ import { Component } from '@angular/core'; @Component({ selector: 'ngx-echarts-multiple-xaxis', - template: ``, + template: ` +
+ `, }) 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], + }, + ], + }; } diff --git a/src/app/pages/charts/echarts/echarts-radar.component.ts b/src/app/pages/charts/echarts/echarts-radar.component.ts index 6e1fda5c..98d71311 100644 --- a/src/app/pages/charts/echarts/echarts-radar.component.ts +++ b/src/app/pages/charts/echarts/echarts-radar.component.ts @@ -2,7 +2,46 @@ import { Component } from '@angular/core'; @Component({ selector: 'ngx-echarts-radar', - template: ``, + template: ` +
+ `, }) 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）', + }, + ], + }, + ], + }; } diff --git a/src/app/pages/charts/echarts/echarts.component.html b/src/app/pages/charts/echarts/echarts.component.html index f7301245..36e2b643 100644 --- a/src/app/pages/charts/echarts/echarts.component.html +++ b/src/app/pages/charts/echarts/echarts.component.html @@ -26,19 +26,33 @@
Multiple x-axis - + + +
Area Stack - + + +
Bar Animation - + + + + +
+
+ + Radar + + +
diff --git a/src/app/pages/charts/echarts/echarts.component.scss b/src/app/pages/charts/echarts/echarts.component.scss index b6f7cee3..7cc7fb4b 100644 --- a/src/app/pages/charts/echarts/echarts.component.scss +++ b/src/app/pages/charts/echarts/echarts.component.scss @@ -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%; } diff --git a/src/app/pages/charts/echarts/echarts.component.ts b/src/app/pages/charts/echarts/echarts.component.ts index 980eabb3..66bb439d 100644 --- a/src/app/pages/charts/echarts/echarts.component.ts +++ b/src/app/pages/charts/echarts/echarts.component.ts @@ -5,5 +5,4 @@ import { Component } from '@angular/core'; styleUrls: ['./echarts.component.scss'], templateUrl: './echarts.component.html', }) -export class EchartsComponent { -} +export class EchartsComponent {}