diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts new file mode 100644 index 00000000..f25a9b13 --- /dev/null +++ b/src/app/@theme/styles/theme.cosmic.ts @@ -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', + }, +}; diff --git a/src/app/@theme/styles/theme.default.ts b/src/app/@theme/styles/theme.default.ts new file mode 100644 index 00000000..4ad0a8d1 --- /dev/null +++ b/src/app/@theme/styles/theme.default.ts @@ -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', + }, +}; diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts index fb4352e9..afb5eb81 100644 --- a/src/app/@theme/theme.module.ts +++ b/src/app/@theme/theme.module.ts @@ -22,22 +22,17 @@ import { ThemeSettingsComponent, TinyMCEComponent, } from './components'; - - import { CapitalizePipe, PluralPipe, RoundPipe } from './pipes'; - import { OneColumnLayoutComponent, SampleLayoutComponent, ThreeColumnsLayoutComponent, TwoColumnsLayoutComponent, } from './layouts'; +import { DEFAULT_THEME } from './styles/theme.default'; +import { COSMIC_THEME } from './styles/theme.cosmic'; -const BASE_MODULES = [ - CommonModule, - FormsModule, - ReactiveFormsModule, -]; +const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule]; const NGA_MODULES = [ NgaCardModule, @@ -55,106 +50,22 @@ const COMPONENTS = [ HeaderComponent, FooterComponent, SearchInputComponent, - TinyMCEComponent, ThemeSettingsComponent, + TinyMCEComponent, OneColumnLayoutComponent, - TwoColumnsLayoutComponent, - ThreeColumnsLayoutComponent, SampleLayoutComponent, + ThreeColumnsLayoutComponent, + TwoColumnsLayoutComponent, ]; -const PIPES = [ - CapitalizePipe, - PluralPipe, - RoundPipe, -]; +const PIPES = [CapitalizePipe, PluralPipe, RoundPipe]; 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', - 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, ...NgaSidebarModule.forRoot().providers, ...NgaSidebarModule.forRoot().providers, @@ -162,29 +73,15 @@ const NGA_THEME_PROVIDERS = [ ]; @NgModule({ - imports: [ - ...BASE_MODULES, - ...NGA_MODULES, - ], - exports: [ - ...BASE_MODULES, - ...NGA_MODULES, - ...COMPONENTS, - ...PIPES, - ], - declarations: [ - ...COMPONENTS, - ...PIPES, - ], + imports: [...BASE_MODULES, ...NGA_MODULES], + exports: [...BASE_MODULES, ...NGA_MODULES, ...COMPONENTS, ...PIPES], + declarations: [...COMPONENTS, ...PIPES], }) export class ThemeModule { - static forRoot(): ModuleWithProviders { return { ngModule: ThemeModule, - providers: [ - ...NGA_THEME_PROVIDERS, - ], + providers: [...NGA_THEME_PROVIDERS], }; } } diff --git a/src/app/pages/charts/chartjs/chartjs.component.scss b/src/app/pages/charts/chartjs/chartjs.component.scss new file mode 100644 index 00000000..d189de43 --- /dev/null +++ b/src/app/pages/charts/chartjs/chartjs.component.scss @@ -0,0 +1,4 @@ +@import '../../../@theme/styles/variables'; + +@include nga-install-component() { +} diff --git a/src/app/pages/charts/chartjs/chartjs.component.ts b/src/app/pages/charts/chartjs/chartjs.component.ts index 91131a3d..659a19a2 100644 --- a/src/app/pages/charts/chartjs/chartjs.component.ts +++ b/src/app/pages/charts/chartjs/chartjs.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'ngx-chartjs', + styleUrls: ['./chartjs.component.scss'], templateUrl: './chartjs.component.html', }) export class ChartjsComponent {} diff --git a/src/app/pages/charts/d3/d3.component.scss b/src/app/pages/charts/d3/d3.component.scss new file mode 100644 index 00000000..d189de43 --- /dev/null +++ b/src/app/pages/charts/d3/d3.component.scss @@ -0,0 +1,4 @@ +@import '../../../@theme/styles/variables'; + +@include nga-install-component() { +} diff --git a/src/app/pages/charts/d3/d3.component.ts b/src/app/pages/charts/d3/d3.component.ts index 33b899db..6eaf9eab 100644 --- a/src/app/pages/charts/d3/d3.component.ts +++ b/src/app/pages/charts/d3/d3.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'ngx-d3', + styleUrls: ['./d3.component.scss'], templateUrl: './d3.component.html', }) 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 12184a25..f0463bf6 100644 --- a/src/app/pages/charts/echarts/echarts-area-stack.component.ts +++ b/src/app/pages/charts/echarts/echarts-area-stack.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; @Component({ selector: 'ngx-echarts-area-stack', @@ -7,87 +8,106 @@ import { Component } from '@angular/core'; `, }) 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', + options: any; + + 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: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: config.echartsAreaStackTooltipBackgroundColor, + }, }, }, - areaStyle: { normal: {} }, - data: [820, 932, 901, 934, 1290, 1330, 1320], - }, - ], - }; + legend: { + data: ['Mail marketing', 'Affiliate advertising', 'Video ad', 'Direct interview', 'Search engine'], + textStyle: { + color: config.echartsAreaStackLegendTextColor, + }, + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], + axisLine: { + lineStyle: { + color: config.echartsAreaStackXAxisLineColor, + }, + }, + }, + ], + yAxis: [ + { + type: 'value', + axisLine: { + lineStyle: { + color: config.echartsAreaStackYAxisLineColor, + }, + }, + }, + ], + series: [ + { + name: 'Mail marketing', + type: 'line', + stack: 'Total amount', + areaStyle: { normal: {} }, + data: [120, 132, 101, 134, 90, 230, 210], + }, + { + name: 'Affiliate advertising', + type: 'line', + stack: 'Total amount', + areaStyle: { normal: {} }, + data: [220, 182, 191, 234, 290, 330, 310], + }, + { + name: 'Video ad', + type: 'line', + stack: 'Total amount', + areaStyle: { normal: {} }, + data: [150, 232, 201, 154, 190, 330, 410], + }, + { + name: 'Direct interview', + type: 'line', + stack: 'Total amount', + areaStyle: { normal: {} }, + data: [320, 332, 301, 334, 390, 330, 320], + }, + { + name: 'Search engine', + type: 'line', + stack: 'Total amount', + 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 f3e9fb43..a35760fa 100644 --- a/src/app/pages/charts/echarts/echarts-bar-animation.component.ts +++ b/src/app/pages/charts/echarts/echarts-bar-animation.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; @Component({ selector: 'ngx-echarts-bar-animation', @@ -7,68 +8,72 @@ import { Component } from '@angular/core'; `, }) export class EchartsBarAnimationComponent { - xAxisData = []; - data1 = []; - data2 = []; + options: any; - 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(private theme: NgaThemeService) { + this.theme.getJsTheme().subscribe(config => { + const xAxisData = []; + const data1 = []; + const data2 = []; - 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); - } + this.options = { + backgroundColor: config.echartsBackgroundColor, + color: [config.echartsBarAnimationColor1, config.echartsBarAnimationColor2], + legend: { + data: ['bar', 'bar2'], + align: 'left', + textStyle: { + color: config.echartsBarAnimationLegendTextColor, + }, + }, + xAxis: { + data: xAxisData, + silent: false, + splitLine: { + show: false, + }, + axisLine: { + lineStyle: { + color: config.echartsBarAnimationXAxisLineColor, + }, + }, + }, + yAxis: { + axisLine: { + lineStyle: { + color: config.echartsBarAnimationYAxisLineColor, + }, + }, + }, + series: [ + { + name: 'bar', + type: 'bar', + data: data1, + animationDelay: function(idx) { + return idx * 10; + }, + }, + { + name: 'bar2', + type: 'bar', + data: data2, + animationDelay: function(idx) { + return idx * 10 + 100; + }, + }, + ], + animationEasing: 'elasticOut', + animationDelayUpdate: function(idx) { + return idx * 5; + }, + }; + + for (let i = 0; i < 100; i++) { + xAxisData.push('Category ' + i); + data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5); + data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5); + } + }); } } diff --git a/src/app/pages/charts/echarts/echarts-bar.component.ts b/src/app/pages/charts/echarts/echarts-bar.component.ts index 499aca61..1270513b 100644 --- a/src/app/pages/charts/echarts/echarts-bar.component.ts +++ b/src/app/pages/charts/echarts/echarts-bar.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; @Component({ selector: 'ngx-echarts-bar', @@ -7,53 +8,58 @@ import { Component } from '@angular/core'; `, }) export class EchartsBarComponent { + options: any; - options = { - - color: ['#3398DB'], - - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, - - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true, - }, - - xAxis: [{ - type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], - axisTick: { - alignWithLabel: true, - }, - axisLine: { - lineStyle: { - color: 'white', + constructor(private theme: NgaThemeService) { + this.theme.getJsTheme().subscribe(config => { + this.options = { + backgroundColor: config.echartsBackgroundColor, + color: [config.echartsBarColor1], + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, }, - }, - }], - - yAxis: [{ - type: 'value', - axisLine: { - lineStyle: { - color: 'white', + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, }, - }, - }], - - series: [{ - name: 'Score', - type: 'bar', - barWidth: '60%', - data: [10, 52, 200, 334, 390, 330, 220], - }], - }; - + xAxis: [ + { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + axisTick: { + alignWithLabel: true, + }, + axisLine: { + lineStyle: { + color: config.echartsBarXAxisLineColor, + }, + }, + }, + ], + yAxis: [ + { + type: 'value', + axisLine: { + lineStyle: { + color: config.echartsBarYAxisLineColor, + }, + }, + }, + ], + series: [ + { + name: 'Score', + type: 'bar', + barWidth: '60%', + data: [10, 52, 200, 334, 390, 330, 220], + }, + ], + }; + }); + } } diff --git a/src/app/pages/charts/echarts/echarts-line.component.ts b/src/app/pages/charts/echarts/echarts-line.component.ts index 6ee37cfb..732ec7be 100644 --- a/src/app/pages/charts/echarts/echarts-line.component.ts +++ b/src/app/pages/charts/echarts/echarts-line.component.ts @@ -1,70 +1,75 @@ import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; @Component({ selector: 'ngx-echarts-line', template: ` -
+
`, }) export class EchartsLineComponent { + options: any; - lineChartOptions = { - - tooltip: { - trigger: 'item', - formatter: '{a}
{b} : {c}', - }, - - legend: { - left: 'left', - data: ['Line 1', 'Line 2', 'Line 3'], - textStyle: { - color: 'white', - }, - }, - - xAxis: { - type: 'category', - name: 'x', - splitLine: { show: false }, - data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'], - axisLine: { - lineStyle: { - color: 'white', + constructor(private theme: NgaThemeService) { + this.theme.getJsTheme().subscribe(config => { + this.options = { + backgroundColor: config.echartsBackgroundColor, + color: [config.echartsLineColor1, config.echartsLineColor2, config.echartsLineColor3], + tooltip: { + trigger: 'item', + formatter: '{a}
{b} : {c}', }, - }, - }, - - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true, - }, - - yAxis: { - type: 'log', - name: 'y', - axisLine: { - lineStyle: { - color: 'white', + legend: { + left: 'left', + data: ['Line 1', 'Line 2', 'Line 3'], + textStyle: { + color: config.echartsLineLegendTextColor, + }, }, - }, - }, - - series: [{ - name: 'Line 1', - type: 'line', - data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669], - }, { - name: 'Line 2', - type: 'line', - data: [1, 2, 4, 8, 16, 32, 64, 128, 256], - }, { - name: 'Line 3', - type: 'line', - data: [1 / 2, 1 / 4, 1 / 8, 1 / 16, 1 / 32, 1 / 64, 1 / 128, 1 / 256, 1 / 512], - }], - }; - + xAxis: { + type: 'category', + name: 'x', + splitLine: { show: false }, + data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'], + axisLine: { + lineStyle: { + color: config.echartsLineXAxisLineColor, + }, + }, + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true, + }, + yAxis: { + type: 'log', + name: 'y', + axisLine: { + lineStyle: { + color: config.echartsLineYAxisLineColor, + }, + }, + }, + series: [ + { + name: 'Line 1', + type: 'line', + data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669], + }, + { + name: 'Line 2', + type: 'line', + data: [1, 2, 4, 8, 16, 32, 64, 128, 256], + }, + { + name: 'Line 3', + type: 'line', + data: [1 / 2, 1 / 4, 1 / 8, 1 / 16, 1 / 32, 1 / 64, 1 / 128, 1 / 256, 1 / 512], + }, + ], + }; + }); + } } 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 7eaa1c55..b3cdb43d 100644 --- a/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts +++ b/src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; @Component({ selector: 'ngx-echarts-multiple-xaxis', @@ -7,111 +8,133 @@ import { Component } from '@angular/core'; `, }) export class EchartsMultipleXaxisComponent { - private colors = ['#5793f3', '#d14a61', '#675bba']; + options: any; - options = { - color: this.colors, + constructor(private theme: NgaThemeService) { + this.theme.getJsTheme().subscribe(config => { + const colors = [ + config.echartsMultipleXAxisColor1, + config.echartsMultipleXAxisColor2, + config.echartsMultipleXAxisColor3, + ]; - 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], + this.options = { + backgroundColor: config.echartsBackgroundColor, + color: colors, + tooltip: { + trigger: 'none', + axisPointer: { + type: 'cross', }, }, - axisPointer: { - label: { - formatter: function(params) { - return '降水量 ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : ''); + legend: { + data: ['2015 Precipitation', '2016 Precipitation'], + textStyle: { + color: config.echartsMultipleXAxisLegendTextColor, + }, + }, + grid: { + top: 70, + bottom: 50, + }, + xAxis: [ + { + type: 'category', + axisTick: { + alignWithLabel: true, + }, + axisLine: { + onZero: false, + lineStyle: { + color: colors[1], + }, + }, + axisPointer: { + label: { + formatter: params => { + return ( + 'Precipitation ' + 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: colors[0], + }, + }, + axisPointer: { + label: { + formatter: params => { + return ( + 'Precipitation ' + 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', + axisLine: { + lineStyle: { + color: config.echartsMultipleXAxisYAxisLineColor, + }, }, }, - }, - 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], + series: [ + { + name: '2015 Precipitation', + 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], }, - }, - axisPointer: { - label: { - formatter: params => { - return '降水量 ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : ''); - }, + { + name: '2016 Precipitation', + 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], }, - }, - 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-pie.component.ts b/src/app/pages/charts/echarts/echarts-pie.component.ts index c74ca06c..b00e947a 100644 --- a/src/app/pages/charts/echarts/echarts-pie.component.ts +++ b/src/app/pages/charts/echarts/echarts-pie.component.ts @@ -1,61 +1,76 @@ import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; @Component({ selector: 'ngx-echarts-pie', template: ` -
| +
`, }) export class EchartsPieComponent { + options: any; - pieChartOptions = { - - color: ['rgb(168, 56, 93)', 'rgb(122, 163, 229)', 'rgb(170, 227, 245)', 'rgb(173, 205, 237)', 'rgb(162, 126, 168)'], - - tooltip: { - trigger: 'item', - formatter: '{a}
{b} : {c} ({d}%)', - }, - - legend: { - orient: 'vertical', - left: 'left', - data: ['USA', 'Germany', 'France', 'Canada', 'Russia'], - textStyle: { - color: 'white', - }, - }, - - series: [{ - name: 'Countries', - type: 'pie', - radius: '55%', - center: ['50%', '60%'], - data: [{ - value: 335, - name: 'Germany', - }, { - value: 310, - name: 'France', - }, { - value: 234, - name: 'Canada', - }, { - value: 135, - name: 'Russia', - }, { - value: 1548, - name: 'USA', - }], - - itemStyle: { - emphasis: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)', + constructor(private theme: NgaThemeService) { + this.theme.getJsTheme().subscribe(config => { + this.options = { + backgroundColor: config.echartsBackgroundColor, + color: [ + config.echartsPieColor1, + config.echartsPieColor2, + config.echartsPieColor3, + config.echartsPieColor4, + config.echartsPieColor5, + ], + tooltip: { + trigger: 'item', + formatter: '{a}
{b} : {c} ({d}%)', }, - }, - }], - }; - + legend: { + orient: 'vertical', + left: 'left', + data: ['USA', 'Germany', 'France', 'Canada', 'Russia'], + textStyle: { + color: config.echartsPieLegendTextColor, + }, + }, + series: [ + { + name: 'Countries', + type: 'pie', + radius: '55%', + center: ['50%', '60%'], + data: [ + { + value: 335, + name: 'Germany', + }, + { + value: 310, + name: 'France', + }, + { + value: 234, + name: 'Canada', + }, + { + value: 135, + name: 'Russia', + }, + { + value: 1548, + name: 'USA', + }, + ], + itemStyle: { + emphasis: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: config.echartsPieItemHoverShadowColor, + }, + }, + }, + ], + }; + }); + } } diff --git a/src/app/pages/charts/echarts/echarts-radar.component.ts b/src/app/pages/charts/echarts/echarts-radar.component.ts index 98d71311..a0edbe6b 100644 --- a/src/app/pages/charts/echarts/echarts-radar.component.ts +++ b/src/app/pages/charts/echarts/echarts-radar.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; @Component({ selector: 'ngx-echarts-radar', @@ -7,41 +8,62 @@ import { Component } from '@angular/core'; `, }) 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）', + options: any; + + constructor(private theme: NgaThemeService) { + this.theme.getJsTheme().subscribe(config => { + this.options = { + backgroundColor: config.echartsBackgroundColor, + color: [config.echartsRadarColor1, config.echartsRadarColor2], + tooltip: {}, + legend: { + data: ['Allocated Budget', 'Actual Spending'], + textStyle: { + color: config.echartsRadarLegendTextColor, }, + }, + radar: { + name: { + textStyle: { + color: config.echartsRadarNameTextColor, + }, + }, + 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 }, + ], + // axisLine: { + // lineStyle: { + // color: 'white', + // }, + // }, + splitArea: { + areaStyle: { + color: config.echartsRadarSplitAreaStyleColor, + }, + }, + }, + series: [ { - value: [5000, 14000, 28000, 31000, 42000, 21000], - name: '实际开销（Actual Spending）', + name: 'Budget vs Spending', + type: 'radar', + data: [ + { + value: [4300, 10000, 28000, 35000, 50000, 19000], + name: 'Allocated Budget', + }, + { + value: [5000, 14000, 28000, 31000, 42000, 21000], + name: 'Actual Spending', + }, + ], }, ], - }, - ], - }; + }; + }); + } }