Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(charts): integrate js theme with echarts

Browse source
This commit is contained in:
Alexander Zhukov 2017-07-27 17:21:38 +03:00
parent eef4d0633c
commit d464d1060b
14 changed files with 675 additions and 543 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/app/@theme/styles/theme.cosmic.ts Normal file
View file

@ -0,0 +1,89 @@
export const COSMIC_THEME = {
name: 'cosmic',
base: 'default',
variables: {
tempColorGreen: '#7bff24',
tempColorLightBlue: '#31ffad',
tempColorBlue: '#2ec7fe',
tempColorYellow: '#fff024',
tempColorOrange: '#f7bd59',
solarColorDarkGreen: '#19977E',
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
trafficColorBlack: '#000000',
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
trafficShadowLineBg: '#bdbaff',
trafficShadowLineDarkBg: '#a695ff',
trafficShadowLineShadow: 'rgba(33, 7, 77, 0.5)',
trafficGradFrom: 'rgba(118, 89, 255, 0.4)',
trafficGradTo: 'rgba(164, 84, 255, 0.5)',
electricityAxisColor: '#a1a1e5',
electricityLineGradFrom: '#00ffaa',
electricityLineGradTo: '#fff835',
electricityLineShadow: 'rgba(14, 16, 48, 0.4)',
electricityAreaGradFrom: 'rgba(188, 92, 255, 0.5)',
electricityAreaGradTo: 'rgba(188, 92, 255, 0)',
bubbleMapTitleColor: '#ffffff',
bubbleMapGeoColor1: '#e6b045',
bubbleMapGeoColor2: '#0088ff',
bubbleMapGeoColor3: '#ff386a',
bubbleMapGeoColor4: '#00d977',
bubbleMapGeoColor5: '#7659ff',
bubbleMapGeoColor6: '#24dec8',
bubbleMapAreaColor: '#2c2961',
bubbleMapAreaHoverColor: '#a1a1e5',
bubbleMapAreaBorderColor: '#654ddb',
echartsBackgroundColor: '#363175',
echartsPieColor1: 'rgb(168, 56, 93)',
echartsPieColor2: 'rgb(122, 163, 229)',
echartsPieColor3: 'rgb(170, 227, 245)',
echartsPieColor4: 'rgb(173, 205, 237)',
echartsPieColor5: 'rgb(162, 126, 168)',
echartsPieLegendTextColor: 'white',
echartsPieItemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
echartsBarColor1: '#3398DB',
echartsBarXAxisLineColor: 'white',
echartsBarYAxisLineColor: 'white',
echartsLineColor1: 'red',
echartsLineColor2: 'black',
echartsLineColor3: 'white',
echartsLineLegendTextColor: 'white',
echartsLineXAxisLineColor: 'white',
echartsLineYAxisLineColor: 'white',
echartsMultipleXAxisColor1: '#5793f3',
echartsMultipleXAxisColor2: '#d14a61',
echartsMultipleXAxisColor3: '#675bba',
echartsMultipleXAxisLegendTextColor: 'white',
echartsMultipleXAxisYAxisLineColor: 'white',
echartsAreaStackColor1: 'red',
echartsAreaStackColor2: 'blue',
echartsAreaStackColor3: 'purple',
echartsAreaStackColor4: 'yellow',
echartsAreaStackColor5: 'pink',
echartsAreaStackLegendTextColor: 'white',
echartsAreaStackXAxisLineColor: 'white',
echartsAreaStackYAxisLineColor: 'white',
echartsAreaStackTooltipBackgroundColor: '#6a7985',
echartsBarAnimationColor1: 'red',
echartsBarAnimationColor2: 'white',
echartsBarAnimationLegendTextColor: 'white',
echartsBarAnimationXAxisLineColor: 'white',
echartsBarAnimationYAxisLineColor: 'white',
echartsRadarColor1: 'red',
echartsRadarColor2: 'white',
echartsRadarLegendTextColor: 'white',
echartsRadarNameTextColor: 'white',
echartsRadarSplitAreaStyleColor: 'transparent',
},
};

40
src/app/@theme/styles/theme.default.ts Normal file
View file

