mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
feat(charts): integrate js theme with echarts
This commit is contained in:
Alexander Zhukov
parent
eef4d0633c
commit
d464d1060b
14 changed files with 675 additions and 543 deletions
89
src/app/@theme/styles/theme.cosmic.ts
Normal file
89
src/app/@theme/styles/theme.cosmic.ts
Normal 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
40
src/app/@theme/styles/theme.default.ts
Normal 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',
|
||||
},
|
||||
};
|
||||
|
|
@ -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 <ModuleWithProviders>{
|
||||
ngModule: ThemeModule,
|
||||
providers: [
|
||||
...NGA_THEME_PROVIDERS,
|
||||
],
|
||||
providers: [...NGA_THEME_PROVIDERS],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4
src/app/pages/charts/chartjs/chartjs.component.scss
Normal file
4
src/app/pages/charts/chartjs/chartjs.component.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-chartjs',
|
||||
styleUrls: ['./chartjs.component.scss'],
|
||||
templateUrl: './chartjs.component.html',
|
||||
})
|
||||
export class ChartjsComponent {}
|
||||
|
|
|
|||
4
src/app/pages/charts/d3/d3.component.scss
Normal file
4
src/app/pages/charts/d3/d3.component.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-d3',
|
||||
styleUrls: ['./d3.component.scss'],
|
||||
templateUrl: './d3.component.html',
|
||||
})
|
||||
export class D3Component {}
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,70 +1,75 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-echarts-line',
|
||||
template: `
|
||||
<div echarts [options]="lineChartOptions" class="echart"></div>
|
||||
<div echarts [options]="options" class="echart"></div>
|
||||
`,
|
||||
})
|
||||
export class EchartsLineComponent {
|
||||
options: any;
|
||||
|
||||
lineChartOptions = {
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{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} <br/>{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],
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,61 +1,76 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-echarts-pie',
|
||||
template: `
|
||||
<div echarts [options]="pieChartOptions" class="echart"></div>|
|
||||
<div echarts [options]="options" class="echart"></div>
|
||||
`,
|
||||
})
|
||||
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} <br/>{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} <br/>{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,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue