mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 07:50:12 +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,
|
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: 'cosmic',
|
||||||
},
|
},
|
||||||
[
|
[DEFAULT_THEME, COSMIC_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',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
).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
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({
|
@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
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({
|
@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 {}
|
||||||
|
|
|
||||||
|
|
@ -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,87 +8,106 @@ 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 => {
|
||||||
tooltip: {
|
this.options = {
|
||||||
trigger: 'axis',
|
backgroundColor: config.echartsBackgroundColor,
|
||||||
axisPointer: {
|
color: [
|
||||||
type: 'cross',
|
config.echartsAreaStackColor1,
|
||||||
label: {
|
config.echartsAreaStackColor2,
|
||||||
backgroundColor: '#6a7985',
|
config.echartsAreaStackColor3,
|
||||||
},
|
config.echartsAreaStackColor4,
|
||||||
},
|
config.echartsAreaStackColor5,
|
||||||
},
|
],
|
||||||
legend: {
|
tooltip: {
|
||||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
|
trigger: 'axis',
|
||||||
},
|
axisPointer: {
|
||||||
toolbox: {
|
type: 'cross',
|
||||||
feature: {
|
label: {
|
||||||
saveAsImage: {},
|
backgroundColor: config.echartsAreaStackTooltipBackgroundColor,
|
||||||
},
|
},
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '邮件营销',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
areaStyle: { normal: {} },
|
|
||||||
data: [120, 132, 101, 134, 90, 230, 210],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '联盟广告',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
areaStyle: { normal: {} },
|
|
||||||
data: [220, 182, 191, 234, 290, 330, 310],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '视频广告',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
areaStyle: { normal: {} },
|
|
||||||
data: [150, 232, 201, 154, 190, 330, 410],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '直接访问',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
areaStyle: { normal: {} },
|
|
||||||
data: [320, 332, 301, 334, 390, 330, 320],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '搜索引擎',
|
|
||||||
type: 'line',
|
|
||||||
stack: '总量',
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
areaStyle: { normal: {} },
|
legend: {
|
||||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
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 { Component } from '@angular/core';
|
||||||
|
import { NgaThemeService } from '@akveo/nga-theme';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-echarts-bar-animation',
|
selector: 'ngx-echarts-bar-animation',
|
||||||
|
|
@ -7,68 +8,72 @@ 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 = [];
|
||||||
legend: {
|
const data2 = [];
|
||||||
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() {
|
this.options = {
|
||||||
for (let i = 0; i < 100; i++) {
|
backgroundColor: config.echartsBackgroundColor,
|
||||||
this.xAxisData.push('类目' + i);
|
color: [config.echartsBarAnimationColor1, config.echartsBarAnimationColor2],
|
||||||
this.data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
|
legend: {
|
||||||
this.data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
|
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 { Component } from '@angular/core';
|
||||||
|
import { NgaThemeService } from '@akveo/nga-theme';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-echarts-bar',
|
selector: 'ngx-echarts-bar',
|
||||||
|
|
@ -7,53 +8,58 @@ 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,
|
||||||
tooltip: {
|
color: [config.echartsBarColor1],
|
||||||
trigger: 'axis',
|
tooltip: {
|
||||||
axisPointer: {
|
trigger: 'axis',
|
||||||
type: 'shadow',
|
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',
|
|
||||||
},
|
},
|
||||||
},
|
grid: {
|
||||||
}],
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
yAxis: [{
|
bottom: '3%',
|
||||||
type: 'value',
|
containLabel: true,
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: 'white',
|
|
||||||
},
|
},
|
||||||
},
|
xAxis: [
|
||||||
}],
|
{
|
||||||
|
type: 'category',
|
||||||
series: [{
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
name: 'Score',
|
axisTick: {
|
||||||
type: 'bar',
|
alignWithLabel: true,
|
||||||
barWidth: '60%',
|
},
|
||||||
data: [10, 52, 200, 334, 390, 330, 220],
|
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 { 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 => {
|
||||||
tooltip: {
|
this.options = {
|
||||||
trigger: 'item',
|
backgroundColor: config.echartsBackgroundColor,
|
||||||
formatter: '{a} <br/>{b} : {c}',
|
color: [config.echartsLineColor1, config.echartsLineColor2, config.echartsLineColor3],
|
||||||
},
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
legend: {
|
formatter: '{a} <br/>{b} : {c}',
|
||||||
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',
|
|
||||||
},
|
},
|
||||||
},
|
legend: {
|
||||||
},
|
left: 'left',
|
||||||
|
data: ['Line 1', 'Line 2', 'Line 3'],
|
||||||
grid: {
|
textStyle: {
|
||||||
left: '3%',
|
color: config.echartsLineLegendTextColor,
|
||||||
right: '4%',
|
},
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
yAxis: {
|
|
||||||
type: 'log',
|
|
||||||
name: 'y',
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: 'white',
|
|
||||||
},
|
},
|
||||||
},
|
xAxis: {
|
||||||
},
|
type: 'category',
|
||||||
|
name: 'x',
|
||||||
series: [{
|
splitLine: { show: false },
|
||||||
name: 'Line 1',
|
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
|
||||||
type: 'line',
|
axisLine: {
|
||||||
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669],
|
lineStyle: {
|
||||||
}, {
|
color: config.echartsLineXAxisLineColor,
|
||||||
name: 'Line 2',
|
},
|
||||||
type: 'line',
|
},
|
||||||
data: [1, 2, 4, 8, 16, 32, 64, 128, 256],
|
},
|
||||||
}, {
|
grid: {
|
||||||
name: 'Line 3',
|
left: '3%',
|
||||||
type: 'line',
|
right: '4%',
|
||||||
data: [1 / 2, 1 / 4, 1 / 8, 1 / 16, 1 / 32, 1 / 64, 1 / 128, 1 / 256, 1 / 512],
|
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 { Component } from '@angular/core';
|
||||||
|
import { NgaThemeService } from '@akveo/nga-theme';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-echarts-multiple-xaxis',
|
selector: 'ngx-echarts-multiple-xaxis',
|
||||||
|
|
@ -7,111 +8,133 @@ 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,
|
||||||
|
];
|
||||||
|
|
||||||
tooltip: {
|
this.options = {
|
||||||
trigger: 'none',
|
backgroundColor: config.echartsBackgroundColor,
|
||||||
axisPointer: {
|
color: colors,
|
||||||
type: 'cross',
|
tooltip: {
|
||||||
},
|
trigger: 'none',
|
||||||
},
|
axisPointer: {
|
||||||
legend: {
|
type: 'cross',
|
||||||
data: ['2015 降水量', '2016 降水量'],
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: 70,
|
|
||||||
bottom: 50,
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
axisTick: {
|
|
||||||
alignWithLabel: true,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
onZero: false,
|
|
||||||
lineStyle: {
|
|
||||||
color: this.colors[1],
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
axisPointer: {
|
legend: {
|
||||||
label: {
|
data: ['2015 Precipitation', '2016 Precipitation'],
|
||||||
formatter: function(params) {
|
textStyle: {
|
||||||
return '降水量 ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
|
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',
|
|
||||||
],
|
],
|
||||||
},
|
series: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
name: '2015 Precipitation',
|
||||||
axisTick: {
|
type: 'line',
|
||||||
alignWithLabel: true,
|
xAxisIndex: 1,
|
||||||
},
|
smooth: true,
|
||||||
axisLine: {
|
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],
|
||||||
onZero: false,
|
|
||||||
lineStyle: {
|
|
||||||
color: this.colors[0],
|
|
||||||
},
|
},
|
||||||
},
|
{
|
||||||
axisPointer: {
|
name: '2016 Precipitation',
|
||||||
label: {
|
type: 'line',
|
||||||
formatter: params => {
|
smooth: true,
|
||||||
return '降水量 ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
|
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 { 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,
|
||||||
tooltip: {
|
color: [
|
||||||
trigger: 'item',
|
config.echartsPieColor1,
|
||||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
config.echartsPieColor2,
|
||||||
},
|
config.echartsPieColor3,
|
||||||
|
config.echartsPieColor4,
|
||||||
legend: {
|
config.echartsPieColor5,
|
||||||
orient: 'vertical',
|
],
|
||||||
left: 'left',
|
tooltip: {
|
||||||
data: ['USA', 'Germany', 'France', 'Canada', 'Russia'],
|
trigger: 'item',
|
||||||
textStyle: {
|
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||||
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)',
|
|
||||||
},
|
},
|
||||||
},
|
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 { 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 => {
|
||||||
tooltip: {},
|
this.options = {
|
||||||
legend: {
|
backgroundColor: config.echartsBackgroundColor,
|
||||||
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
|
color: [config.echartsRadarColor1, config.echartsRadarColor2],
|
||||||
},
|
tooltip: {},
|
||||||
radar: {
|
legend: {
|
||||||
// shape: 'circle',
|
data: ['Allocated Budget', 'Actual Spending'],
|
||||||
indicator: [
|
textStyle: {
|
||||||
{ name: '销售（sales）', max: 6500 },
|
color: config.echartsRadarLegendTextColor,
|
||||||
{ 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）',
|
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
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: 'Budget vs Spending',
|
||||||
name: '实际开销（Actual 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