@ -0,0 +1,40 @@
export const DEFAULT_THEME = {
name: 'default',
base: 'default',
variables: {
tempColorGreen: '#7bff24',
tempColorLightBlue: '#7bff24',
tempColorBlue: '#7bff24',
tempColorYellow: '#7bff24',
tempColorOrange: '#7bff24',
solarColorDarkGreen: '#7bff24',
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
trafficColorBlack: '#7bff24',
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
trafficShadowLineBg: '#7bff24',
trafficShadowLineDarkBg: '#7bff24',
trafficShadowLineShadow: '#7bff24',
trafficGradFrom: '#7bff24',
trafficGradTo: '#7bff24',
electricityAxisColor: '#7bff24',
electricityLineGradFrom: '#7bff24',
electricityLineGradTo: '#7bff24',
electricityLineShadow: '#7bff24',
electricityAreaGradFrom: '#7bff24',
electricityAreaGradTo: '#7bff24',
bubbleMapTitleColor: '#333333',
bubbleMapGeoColor1: '#e6b045',
bubbleMapGeoColor2: '#0088ff',
bubbleMapGeoColor3: '#ff386a',
bubbleMapGeoColor4: '#00d977',
bubbleMapGeoColor5: '#7659ff',
bubbleMapGeoColor6: '#24dec8',
bubbleMapAreaColor: '#2f3234',
bubbleMapAreaHoverColor: '#a1a1e5',
bubbleMapAreaBorderColor: '#dddddd',
},
};

129
src/app/@theme/theme.module.ts
View file

