mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
refactor(charts): register custom js-themes for charts
This commit is contained in:
Dmitry Nehaychik
parent
be69ccc058
commit
33da370ab5
5 changed files with 464 additions and 399 deletions
|
|
@ -3,31 +3,22 @@ import { CommonModule } from '@angular/common';
|
|||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
import {
|
||||
NgaThemeModule,
|
||||
NgaActionsModule,
|
||||
NgaCardModule,
|
||||
NgaLayoutModule,
|
||||
NgaTabsetModule,
|
||||
NgaRouteTabsetModule,
|
||||
NgaSidebarModule,
|
||||
NgaMenuModule,
|
||||
NgaUserModule,
|
||||
NgaActionsModule,
|
||||
NgaRouteTabsetModule,
|
||||
NgaSearchModule,
|
||||
NgaSidebarModule,
|
||||
NgaTabsetModule,
|
||||
NgaThemeModule,
|
||||
NgaUserModule,
|
||||
} from '@akveo/nga-theme';
|
||||
|
||||
import {
|
||||
HeaderComponent,
|
||||
FooterComponent,
|
||||
SearchInputComponent,
|
||||
TinyMCEComponent,
|
||||
} from './components';
|
||||
import { FooterComponent, HeaderComponent, SearchInputComponent, TinyMCEComponent } from './components';
|
||||
|
||||
|
||||
import {
|
||||
CapitalizePipe,
|
||||
PluralPipe,
|
||||
RoundPipe,
|
||||
} from './pipes';
|
||||
import { CapitalizePipe, PluralPipe, RoundPipe } from './pipes';
|
||||
|
||||
import { OneColumnLayoutComponent } from './layouts';
|
||||
|
||||
|
|
@ -64,7 +55,70 @@ const PIPES = [
|
|||
];
|
||||
|
||||
const NGA_THEME_PROVIDERS = [
|
||||
...NgaThemeModule.forRoot({ name: 'cosmic' }).providers,
|
||||
...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',
|
||||
},
|
||||
},
|
||||
{
|
||||
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)',
|
||||
},
|
||||
},
|
||||
],
|
||||
).providers,
|
||||
...NgaSidebarModule.forRoot().providers,
|
||||
...NgaSidebarModule.forRoot().providers,
|
||||
...NgaMenuModule.forRoot().providers,
|
||||
|
|
|
|||
|
|
@ -1,17 +1,21 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
|
||||
declare const echarts: any;
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-electricity-chart',
|
||||
styleUrls: ['./electricity-chart.component.scss'],
|
||||
template: `
|
||||
<div echarts [options]='options' class='echart'></div>
|
||||
<div echarts [options]="option" class="echart"></div>
|
||||
`,
|
||||
})
|
||||
export class ElectricityChartComponent implements OnInit {
|
||||
export class ElectricityChartComponent {
|
||||
|
||||
options: any;
|
||||
option: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
|
||||
ngOnInit() {
|
||||
const points = [490, 490, 495, 500, 505, 510, 520, 530, 550, 580, 630,
|
||||
720, 800, 840, 860, 870, 870, 860, 840, 800, 720, 200, 145, 130, 130,
|
||||
145, 200, 570, 635, 660, 670, 670, 660, 630, 580, 460, 380, 350, 340,
|
||||
|
|
@ -22,137 +26,139 @@ export class ElectricityChartComponent implements OnInit {
|
|||
value: p,
|
||||
}));
|
||||
|
||||
this.options = {
|
||||
grid: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 80,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
},
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
this.option = {
|
||||
grid: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 80,
|
||||
},
|
||||
position: 'top',
|
||||
backgroundColor: 'rgba(0, 255, 170, 0.35)',
|
||||
borderColor: '#00f9a6',
|
||||
borderWidth: 3,
|
||||
formatter: '{c0} kWh',
|
||||
extraCssText: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px;padding: 5px 20px;',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
offset: 25,
|
||||
data: data.map(i => i.label),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#a1a1e5',
|
||||
fontSize: 18,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#a1a1e5',
|
||||
opacity: 0.3,
|
||||
width: '2',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
boundaryGap: [0, '5%'],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#a1a1e5',
|
||||
opacity: 0.2,
|
||||
width: '1',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0,
|
||||
},
|
||||
emphasis: {
|
||||
color: 'white',
|
||||
borderWidth: 0,
|
||||
opacity: 1,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 6,
|
||||
type: 'dotted',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#00ffaa',
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#fff835 ',
|
||||
}]),
|
||||
shadowColor: 'rgba(14, 16, 48, 0.4)',
|
||||
shadowBlur: 6,
|
||||
shadowOffsetY: 12,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(188, 92, 255, 0.5)',
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(188, 92, 255, 0)',
|
||||
}]),
|
||||
},
|
||||
},
|
||||
data: data.map(i => i.value),
|
||||
position: 'top',
|
||||
backgroundColor: config.trafficTooltipBg,
|
||||
borderColor: config.colorSuccess,
|
||||
borderWidth: 3,
|
||||
formatter: '{c0} kWh',
|
||||
extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
offset: 25,
|
||||
data: data.map(i => i.label),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: config.electricityAxisColor,
|
||||
fontSize: 18,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: config.electricityAxisColor,
|
||||
opacity: 0.3,
|
||||
width: '2',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
boundaryGap: [0, '5%'],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: config.electricityAxisColor,
|
||||
opacity: 0.2,
|
||||
width: '1',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0,
|
||||
},
|
||||
emphasis: {
|
||||
color: 'white',
|
||||
borderWidth: 0,
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 6,
|
||||
type: 'dotted',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: config.electricityLineGradFrom,
|
||||
}, {
|
||||
offset: 1,
|
||||
color: config.electricityLineGradTo,
|
||||
}]),
|
||||
shadowColor: config.electricityLineShadow,
|
||||
shadowBlur: 6,
|
||||
shadowOffsetY: 12,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: config.electricityAreaGradFrom,
|
||||
}, {
|
||||
offset: 1,
|
||||
color: config.electricityAreaGradTo,
|
||||
}]),
|
||||
},
|
||||
},
|
||||
data: data.map(i => i.value),
|
||||
},
|
||||
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 6,
|
||||
type: 'dotted',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#00ffaa',
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#fff835 ',
|
||||
}]),
|
||||
shadowColor: 'rgb(166, 149, 255)',
|
||||
shadowBlur: 14,
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 6,
|
||||
type: 'dotted',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: config.electricityLineGradFrom,
|
||||
}, {
|
||||
offset: 1,
|
||||
color: config.electricityLineGradTo,
|
||||
}]),
|
||||
shadowColor: config.trafficShadowLineDarkBg,
|
||||
shadowBlur: 14,
|
||||
},
|
||||
},
|
||||
data: data.map(i => i.value),
|
||||
},
|
||||
data: data.map(i => i.value),
|
||||
},
|
||||
],
|
||||
};
|
||||
],
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,146 +18,147 @@ declare const echarts: any;
|
|||
})
|
||||
export class SolarComponent {
|
||||
|
||||
option: any = {};
|
||||
|
||||
@Input('chartValue')
|
||||
set chartValue (value: number) {
|
||||
set chartValue(value: number) {
|
||||
this.option.series[0].data[0].value = value;
|
||||
this.option.series[0].data[1].value = 100 - value;
|
||||
this.option.series[1].data[0].value = value;
|
||||
}
|
||||
|
||||
option: any = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: ' ',
|
||||
clockWise: true,
|
||||
hoverAnimation: false,
|
||||
type: 'pie',
|
||||
center: ['35%', '50%'],
|
||||
radius: ['70%', '90%'],
|
||||
data: [
|
||||
{
|
||||
value: 72,
|
||||
name: ' ',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'center',
|
||||
formatter: '{d}%',
|
||||
textStyle: {
|
||||
fontSize: '22',
|
||||
fontFamily: 'Exo',
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#7bff24',
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#2ec7fe',
|
||||
}]),
|
||||
shadowColor: '#19977E',
|
||||
shadowBlur: 0,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 3,
|
||||
},
|
||||
},
|
||||
hoverAnimation: false,
|
||||
},
|
||||
{
|
||||
value: 28,
|
||||
name: ' ',
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inner',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: ' ',
|
||||
clockWise: true,
|
||||
hoverAnimation: false,
|
||||
type: 'pie',
|
||||
center: ['35%', '50%'],
|
||||
radius: ['70%', '90%'],
|
||||
data: [
|
||||
{
|
||||
value: 72,
|
||||
name: ' ',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inner',
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#7bff24',
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#2ec7fe',
|
||||
}]),
|
||||
shadowColor: 'rgba(0, 217, 119, 0.3)',
|
||||
shadowBlur: 7,
|
||||
},
|
||||
},
|
||||
hoverAnimation: false,
|
||||
},
|
||||
{
|
||||
value: 28,
|
||||
name: ' ',
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inner',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const option = Object.assign({}, this.option);
|
||||
|
||||
option.series[0].data[1].itemStyle.normal.color = config.layoutBg;
|
||||
option.series[0].data[0].label.normal.textStyle.color = config.colorFgHeading;
|
||||
option.series[0].data[0].label.normal.textStyle.fontFamily = config.fontSecondary;
|
||||
|
||||
this.option = option;
|
||||
this.option = Object.assign({}, {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: ' ',
|
||||
clockWise: true,
|
||||
hoverAnimation: false,
|
||||
type: 'pie',
|
||||
center: ['35%', '50%'],
|
||||
radius: ['70%', '90%'],
|
||||
data: [
|
||||
{
|
||||
value: 72,
|
||||
name: ' ',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'center',
|
||||
formatter: '{d}%',
|
||||
textStyle: {
|
||||
fontSize: '22',
|
||||
fontFamily: config.fontSecondary,
|
||||
color: config.colorFgHeading,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: config.tempColorGreen,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: config.tempColorBlue,
|
||||
},
|
||||
]),
|
||||
shadowColor: config.solarColorDarkGreen,
|
||||
shadowBlur: 0,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 3,
|
||||
},
|
||||
},
|
||||
hoverAnimation: false,
|
||||
},
|
||||
{
|
||||
value: 28,
|
||||
name: ' ',
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inner',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: config.layoutBg,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: ' ',
|
||||
clockWise: true,
|
||||
hoverAnimation: false,
|
||||
type: 'pie',
|
||||
center: ['35%', '50%'],
|
||||
radius: ['70%', '90%'],
|
||||
data: [
|
||||
{
|
||||
value: 72,
|
||||
name: ' ',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inner',
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: config.tempColorGreen,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: config.tempColorBlue,
|
||||
},
|
||||
]),
|
||||
shadowColor: 'rgba(0, 217, 119, 0.3)',
|
||||
shadowBlur: 7,
|
||||
},
|
||||
},
|
||||
hoverAnimation: false,
|
||||
},
|
||||
{
|
||||
value: 28,
|
||||
name: ' ',
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inner',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,12 @@
|
|||
<div class="slider-container">
|
||||
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
|
||||
[min]="12" [max]="30" [disableArcColor]="themeConfig.layoutBg"
|
||||
[fillColors]="['#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59']">
|
||||
[fillColors]="[
|
||||
themeConfig.tempColorBlue,
|
||||
themeConfig.tempColorLightBlue,
|
||||
themeConfig.tempColorGreen,
|
||||
themeConfig.tempColorYellow,
|
||||
themeConfig.tempColorOrange]">
|
||||
|
||||
<div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }">
|
||||
<div class="value temperature">
|
||||
|
|
@ -41,7 +46,12 @@
|
|||
<div class="slider-container">
|
||||
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
|
||||
[min]="0" [max]="100" [disableArcColor]="themeConfig.layoutBg"
|
||||
[fillColors]="['#fff024', '#7bff24', '#31ffad', '#2ec7fe']">
|
||||
[fillColors]="[
|
||||
themeConfig.tempColorBlue,
|
||||
themeConfig.tempColorLightBlue,
|
||||
themeConfig.tempColorGreen,
|
||||
themeConfig.tempColorYellow,
|
||||
themeConfig.tempColorOrange]">
|
||||
|
||||
<div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">
|
||||
<div class="value humidity">
|
||||
|
|
|
|||
|
|
@ -20,129 +20,123 @@ const data = points.map((p, index) => ({
|
|||
})
|
||||
export class TrafficComponent {
|
||||
|
||||
option = {
|
||||
grid: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: data.map(i => i.label),
|
||||
},
|
||||
yAxis: {
|
||||
boundaryGap: [0, '5%'],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#000000',
|
||||
opacity: 0.06,
|
||||
width: '1',
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
position: 'top',
|
||||
backgroundColor: 'rgba(0, 255, 170, 0.35)',
|
||||
borderColor: '#00f9a6',
|
||||
borderWidth: 3,
|
||||
formatter: '{c0} MB',
|
||||
extraCssText: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px;padding: 5px 20px;',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
sampling: 'average',
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(146, 141, 255, 0.5)',
|
||||
},
|
||||
emphasis: {
|
||||
color: 'rgba(0,0,0,0)',
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: 'rgba(146, 141, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
data: data.map(i => i.value - 15),
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
sampling: 'average',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#bdbaff',
|
||||
borderColor: 'white',
|
||||
borderWidth: 2,
|
||||
shadowColor: 'rgba(33, 7, 77, 0.5)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: -3,
|
||||
shadowBlur: 10,
|
||||
},
|
||||
emphasis: {
|
||||
color: 'white',
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
borderWidth: 5,
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: '#bdbaff',
|
||||
shadowColor: 'rgb(166, 149, 255)',
|
||||
shadowBlur: 14,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(118, 89, 255, 0.4)',
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(164, 84, 255, 0.5)',
|
||||
}]),
|
||||
},
|
||||
},
|
||||
data: data.map(i => i.value),
|
||||
},
|
||||
],
|
||||
};
|
||||
option: any = {};
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
// const option = Object.assign({}, this.option);
|
||||
//
|
||||
// option.series[0].data[1].itemStyle.normal.color = config.layoutBg;
|
||||
// option.series[0].data[0].label.normal.textStyle.color = config.colorFgHeading;
|
||||
// option.series[0].data[0].label.normal.textStyle.fontFamily = config.fontSecondary;
|
||||
//
|
||||
// this.option = option;
|
||||
this.option = Object.assign({}, {
|
||||
grid: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: data.map(i => i.label),
|
||||
},
|
||||
yAxis: {
|
||||
boundaryGap: [0, '5%'],
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: config.trafficColorBlack,
|
||||
opacity: 0.06,
|
||||
width: '1',
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
position: 'top',
|
||||
backgroundColor: config.trafficTooltipBg,
|
||||
borderColor: config.colorSuccess,
|
||||
borderWidth: 3,
|
||||
formatter: '{c0} MB',
|
||||
extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
sampling: 'average',
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: config.trafficLineBg,
|
||||
},
|
||||
emphasis: {
|
||||
color: 'rgba(0,0,0,0)',
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: config.trafficLineBg,
|
||||
},
|
||||
},
|
||||
data: data.map(i => i.value - 15),
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
sampling: 'average',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: config.trafficShadowLineBg,
|
||||
borderColor: 'white',
|
||||
borderWidth: 2,
|
||||
shadowColor: config.trafficShadowLineShadow,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: -3,
|
||||
shadowBlur: 10,
|
||||
},
|
||||
emphasis: {
|
||||
color: 'white',
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
borderWidth: 5,
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: config.trafficLineBg,
|
||||
shadowColor: config.trafficShadowLineDarkBg,
|
||||
shadowBlur: 14,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: config.trafficGradFrom,
|
||||
}, {
|
||||
offset: 1,
|
||||
color: config.trafficGradTo,
|
||||
}]),
|
||||
},
|
||||
},
|
||||
data: data.map(i => i.value),
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue