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

fix(charts): change color scheme for the ecahrts

Browse source
This commit is contained in:
KostyaDanovsky 2017-08-28 13:34:21 +03:00
parent 64a0fd330b
commit 0c323f55ef
16 changed files with 254 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/app/@theme/styles/theme.cosmic.ts
View file

@ -68,48 +68,13 @@ export const COSMIC_THEME = {
}, },
echarts: { echarts: {
bg: '#363175', bg: '#3d3780',
legendTextColor: 'white', textColor: '#ffffff',
xAxisLineColor: 'white', axisLineColor: '#a1a1e5',
yAxisLineColor: 'white', splitLineColor: '#342e73',
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
pie: { tooltipBackgroundColor: '#6a7985',
colors: [ areaOpacity: '1',
'rgb(168, 56, 93)',
'rgb(122, 163, 229)',
'rgb(170, 227, 245)',
'rgb(173, 205, 237)',
'rgb(162, 126, 168)',
],
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
},
bar: {
color: '#3398DB',
},
barAnimation: {
colors: ['red', 'white'],
},
line: {
colors: ['red', 'black', 'white'],
},
multipleLine: {
colors: ['#5793f3', '#d14a61', '#675bba'],
},
areaStack: {
colors: ['red', 'blue', 'purple', 'yellow', 'pink'],
tooltipBackgroundColor: '#6a7985',
},
radar: {
colors: ['red', 'white'],
nameTextColor: 'white',
splitAreaStyleColor: 'transparent',
},
}, },
chartjs: { chartjs: {

49
src/app/@theme/styles/theme.default.ts
View file

@ -62,48 +62,13 @@ export const DEFAULT_THEME = {
}, },
echarts: { echarts: {
bg: '#363175', bg: '#ffffff',
legendTextColor: 'white', textColor: '#484848',
xAxisLineColor: 'white', axisLineColor: '#bbbbbb',
yAxisLineColor: 'white', splitLineColor: '#ebeef2',
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
pie: { tooltipBackgroundColor: '#6a7985',
colors: [ areaOpacity: '0.7',
'rgb(168, 56, 93)',
'rgb(122, 163, 229)',
'rgb(170, 227, 245)',
'rgb(173, 205, 237)',
'rgb(162, 126, 168)',
],
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
},
bar: {
color: '#3398DB',
},
barAnimation: {
colors: ['red', 'white'],
},
line: {
colors: ['red', 'black', 'white'],
},
multipleLine: {
colors: ['#5793f3', '#d14a61', '#675bba'],
},
areaStack: {
colors: ['red', 'blue', 'purple', 'yellow', 'pink'],
tooltipBackgroundColor: '#6a7985',
},
radar: {
colors: ['red', 'white'],
nameTextColor: 'white',
splitAreaStyleColor: 'transparent',
},
}, },
chartjs: { chartjs: {

2
src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts
View file

@ -99,7 +99,7 @@ export class ChartjsBarHorizontalComponent {
legend: { legend: {
position: 'right', position: 'right',
labels: { labels: {
fontColor: chartjs.legendTextColor, fontColor: chartjs.textColor,
}, },
}, },
}; };

2
src/app/pages/charts/chartjs/chartjs-bar.component.ts
View file

@ -39,7 +39,7 @@ export class ChartjsBarComponent {
responsive: true, responsive: true,
legend: { legend: {
labels: { labels: {
fontColor: chartjs.legendTextColor, fontColor: chartjs.textColor,
}, },
}, },
scales: { scales: {

2
src/app/pages/charts/chartjs/chartjs-line.component.ts
View file

@ -63,7 +63,7 @@ export class ChartjsLineComponent {
}, },
legend: { legend: {
labels: { labels: {
fontColor: chartjs.legendTextColor, fontColor: chartjs.textColor,
}, },
}, },
}; };

2
src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts
View file

@ -104,7 +104,7 @@ export class ChartjsMultipleXaxisComponent {
legend: { legend: {
position: 'bottom', position: 'bottom',
labels: { labels: {
fontColor: chartjs.legendTextColor, fontColor: chartjs.textColor,
}, },
}, },
hover: { hover: {

4
src/app/pages/charts/chartjs/chartjs-pie.component.ts
View file

@ -34,7 +34,7 @@ export class ChartjsPieComponent {
scale: { scale: {
pointLabels: { pointLabels: {
fontSize: 14, fontSize: 14,
fontColor: chartjs.legendTextColor, fontColor: chartjs.textColor,
}, },
}, },
scales: { scales: {
@ -63,7 +63,7 @@ export class ChartjsPieComponent {
}, },
legend: { legend: {
labels: { labels: {
fontColor: chartjs.legendTextColor, fontColor: chartjs.textColor,
}, },
}, },
}; };

2
src/app/pages/charts/chartjs/chartjs-radar.component.ts
View file

@ -48,7 +48,7 @@ export class ChartjsRadarComponent {
scaleFontColor: 'white', scaleFontColor: 'white',
legend: { legend: {
labels: { labels: {
fontColor: chartjs.legendTextColor, fontColor: chartjs.textColor,
}, },
}, },
scale: { scale: {

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

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { AfterViewInit, Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
@ -7,30 +7,34 @@ import { NbThemeService } from '@nebular/theme';
<div echarts [options]="options" class="echart"></div> <div echarts [options]="options" class="echart"></div>
`, `,
}) })
export class EchartsAreaStackComponent { export class EchartsAreaStackComponent implements AfterViewInit {
options: any; options: any = {};
constructor(private theme: NbThemeService) { constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts; const echarts: any = config.variables.echarts;
this.options = { this.options = {
backgroundColor: echarts.bg, backgroundColor: echarts.bg,
color: echarts.areaStack.colors, color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'cross', type: 'cross',
label: { label: {
backgroundColor: echarts.areaStack.tooltipBackgroundColor, backgroundColor: echarts.tooltipBackgroundColor,
}, },
}, },
}, },
legend: { legend: {
data: ['Mail marketing', 'Affiliate advertising', 'Video ad', 'Direct interview', 'Search engine'], data: ['Mail marketing', 'Affiliate advertising', 'Video ad', 'Direct interview', 'Search engine'],
textStyle: { textStyle: {
color: echarts.legendTextColor, color: echarts.textColor,
}, },
}, },
grid: { grid: {
@ -44,9 +48,17 @@ export class EchartsAreaStackComponent {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
axisTick: {
alignWithLabel: true,
},
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: echarts.xAxisLineColor, color: echarts.axisLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
}, },
}, },
}, },
@ -56,7 +68,17 @@ export class EchartsAreaStackComponent {
type: 'value', type: 'value',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: echarts.yAxisLineColor, color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
}, },
}, },
}, },
@ -66,28 +88,28 @@ export class EchartsAreaStackComponent {
name: 'Mail marketing', name: 'Mail marketing',
type: 'line', type: 'line',
stack: 'Total amount', stack: 'Total amount',
areaStyle: { normal: {} }, areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [120, 132, 101, 134, 90, 230, 210], data: [120, 132, 101, 134, 90, 230, 210],
}, },
{ {
name: 'Affiliate advertising', name: 'Affiliate advertising',
type: 'line', type: 'line',
stack: 'Total amount', stack: 'Total amount',
areaStyle: { normal: {} }, areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [220, 182, 191, 234, 290, 330, 310], data: [220, 182, 191, 234, 290, 330, 310],
}, },
{ {
name: 'Video ad', name: 'Video ad',
type: 'line', type: 'line',
stack: 'Total amount', stack: 'Total amount',
areaStyle: { normal: {} }, areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [150, 232, 201, 154, 190, 330, 410], data: [150, 232, 201, 154, 190, 330, 410],
}, },
{ {
name: 'Direct interview', name: 'Direct interview',
type: 'line', type: 'line',
stack: 'Total amount', stack: 'Total amount',
areaStyle: { normal: {} }, areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [320, 332, 301, 334, 390, 330, 320], data: [320, 332, 301, 334, 390, 330, 320],
}, },
{ {
@ -98,9 +120,12 @@ export class EchartsAreaStackComponent {
normal: { normal: {
show: true, show: true,
position: 'top', position: 'top',
textStyle: {
color: echarts.textColor,
},
}, },
}, },
areaStyle: { normal: {} }, areaStyle: { normal: { opacity: echarts.areaOpacity } },
data: [820, 932, 901, 934, 1290, 1330, 1320], data: [820, 932, 901, 934, 1290, 1330, 1320],
}, },
], ],

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

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { AfterViewInit, Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
@ -7,46 +7,69 @@ import { NbThemeService } from '@nebular/theme';
<div echarts [options]="options" class="echart"></div> <div echarts [options]="options" class="echart"></div>
`, `,
}) })
export class EchartsBarAnimationComponent { export class EchartsBarAnimationComponent implements AfterViewInit {
options: any; options: any = {};
constructor(private theme: NbThemeService) { constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const xAxisData = []; const xAxisData = [];
const data1 = []; const data1 = [];
const data2 = []; const data2 = [];
const colors: any = config.variables;
const echarts: any = config.variables.echarts; const echarts: any = config.variables.echarts;
this.options = { this.options = {
backgroundColor: echarts.bg, backgroundColor: echarts.bg,
color: [echarts.barAnimation.colors], color: [colors.primaryLight, colors.infoLight],
legend: { legend: {
data: ['bar', 'bar2'], data: ['bar', 'bar2'],
align: 'left', align: 'left',
textStyle: { textStyle: {
color: echarts.legendTextColor, color: echarts.textColor,
}, },
}, },
xAxis: { xAxis: [
data: xAxisData, {
silent: false, data: xAxisData,
splitLine: { silent: false,
show: false, axisTick: {
}, alignWithLabel: true,
axisLine: { },
lineStyle: { axisLine: {
color: echarts.xAxisLineColor, lineStyle: {
color: echarts.axisLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
}, },
}, },
}, ],
yAxis: { yAxis: [
axisLine: { {
lineStyle: { axisLine: {
color: echarts.yAxisLineColor, lineStyle: {
color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
}, },
}, },
}, ],
series: [ series: [
{ {
name: 'bar', name: 'bar',

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

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { AfterViewInit, Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
@ -7,17 +7,21 @@ import { NbThemeService } from '@nebular/theme';
<div echarts [options]="options" class="echart"></div> <div echarts [options]="options" class="echart"></div>
`, `,
}) })
export class EchartsBarComponent { export class EchartsBarComponent implements AfterViewInit {
options: any; options: any = {};
constructor(private theme: NbThemeService) { constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts; const echarts: any = config.variables.echarts;
this.options = { this.options = {
backgroundColor: echarts.bg, backgroundColor: echarts.bg,
color: [echarts.bar.color], color: [colors.primaryLight],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -39,7 +43,12 @@ export class EchartsBarComponent {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: echarts.xAxisLineColor, color: echarts.axisLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
}, },
}, },
}, },
@ -49,7 +58,17 @@ export class EchartsBarComponent {
type: 'value', type: 'value',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: echarts.yAxisLineColor, color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
}, },
}, },
}, },

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

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { AfterViewInit, Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
@ -7,17 +7,21 @@ import { NbThemeService } from '@nebular/theme';
<div echarts [options]="options" class="echart"></div> <div echarts [options]="options" class="echart"></div>
`, `,
}) })
export class EchartsLineComponent { export class EchartsLineComponent implements AfterViewInit {
options: any; options: any = {};
constructor(private theme: NbThemeService) { constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts; const echarts: any = config.variables.echarts;
this.options = { this.options = {
backgroundColor: echarts.bg, backgroundColor: echarts.bg,
color: [echarts.line.colors], color: [colors.danger, colors.primary, colors.info],
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c}', formatter: '{a} <br/>{b} : {c}',
@ -26,35 +30,54 @@ export class EchartsLineComponent {
left: 'left', left: 'left',
data: ['Line 1', 'Line 2', 'Line 3'], data: ['Line 1', 'Line 2', 'Line 3'],
textStyle: { textStyle: {
color: echarts.legendTextColor, color: echarts.textColor,
}, },
}, },
xAxis: { xAxis: [
type: 'category', {
name: 'x', type: 'category',
splitLine: { show: false }, data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'], axisTick: {
axisLine: { alignWithLabel: true,
lineStyle: { },
color: echarts.xAxisLineColor, axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
}, },
}, },
}, ],
yAxis: [
{
type: 'log',
axisLine: {
lineStyle: {
color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
},
},
},
],
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true, containLabel: true,
}, },
yAxis: {
type: 'log',
name: 'y',
axisLine: {
lineStyle: {
color: echarts.yAxisLineColor,
},
},
},
series: [ series: [
{ {
name: 'Line 1', name: 'Line 1',

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

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, AfterViewInit } from '@angular/core';
import { NbThemeService } from '@nebular/theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
@ -7,17 +7,21 @@ import { NbThemeService } from '@nebular/theme';
<div echarts [options]="options" class="echart"></div> <div echarts [options]="options" class="echart"></div>
`, `,
}) })
export class EchartsMultipleXaxisComponent { export class EchartsMultipleXaxisComponent implements AfterViewInit {
options: any; options: any = {};
constructor(private theme: NbThemeService) { constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts; const echarts: any = config.variables.echarts;
this.options = { this.options = {
backgroundColor: echarts.bg, backgroundColor: echarts.bg,
color: echarts.multipleLine.colors, color: [colors.success, colors.info],
tooltip: { tooltip: {
trigger: 'none', trigger: 'none',
axisPointer: { axisPointer: {
@ -27,7 +31,7 @@ export class EchartsMultipleXaxisComponent {
legend: { legend: {
data: ['2015 Precipitation', '2016 Precipitation'], data: ['2015 Precipitation', '2016 Precipitation'],
textStyle: { textStyle: {
color: echarts.legendTextColor, color: echarts.textColor,
}, },
}, },
grid: { grid: {
@ -43,7 +47,12 @@ export class EchartsMultipleXaxisComponent {
axisLine: { axisLine: {
onZero: false, onZero: false,
lineStyle: { lineStyle: {
color: echarts.multipleLine.colors[1], color: colors.info,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
}, },
}, },
axisPointer: { axisPointer: {
@ -78,7 +87,12 @@ export class EchartsMultipleXaxisComponent {
axisLine: { axisLine: {
onZero: false, onZero: false,
lineStyle: { lineStyle: {
color: echarts.multipleLine.colors[0], color: colors.success,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
}, },
}, },
axisPointer: { axisPointer: {
@ -111,7 +125,17 @@ export class EchartsMultipleXaxisComponent {
type: 'value', type: 'value',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: echarts.yAxisLineColor, color: echarts.axisLineColor,
},
},
splitLine: {
lineStyle: {
color: echarts.splitLineColor,
},
},
axisLabel: {
textStyle: {
color: echarts.textColor,
}, },
}, },
}, },

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

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { AfterViewInit, Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
@ -7,17 +7,21 @@ import { NbThemeService } from '@nebular/theme';
<div echarts [options]="options" class="echart"></div> <div echarts [options]="options" class="echart"></div>
`, `,
}) })
export class EchartsPieComponent { export class EchartsPieComponent implements AfterViewInit {
options: any; options: any = {};
constructor(private theme: NbThemeService) { constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const colors = config.variables;
const echarts: any = config.variables.echarts; const echarts: any = config.variables.echarts;
this.options = { this.options = {
backgroundColor: echarts.bg, backgroundColor: echarts.bg,
color: echarts.pie.colors, color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight],
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)', formatter: '{a} <br/>{b} : {c} ({d}%)',
@ -27,42 +31,41 @@ export class EchartsPieComponent {
left: 'left', left: 'left',
data: ['USA', 'Germany', 'France', 'Canada', 'Russia'], data: ['USA', 'Germany', 'France', 'Canada', 'Russia'],
textStyle: { textStyle: {
color: echarts.legendTextColor, color: echarts.textColor,
}, },
}, },
series: [ series: [
{ {
name: 'Countries', name: 'Countries',
type: 'pie', type: 'pie',
radius: '55%', radius: '80%',
center: ['50%', '60%'], center: ['50%', '50%'],
data: [ data: [
{ { value: 335, name: 'Germany' },
value: 335, { value: 310, name: 'France' },
name: 'Germany', { value: 234, name: 'Canada' },
}, { value: 135, name: 'Russia' },
{ { value: 1548, name: 'USA' },
value: 310,
name: 'France',
},
{
value: 234,
name: 'Canada',
},
{
value: 135,
name: 'Russia',
},
{
value: 1548,
name: 'USA',
},
], ],
itemStyle: { itemStyle: {
emphasis: { emphasis: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: echarts.pie.itemHoverShadowColor, shadowColor: echarts.itemHoverShadowColor,
},
},
label: {
normal: {
textStyle: {
color: echarts.textColor,
},
},
},
labelLine: {
normal: {
lineStyle: {
color: echarts.axisLineColor,
},
}, },
}, },
}, },

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

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { AfterViewInit, Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
@ -7,28 +7,32 @@ import { NbThemeService } from '@nebular/theme';
<div echarts [options]="options" class="echart"></div> <div echarts [options]="options" class="echart"></div>
`, `,
}) })
export class EchartsRadarComponent { export class EchartsRadarComponent implements AfterViewInit {
options: any; options: any = {};
constructor(private theme: NbThemeService) { constructor(private theme: NbThemeService) {
}
ngAfterViewInit() {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const colors: any = config.variables;
const echarts: any = config.variables.echarts; const echarts: any = config.variables.echarts;
this.options = { this.options = {
backgroundColor: echarts.bg, backgroundColor: echarts.bg,
color: echarts.radar.colors, color: [colors.danger, colors.warning],
tooltip: {}, tooltip: {},
legend: { legend: {
data: ['Allocated Budget', 'Actual Spending'], data: ['Allocated Budget', 'Actual Spending'],
textStyle: { textStyle: {
color: echarts.legendTextColor, color: echarts.textColor,
}, },
}, },
radar: { radar: {
name: { name: {
textStyle: { textStyle: {
color: echarts.radar.nameTextColor, color: echarts.textColor,
}, },
}, },
indicator: [ indicator: [
@ -39,14 +43,9 @@ export class EchartsRadarComponent {
{ name: 'Development', max: 52000 }, { name: 'Development', max: 52000 },
{ name: 'Marketing', max: 25000 }, { name: 'Marketing', max: 25000 },
], ],
// axisLine: {
// lineStyle: {
// color: 'white',
// },
// },
splitArea: { splitArea: {
areaStyle: { areaStyle: {
color: echarts.radar.splitAreaStyleColor, color: 'transparent',
}, },
}, },
}, },

8
src/app/pages/charts/echarts/echarts.component.scss
View file

@ -3,12 +3,18 @@
@include nb-install-component() { @include nb-install-component() {
ngx-echarts-pie, ngx-echarts-pie,
ngx-echarts-bar, ngx-echarts-bar,
ngx-echarts-line { ngx-echarts-line,
ngx-echarts-multiple-xaxis,
ngx-echarts-area-stack,
ngx-echarts-bar-animation,
ngx-echarts-radar {
display: block; display: block;
height: 100%; height: 100%;
width: 100%;
} }
/deep/ .echart { /deep/ .echart {
height: 100%; height: 100%;
width: 100%;
} }
} }