@ -22,22 +22,17 @@ import {
ThemeSettingsComponent, ThemeSettingsComponent,
TinyMCEComponent, TinyMCEComponent,
} from './components'; } from './components';
import { CapitalizePipe, PluralPipe, RoundPipe } from './pipes'; import { CapitalizePipe, PluralPipe, RoundPipe } from './pipes';
import { import {
OneColumnLayoutComponent, OneColumnLayoutComponent,
SampleLayoutComponent, SampleLayoutComponent,
ThreeColumnsLayoutComponent, ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent, TwoColumnsLayoutComponent,
} from './layouts'; } from './layouts';
import { DEFAULT_THEME } from './styles/theme.default';
import { COSMIC_THEME } from './styles/theme.cosmic';
const BASE_MODULES = [ const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule];
CommonModule,
FormsModule,
ReactiveFormsModule,
];
const NGA_MODULES = [ const NGA_MODULES = [
NgaCardModule, NgaCardModule,
@ -55,106 +50,22 @@ const COMPONENTS = [
HeaderComponent, HeaderComponent,
FooterComponent, FooterComponent,
SearchInputComponent, SearchInputComponent,
TinyMCEComponent,
ThemeSettingsComponent, ThemeSettingsComponent,
TinyMCEComponent,
OneColumnLayoutComponent, OneColumnLayoutComponent,
TwoColumnsLayoutComponent,
ThreeColumnsLayoutComponent,
SampleLayoutComponent, SampleLayoutComponent,
ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent,
]; ];
const PIPES = [ const PIPES = [CapitalizePipe, PluralPipe, RoundPipe];
CapitalizePipe,
PluralPipe,
RoundPipe,
];
const NGA_THEME_PROVIDERS = [ const NGA_THEME_PROVIDERS = [
...NgaThemeModule.forRoot({ ...NgaThemeModule.forRoot(
name: 'cosmic',
},
[
{
name: 'default',
base: 'default',
variables: {
tempColorGreen: '#7bff24',
tempColorLightBlue: '#7bff24',
tempColorBlue: '#7bff24',
tempColorYellow: '#7bff24',
tempColorOrange: '#7bff24',
solarColorDarkGreen: '#7bff24',
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
trafficColorBlack: '#7bff24',
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
trafficShadowLineBg: '#7bff24',
trafficShadowLineDarkBg: '#7bff24',
trafficShadowLineShadow: '#7bff24',
trafficGradFrom: '#7bff24',
trafficGradTo: '#7bff24',
electricityAxisColor: '#7bff24',
electricityLineGradFrom: '#7bff24',
electricityLineGradTo: '#7bff24',
electricityLineShadow: '#7bff24',
electricityAreaGradFrom: '#7bff24',
electricityAreaGradTo: '#7bff24',
bubbleMapTitleColor: '#333333',
bubbleMapGeoColor1: '#e6b045',
bubbleMapGeoColor2: '#0088ff',
bubbleMapGeoColor3: '#ff386a',
bubbleMapGeoColor4: '#00d977',
bubbleMapGeoColor5: '#7659ff',
bubbleMapGeoColor6: '#24dec8',
bubbleMapAreaColor: '#2f3234',
bubbleMapAreaHoverColor: '#a1a1e5',
bubbleMapAreaBorderColor: '#dddddd',
},
},
{ {
name: 'cosmic', name: 'cosmic',
base: 'default',
variables: {
tempColorGreen: '#7bff24',
tempColorLightBlue: '#31ffad',
tempColorBlue: '#2ec7fe',
tempColorYellow: '#fff024',
tempColorOrange: '#f7bd59',
solarColorDarkGreen: '#19977E',
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
trafficColorBlack: '#000000',
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
trafficShadowLineBg: '#bdbaff',
trafficShadowLineDarkBg: '#a695ff',
trafficShadowLineShadow: 'rgba(33, 7, 77, 0.5)',
trafficGradFrom: 'rgba(118, 89, 255, 0.4)',
trafficGradTo: 'rgba(164, 84, 255, 0.5)',
electricityAxisColor: '#a1a1e5',
electricityLineGradFrom: '#00ffaa',
electricityLineGradTo: '#fff835',
electricityLineShadow: 'rgba(14, 16, 48, 0.4)',
electricityAreaGradFrom: 'rgba(188, 92, 255, 0.5)',
electricityAreaGradTo: 'rgba(188, 92, 255, 0)',
bubbleMapTitleColor: '#ffffff',
bubbleMapGeoColor1: '#e6b045',
bubbleMapGeoColor2: '#0088ff',
bubbleMapGeoColor3: '#ff386a',
bubbleMapGeoColor4: '#00d977',
bubbleMapGeoColor5: '#7659ff',
bubbleMapGeoColor6: '#24dec8',
bubbleMapAreaColor: '#2c2961',
bubbleMapAreaHoverColor: '#a1a1e5',
bubbleMapAreaBorderColor: '#654ddb',
}, },
}, [DEFAULT_THEME, COSMIC_THEME],
],
).providers, ).providers,
...NgaSidebarModule.forRoot().providers, ...NgaSidebarModule.forRoot().providers,
...NgaSidebarModule.forRoot().providers, ...NgaSidebarModule.forRoot().providers,
@ -162,29 +73,15 @@ const NGA_THEME_PROVIDERS = [
]; ];
@NgModule({ @NgModule({
imports: [ imports: [...BASE_MODULES, ...NGA_MODULES],
...BASE_MODULES, exports: [...BASE_MODULES, ...NGA_MODULES, ...COMPONENTS, ...PIPES],
...NGA_MODULES, declarations: [...COMPONENTS, ...PIPES],
],
exports: [
...BASE_MODULES,
...NGA_MODULES,
...COMPONENTS,
...PIPES,
],
declarations: [
...COMPONENTS,
...PIPES,
],
}) })
export class ThemeModule { export class ThemeModule {
static forRoot(): ModuleWithProviders { static forRoot(): ModuleWithProviders {
return <ModuleWithProviders>{ return <ModuleWithProviders>{
ngModule: ThemeModule, ngModule: ThemeModule,
providers: [ providers: [...NGA_THEME_PROVIDERS],
...NGA_THEME_PROVIDERS,
],
}; };
} }
} }

4
src/app/pages/charts/chartjs/chartjs.component.scss Normal file
View file

@ -0,0 +1,4 @@
@import '../../../@theme/styles/variables';
@include nga-install-component() {
}

1
src/app/pages/charts/chartjs/chartjs.component.ts
View file

@ -2,6 +2,7 @@ import { Component } from '@angular/core';
@Component({ @Component({
selector: 'ngx-chartjs', selector: 'ngx-chartjs',
styleUrls: ['./chartjs.component.scss'],
templateUrl: './chartjs.component.html', templateUrl: './chartjs.component.html',
}) })
export class ChartjsComponent {} export class ChartjsComponent {}

4
src/app/pages/charts/d3/d3.component.scss Normal file
View file

@ -0,0 +1,4 @@
@import '../../../@theme/styles/variables';
@include nga-install-component() {
}

1
src/app/pages/charts/d3/d3.component.ts
View file

@ -2,6 +2,7 @@ import { Component } from '@angular/core';
@Component({ @Component({
selector: 'ngx-d3', selector: 'ngx-d3',
styleUrls: ['./d3.component.scss'],
templateUrl: './d3.component.html', templateUrl: './d3.component.html',
}) })
export class D3Component {} export class D3Component {}

62
src/app/pages/charts/echarts/echarts-area-stack.component.ts
View file

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({ @Component({
selector: 'ngx-echarts-area-stack', selector: 'ngx-echarts-area-stack',
@ -7,25 +8,32 @@ import { Component } from '@angular/core';
`, `,
}) })
export class EchartsAreaStackComponent { export class EchartsAreaStackComponent {
options = { options: any;
title: {
text: '堆叠区域图', constructor(private theme: NgaThemeService) {
}, this.theme.getJsTheme().subscribe(config => {
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [
config.echartsAreaStackColor1,
config.echartsAreaStackColor2,
config.echartsAreaStackColor3,
config.echartsAreaStackColor4,
config.echartsAreaStackColor5,
],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'cross', type: 'cross',
label: { label: {
backgroundColor: '#6a7985', backgroundColor: config.echartsAreaStackTooltipBackgroundColor,
}, },
}, },
}, },
legend: { legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'], data: ['Mail marketing', 'Affiliate advertising', 'Video ad', 'Direct interview', 'Search engine'],
}, textStyle: {
toolbox: { color: config.echartsAreaStackLegendTextColor,
feature: {
saveAsImage: {},
}, },
}, },
grid: { grid: {
@ -38,47 +46,57 @@ export class EchartsAreaStackComponent {
{ {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
axisLine: {
lineStyle: {
color: config.echartsAreaStackXAxisLineColor,
},
},
}, },
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
axisLine: {
lineStyle: {
color: config.echartsAreaStackYAxisLineColor,
},
},
}, },
], ],
series: [ series: [
{ {
name: '邮件营销', name: 'Mail marketing',
type: 'line', type: 'line',
stack: '总量', stack: 'Total amount',
areaStyle: { normal: {} }, areaStyle: { normal: {} },
data: [120, 132, 101, 134, 90, 230, 210], data: [120, 132, 101, 134, 90, 230, 210],
}, },
{ {
name: '联盟广告', name: 'Affiliate advertising',
type: 'line', type: 'line',
stack: '总量', stack: 'Total amount',
areaStyle: { normal: {} }, areaStyle: { normal: {} },
data: [220, 182, 191, 234, 290, 330, 310], data: [220, 182, 191, 234, 290, 330, 310],
}, },
{ {
name: '视频广告', name: 'Video ad',
type: 'line', type: 'line',
stack: '总量', stack: 'Total amount',
areaStyle: { normal: {} }, areaStyle: { normal: {} },
data: [150, 232, 201, 154, 190, 330, 410], data: [150, 232, 201, 154, 190, 330, 410],
}, },
{ {
name: '直接访问', name: 'Direct interview',
type: 'line', type: 'line',
stack: '总量', stack: 'Total amount',
areaStyle: { normal: {} }, areaStyle: { normal: {} },
data: [320, 332, 301, 334, 390, 330, 320], data: [320, 332, 301, 334, 390, 330, 320],
}, },
{ {
name: '搜索引擎', name: 'Search engine',
type: 'line', type: 'line',
stack: '总量', stack: 'Total amount',
label: { label: {
normal: { normal: {
show: true, show: true,
@ -90,4 +108,6 @@ export class EchartsAreaStackComponent {
}, },
], ],
}; };
});
}
} }

61
src/app/pages/charts/echarts/echarts-bar-animation.component.ts
View file

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({ @Component({
selector: 'ngx-echarts-bar-animation', selector: 'ngx-echarts-bar-animation',
@ -7,44 +8,48 @@ import { Component } from '@angular/core';
`, `,
}) })
export class EchartsBarAnimationComponent { export class EchartsBarAnimationComponent {
xAxisData = []; options: any;
data1 = [];
data2 = [];
options = { constructor(private theme: NgaThemeService) {
title: { this.theme.getJsTheme().subscribe(config => {
text: '柱状图动画延迟', const xAxisData = [];
}, const data1 = [];
const data2 = [];
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [config.echartsBarAnimationColor1, config.echartsBarAnimationColor2],
legend: { legend: {
data: ['bar', 'bar2'], data: ['bar', 'bar2'],
align: 'left', align: 'left',
}, textStyle: {
toolbox: { color: config.echartsBarAnimationLegendTextColor,
// y: 'bottom',
feature: {
magicType: {
type: ['stack', 'tiled'],
},
dataView: {},
saveAsImage: {
pixelRatio: 2,
}, },
}, },
},
tooltip: {},
xAxis: { xAxis: {
data: this.xAxisData, data: xAxisData,
silent: false, silent: false,
splitLine: { splitLine: {
show: false, show: false,
}, },
axisLine: {
lineStyle: {
color: config.echartsBarAnimationXAxisLineColor,
},
},
},
yAxis: {
axisLine: {
lineStyle: {
color: config.echartsBarAnimationYAxisLineColor,
},
},
}, },
yAxis: {},
series: [ series: [
{ {
name: 'bar', name: 'bar',
type: 'bar', type: 'bar',
data: this.data1, data: data1,
animationDelay: function(idx) { animationDelay: function(idx) {
return idx * 10; return idx * 10;
}, },
@ -52,7 +57,7 @@ export class EchartsBarAnimationComponent {
{ {
name: 'bar2', name: 'bar2',
type: 'bar', type: 'bar',
data: this.data2, data: data2,
animationDelay: function(idx) { animationDelay: function(idx) {
return idx * 10 + 100; return idx * 10 + 100;
}, },
@ -64,11 +69,11 @@ export class EchartsBarAnimationComponent {
}, },
}; };
constructor() {
for (let i = 0; i < 100; i++) { for (let i = 0; i < 100; i++) {
this.xAxisData.push('类目' + i); xAxisData.push('Category ' + i);
this.data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5); 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); data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
} }
});
} }
} }

40
src/app/pages/charts/echarts/echarts-bar.component.ts
View file

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({ @Component({
selector: 'ngx-echarts-bar', selector: 'ngx-echarts-bar',
@ -7,26 +8,27 @@ import { Component } from '@angular/core';
`, `,
}) })
export class EchartsBarComponent { export class EchartsBarComponent {
options: any;
options = { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
color: ['#3398DB'], this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [config.echartsBarColor1],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',
}, },
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true, containLabel: true,
}, },
xAxis: [
xAxis: [{ {
type: 'category', type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: { axisTick: {
@ -34,26 +36,30 @@ export class EchartsBarComponent {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white', color: config.echartsBarXAxisLineColor,
}, },
}, },
}], },
],
yAxis: [{ yAxis: [
{
type: 'value', type: 'value',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white', color: config.echartsBarYAxisLineColor,
}, },
}, },
}], },
],
series: [{ series: [
{
name: 'Score', name: 'Score',
type: 'bar', type: 'bar',
barWidth: '60%', barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220], data: [10, 52, 200, 334, 390, 330, 220],
}], },
],
}; };
});
}
} }

37
src/app/pages/charts/echarts/echarts-line.component.ts
View file

@ -1,28 +1,31 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({ @Component({
selector: 'ngx-echarts-line', selector: 'ngx-echarts-line',
template: ` template: `
<div echarts [options]="lineChartOptions" class="echart"></div> <div echarts [options]="options" class="echart"></div>
`, `,
}) })
export class EchartsLineComponent { export class EchartsLineComponent {
options: any;
lineChartOptions = { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [config.echartsLineColor1, config.echartsLineColor2, config.echartsLineColor3],
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c}', formatter: '{a} <br/>{b} : {c}',
}, },
legend: { legend: {
left: 'left', left: 'left',
data: ['Line 1', 'Line 2', 'Line 3'], data: ['Line 1', 'Line 2', 'Line 3'],
textStyle: { textStyle: {
color: 'white', color: config.echartsLineLegendTextColor,
}, },
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
name: 'x', name: 'x',
@ -30,41 +33,43 @@ export class EchartsLineComponent {
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'], data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white', color: config.echartsLineXAxisLineColor,
}, },
}, },
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true, containLabel: true,
}, },
yAxis: { yAxis: {
type: 'log', type: 'log',
name: 'y', name: 'y',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white', color: config.echartsLineYAxisLineColor,
}, },
}, },
}, },
series: [
series: [{ {
name: 'Line 1', name: 'Line 1',
type: 'line', type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669], data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669],
}, { },
{
name: 'Line 2', name: 'Line 2',
type: 'line', type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256], data: [1, 2, 4, 8, 16, 32, 64, 128, 256],
}, { },
{
name: 'Line 3', name: 'Line 3',
type: 'line', type: 'line',
data: [1 / 2, 1 / 4, 1 / 8, 1 / 16, 1 / 32, 1 / 64, 1 / 128, 1 / 256, 1 / 512], data: [1 / 2, 1 / 4, 1 / 8, 1 / 16, 1 / 32, 1 / 64, 1 / 128, 1 / 256, 1 / 512],
}], },
],
}; };
});
}
} }

45
src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts
View file

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({ @Component({
selector: 'ngx-echarts-multiple-xaxis', selector: 'ngx-echarts-multiple-xaxis',
@ -7,11 +8,19 @@ import { Component } from '@angular/core';
`, `,
}) })
export class EchartsMultipleXaxisComponent { export class EchartsMultipleXaxisComponent {
private colors = ['#5793f3', '#d14a61', '#675bba']; options: any;
options = { constructor(private theme: NgaThemeService) {
color: this.colors, this.theme.getJsTheme().subscribe(config => {
const colors = [
config.echartsMultipleXAxisColor1,
config.echartsMultipleXAxisColor2,
config.echartsMultipleXAxisColor3,
];
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: colors,
tooltip: { tooltip: {
trigger: 'none', trigger: 'none',
axisPointer: { axisPointer: {
@ -19,7 +28,10 @@ export class EchartsMultipleXaxisComponent {
}, },
}, },
legend: { legend: {
data: ['2015 降水量', '2016 降水量'], data: ['2015 Precipitation', '2016 Precipitation'],
textStyle: {
color: config.echartsMultipleXAxisLegendTextColor,
},
}, },
grid: { grid: {
top: 70, top: 70,
@ -34,13 +46,15 @@ export class EchartsMultipleXaxisComponent {
axisLine: { axisLine: {
onZero: false, onZero: false,
lineStyle: { lineStyle: {
color: this.colors[1], color: colors[1],
}, },
}, },
axisPointer: { axisPointer: {
label: { label: {
formatter: function(params) { formatter: params => {
return '降水量 ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : ''); return (
'Precipitation ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
}, },
}, },
}, },
@ -67,13 +81,15 @@ export class EchartsMultipleXaxisComponent {
axisLine: { axisLine: {
onZero: false, onZero: false,
lineStyle: { lineStyle: {
color: this.colors[0], color: colors[0],
}, },
}, },
axisPointer: { axisPointer: {
label: { label: {
formatter: params => { formatter: params => {
return '降水量 ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : ''); return (
'Precipitation ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
}, },
}, },
}, },
@ -96,22 +112,29 @@ export class EchartsMultipleXaxisComponent {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
axisLine: {
lineStyle: {
color: config.echartsMultipleXAxisYAxisLineColor,
},
},
}, },
], ],
series: [ series: [
{ {
name: '2015 降水量', name: '2015 Precipitation',
type: 'line', type: 'line',
xAxisIndex: 1, xAxisIndex: 1,
smooth: true, 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], 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 降水量', name: '2016 Precipitation',
type: 'line', type: 'line',
smooth: true, 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], 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],
}, },
], ],
}; };
});
}
} }

53
src/app/pages/charts/echarts/echarts-pie.component.ts
View file

@ -1,61 +1,76 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({ @Component({
selector: 'ngx-echarts-pie', selector: 'ngx-echarts-pie',
template: ` template: `
<div echarts [options]="pieChartOptions" class="echart"></div>| <div echarts [options]="options" class="echart"></div>
`, `,
}) })
export class EchartsPieComponent { export class EchartsPieComponent {
options: any;
pieChartOptions = { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
color: ['rgb(168, 56, 93)', 'rgb(122, 163, 229)', 'rgb(170, 227, 245)', 'rgb(173, 205, 237)', 'rgb(162, 126, 168)'], this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [
config.echartsPieColor1,
config.echartsPieColor2,
config.echartsPieColor3,
config.echartsPieColor4,
config.echartsPieColor5,
],
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)', formatter: '{a} <br/>{b} : {c} ({d}%)',
}, },
legend: { legend: {
orient: 'vertical', orient: 'vertical',
left: 'left', left: 'left',
data: ['USA', 'Germany', 'France', 'Canada', 'Russia'], data: ['USA', 'Germany', 'France', 'Canada', 'Russia'],
textStyle: { textStyle: {
color: 'white', color: config.echartsPieLegendTextColor,
}, },
}, },
series: [
series: [{ {
name: 'Countries', name: 'Countries',
type: 'pie', type: 'pie',
radius: '55%', radius: '55%',
center: ['50%', '60%'], center: ['50%', '60%'],
data: [{ data: [
{
value: 335, value: 335,
name: 'Germany', name: 'Germany',
}, { },
{
value: 310, value: 310,
name: 'France', name: 'France',
}, { },
{
value: 234, value: 234,
name: 'Canada', name: 'Canada',
}, { },
{
value: 135, value: 135,
name: 'Russia', name: 'Russia',
}, { },
{
value: 1548, value: 1548,
name: 'USA', name: 'USA',
}], },
],
itemStyle: { itemStyle: {
emphasis: { emphasis: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)', shadowColor: config.echartsPieItemHoverShadowColor,
}, },
}, },
}], },
],
}; };
});
}
} }

54
src/app/pages/charts/echarts/echarts-radar.component.ts
View file

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
@Component({ @Component({
selector: 'ngx-echarts-radar', selector: 'ngx-echarts-radar',
@ -7,41 +8,62 @@ import { Component } from '@angular/core';
`, `,
}) })
export class EchartsRadarComponent { export class EchartsRadarComponent {
options = { options: any;
title: {
text: '基础雷达图', constructor(private theme: NgaThemeService) {
}, this.theme.getJsTheme().subscribe(config => {
this.options = {
backgroundColor: config.echartsBackgroundColor,
color: [config.echartsRadarColor1, config.echartsRadarColor2],
tooltip: {}, tooltip: {},
legend: { legend: {
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'], data: ['Allocated Budget', 'Actual Spending'],
textStyle: {
color: config.echartsRadarLegendTextColor,
},
}, },
radar: { radar: {
// shape: 'circle', name: {
textStyle: {
color: config.echartsRadarNameTextColor,
},
},
indicator: [ indicator: [
{ name: '销售（sales）', max: 6500 }, { name: 'Sales', max: 6500 },
{ name: '管理（Administration）', max: 16000 }, { name: 'Administration', max: 16000 },
{ name: '信息技术（Information Techology）', max: 30000 }, { name: 'Information Techology', max: 30000 },
{ name: '客服（Customer Support）', max: 38000 }, { name: 'Customer Support', max: 38000 },
{ name: '研发（Development）', max: 52000 }, { name: 'Development', max: 52000 },
{ name: '市场（Marketing）', max: 25000 }, { name: 'Marketing', max: 25000 },
], ],
// axisLine: {
// lineStyle: {
// color: 'white',
// },
// },
splitArea: {
areaStyle: {
color: config.echartsRadarSplitAreaStyleColor,
},
},
}, },
series: [ series: [
{ {
name: '预算 vs 开销（Budget vs spending）', name: 'Budget vs Spending',
type: 'radar', type: 'radar',
// areaStyle: {normal: {}},
data: [ data: [
{ {
value: [4300, 10000, 28000, 35000, 50000, 19000], value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配（Allocated Budget）', name: 'Allocated Budget',
}, },
{ {
value: [5000, 14000, 28000, 31000, 42000, 21000], value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '实际开销（Actual Spending）', name: 'Actual Spending',
}, },
], ],
}, },
], ],
}; };
});
}
} }