@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
772 lines (771 loc) • 18.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.cssVariable = void 0;
var lodash_1 = require("lodash");
var constants_1 = require("../../constants");
var constant_1 = require("../../components/Base/Mapbox/mapThemeStyle/constant");
var constant_2 = require("./constant");
var echartsTheme = {
color: [
// 必填
'#2FD6E4',
'#67CF6C',
'#FFC92C',
'#F96459',
'#A064E9',
'#3EBDEF',
'#FFAB36',
'#1F9493',
'#FF98C3',
'#25ABB6',
'#5CB960',
'#E5B427',
'#DF594F',
'#8F59D1',
'#37A9D6',
'#E59930'
],
twodColor: [
'#33C8EF',
'#28B8BB',
'#C2E643',
'#FBCA46',
'#FB834D',
'#EB7DC1',
'#B571F7',
'#819FF7',
'#00AAE7',
'#59D1D3',
'#A0D911',
'#FAAD14',
'#FA541C',
'#E14E9F',
'#8C41F4',
'#5272F4'
],
backgroundColor: 'rgba(252,252,252,0)',
textStyle: {
fontFamily: constant_2.fontFamily,
fontSize: 12
},
title: {
textStyle: {
color: '#94A5B1'
},
subtextStyle: {
color: '#999999'
}
},
line: {
itemStyle: {
borderWidth: 2
},
lineStyle: {
width: 2
},
markLine: {
lineStyle: {
type: 'dashed'
}
},
showAllSymbol: true,
symbolSize: 8,
symbol: constants_1.EShape.circle,
smooth: false,
showSymbol: false
},
radar: {
splitNumber: 4,
splitArea: {
show: false
},
axisLine: {
lineStyle: {
width: 1,
color: ['#394F5E']
}
},
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'dashed',
color: ['#394F5E']
}
},
shape: 'polygon',
lineStyle: {
width: 2
},
areaStyle: {
opacity: 0.3
},
name: {
textStyle: {
color: '#D1DEE5',
fontSize: 12
}
},
symbolSize: 0,
symbol: 'emptyCircle',
smooth: false
},
bar: {
symbol: constants_1.EShape.circle
},
pie: {
itemStyle: {
borderColor: '#041925'
},
label: {
color: '#9DB2D7'
}
},
sankey: {
color: [
'#25ABB6',
'#5CB960',
'#E5B427',
'#DF594F',
'#8F59D1',
'#37A9D6',
'#E59930',
'#1B8484',
'#E588AF',
'#2FD6E4',
'#67CF6C',
'#FFC92C',
'#F96459',
'#A064E9',
'#3EBDEF',
'#FFAB36',
'#1F9493',
'#FF98C3',
'#2FD6E4',
'#85D889',
'#FFD356',
'#FA837A',
'#B383ED',
'#51C3F0',
'#FFBB5E',
'#4BA9A8',
'#FFACCF'
],
grid: {
width: '100%',
left: 'center'
},
label: {
color: '#D1DEE5',
fontSize: 12
},
itemStyle: {
borderWidth: 0,
width: 50
},
lineStyle: {
opacity: 0.2
},
emphasis: {
itemStyle: {
borderWidth: 0
}
}
},
gauge: {
title: {
color: '#D1DEE5',
fontSize: 20,
fontWeight: 'normal',
fontFamily: constant_2.fontFamily,
offsetCenter: [0, 20]
},
detail: {
color: '#fff',
fontSize: 40,
fontWeight: 'bold',
fontFamily: constant_2.fontFamily,
offsetCenter: [0, -15]
},
axisTick: {
lineStyle: { color: '#394F5E', width: 1 },
length: 3
},
axisLabel: { color: '#94A5B1', fontSize: 12 },
splitLine: {
length: 6,
lineStyle: { color: '#394F5E', width: 1 }
},
splitNumber: 8,
axisLine: {
lineStyle: {
width: 30
}
}
},
graph: {
itemStyle: {
borderWidth: 0,
color: '#2fd6e4'
},
lineStyle: {
width: 1,
curveness: 0.5
},
symbolSize: 14,
symbol: 'circle',
smooth: false,
label: {
show: true,
color: '#D1DEE5',
fontSize: 10,
position: 'bottom'
},
emphasis: {
label: {
color: '#D1DEE5',
fontSize: 10
}
}
},
sunburst: {
itemStyle: {
borderWidth: 1,
borderColor: '#041925'
},
radius: ['15%', '85%'],
label: {
rotate: 'radial',
align: 'center',
padding: 3,
silent: false,
color: '#ffffff',
show: true
}
},
map: {
label: {
color: '#061E2B'
},
itemStyle: {
areaColor: '#394F5E',
borderColor: '#142b3b',
borderWidth: 0.5
},
emphasis: {
itemStyle: {
areaColor: '#41C5C7',
borderColor: '#394f5e',
borderWidth: 1
},
label: {
color: '#061E2B'
}
}
},
geo: {
itemStyle: {
areaColor: '#394F5E',
borderColor: '#142b3b',
borderWidth: 0.5
},
label: {
color: '#D1DEE5'
},
emphasis: {
itemStyle: {
color: '#41C5C7'
},
label: {
color: '#D1DEE5'
}
}
},
scatter: {
itemStyle: {
shadowColor: 'hsla(185,77%,15%,1)',
color: '#2FD6E4',
shadowBlur: 10
},
label: {
color: '#D1DEE5',
position: 'right'
},
thresholdColor: ['#FA541C', '#4BC310']
},
effectScatter: {
itemStyle: {
shadowColor: 'hsla(185,77%,15%,1)',
color: '#2FD6E4',
shadowBlur: 10
},
label: {
color: '#D1DEE5',
position: 'right'
}
},
categoryAxis: {
triggerEvent: false,
nameLocation: 'center',
nameTextStyle: {
color: '#394F5E',
fontSize: 12
},
axisLine: {
show: true,
lineStyle: {
color: '#394F5E',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#94A5B1',
fontFamily: constant_2.fontFamily,
fontSize: 12,
fontWeight: 'normal'
}
},
splitLine: {
show: false
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
}
}
},
valueAxis: {
triggerEvent: true,
nameLocation: 'center',
nameTextStyle: {
color: '#394F5E',
fontSize: 12
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#94A5B1',
fontFamily: constant_2.fontFamily,
fontSize: 12,
fontWeight: 'normal'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#394F5E',
type: 'dashed'
}
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
}
}
},
logAxis: {
triggerEvent: true,
nameLocation: 'center',
nameTextStyle: {
color: '#394F5E',
fontSize: 12
},
axisLine: {
show: true,
lineStyle: {
color: '#394F5E',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#94A5B1',
fontFamily: constant_2.fontFamily,
fontSize: 12,
fontWeight: 'normal'
}
},
splitLine: {
show: false
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
}
}
},
timeAxis: {
triggerEvent: true,
nameLocation: 'center',
nameTextStyle: {
color: '#394F5E',
fontSize: 12
},
axisLine: {
show: true,
lineStyle: {
color: '#394F5E',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#94A5B1',
fontFamily: constant_2.fontFamily,
fontSize: 12,
fontWeight: 'normal'
}
},
splitLine: {
show: false
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
}
}
},
tooltip: {
trigger: 'axis',
enterable: true,
confine: true,
extraCssText: "box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.16)",
backgroundColor: '#142B3B',
borderColor: 'rgba(0, 0, 0, 0.16)',
textStyle: {
color: '#D1DEE5'
},
axisPointer: {
lineStyle: {
color: '#D1DEE5',
width: 1
},
shadowStyle: {
color: 'rgba(0, 0, 0, 0.16)'
},
label: {
color: '#00AAE7',
fontSize: 14,
fontFamily: constant_2.fontFamily,
backgroundColor: 'rgba(0,0,0,0.08)',
shadowColor: 'rgba(0, 0, 0, .08)',
shadowOffsetY: 2,
shadowBlur: 4
},
crossStyle: {
color: '#D1DEE5',
type: 'solid'
}
}
},
visualMap: {
color: constant_2.visualMapColors.eleganceGreen,
textStyle: {
color: '#FFFFFF',
fontSize: 12
},
itemWidth: 16,
itemHeight: 140
},
toolbox: {
emphasis: {
iconStyle: {
borderColor: '#2c6dd2'
}
}
}
};
var customerTheme = {
themeColor: '#041925',
cssColor: {
backgroundColor: '#fff'
},
legend: {
textStyle: {
color: '#D1DEE5'
},
inactiveColor: '#394F5E'
},
statusPanel: {
color: [
'#FB834D',
'#FBCA46',
'#C2E643',
'#00AAE7',
'#EB7DC1',
'#B571F7',
'#819FF7'
],
inverseBgColor: '#59D1D3',
inverseColor: '#fff',
title: {
fontSize: 16,
lineHeight: 24
},
itemStyle: {
width: 184,
height: 148,
fontSize: 12,
lineHeight: 20,
color: '#D1DEE5'
},
borderStyle: {
color: '#394F5E',
width: 1,
radius: 4
}
},
line: {
thresholdColor: ['#FA541C', '#4BC310'],
outlier: {
errorColor: '#fa6464'
}
},
bar: {
color: [
'#33C8EF',
'#28B8BB',
'#C2E643',
'#FBCA46',
'#FB834D',
'#EB7DC1',
'#B571F7',
'#819FF7',
'#00AAE7',
'#59D1D3',
'#A0D911',
'#FAAD14',
'#FA541C',
'#E14E9F',
'#8C41F4',
'#5272F4'
],
thresholdColor: ['#FA541C', '#4BC310'],
capsuleBar: {
backgroundBarColor: '#142B3B'
}
},
pie: {
basic: {
borderWidth: 1
},
ring: {
borderWidth: 0
},
rose: {
borderWidth: 0
},
color: [
'#25ABB6',
'#5CB960',
'#E5B427',
'#DF594F',
'#8F59D1',
'#37A9D6',
'#E59930',
'#1B8484',
'#E588AF',
'#2FD6E4',
'#67CF6C',
'#FFC92C',
'#F96459',
'#A064E9',
'#3EBDEF',
'#FFAB36'
]
},
gauge: {
axisLineBackgroundColor: '#394F5E',
singleValue: {
backgroundColors: '#041925',
color: [
'#59D1D3',
'#FB834D',
'#FBCA46',
'#C2E643',
'#00AAE7',
'#EB7DC1',
'#B571F7',
'#819FF7'
],
titleStyle: {
fontSize: 40,
fontFamily: constant_2.fontFamily,
fontWeight: 'normal',
inverseColor: '#fff'
},
trendNumberStyle: {
fontSize: 14,
fontFamily: constant_2.fontFamily,
fontWeight: 'normal',
color: 'rgba(255,255,255,0.60)'
},
prefixStyle: {
fontSize: 12,
fontFamily: constant_2.fontFamily,
fontWeight: 'normal',
color: '#fff'
},
suffixStyle: {
fontSize: 12,
fontFamily: constant_2.fontFamily,
fontWeight: 'normal',
color: '#fff'
},
upIconStyle: {
color: '#FA541C',
type: 'arrow-up'
},
downIconStyle: {
color: '#A0D911',
type: 'arrow-down'
},
equalIconStyle: {
color: 'RGBA(141, 145, 153, 1)',
type: 'minus'
}
},
singleGauge: {
color: [
'#59D1D3',
'#FB834D',
'#FBCA46',
'#C2E643',
'#00AAE7',
'#EB7DC1',
'#B571F7',
'#819FF7'
],
radiusRatio: 2.5
},
singlePercent: {
color: [
'#00AAE7',
'#FB834D',
'#FBCA46',
'#C2E643',
'#59D1D3',
'#EB7DC1',
'#B571F7',
'#819FF7'
]
}
},
mapbox: {
bubbleStyle: {
color: '#2FD6E4',
minSize: 5,
maxSize: 30
},
lineStyle: {
color: '#2FD6E4',
width: 6,
bubbleSize: 16
},
theme: constant_1.MapboxThemeTypes.EleganceGreen
},
effectScatter: {
color: ['#2FD6E4', '#2FD6E4'],
selectColors: constant_2.visualMapColors.eleganceGreen
},
table: {
tableTitle: {
fontFamily: constant_2.fontFamily,
fontWeight: 'bold',
fontSize: 12,
color: '#FFFFFF',
backgroundColor: '#142B3B'
},
color: '#FFFFFF',
rowBackgroundColor: '#142B3B',
backgroundColor: '#041925',
border: {
color: '#394f5e',
width: 1,
type: 'solid',
show: false,
fontSize: 7
}
},
sunburst: {
color: constant_2.gradientColorsEleganceGreen
},
timeline: {
chartBackGround: '#041925',
eventBackGround: 'rgba(47,214,228,1)',
fontColor: '#2FD6E4'
},
thresholdColors: constant_2.thresholdColors,
cssVariable: {
'--themeColor': '#105feb',
'--selectPopoverHoverColor': 'rgba(44, 109, 210, 0.05)',
'--scrollBarColor': '#394F5E',
'--dashbordDashColor': 'rgba(44, 108, 210, 0.8)',
'--dashboardBg': '#001219',
'--dashboardBlockBg': '#041925',
'--operationBarTitleColor': '#FFFFFF',
'--dashboardBorderCorder': '#394F5E',
'--dashboardColor': '#D1DEE5',
'--dashboardDisableColor': '#394f5e',
'--dashboardDisableBack': '#142b3b',
'--layoutDeleteBarBg': 'rgba(51,149,237,0.15)',
'--variableIconColor': '#94A5B1',
'--selectionChoiceBg': '#142B3B',
'--titlebarColor': '#FFFFFF',
'--timeRangeColor': '#94A5B1',
'--tooltipBgColor': '#142B3B',
'--nodataIconShadow': '#162b3b',
'--nodataIconPath': '#344857',
'--nodataIconBoxFill': '#071e2b',
'--nodataDescColor': '#344857',
'--legendTitleheader': '#FFFFFF',
'--legendItemvalue': '#D1DEE5',
'--legendSorter': '#394F5E',
'--paginationBorderColor': '#394F5E',
'--paginationColor': '#D1DEE5',
'--evenRowBg': '#061e2b',
'--subTableTitleBg': '#142b3b',
'--tableBorder': '#394f5e',
'--timelineBorderColor': '#394f5e',
'--timelineHeadBackgroundColor': '#142B3B',
'--timelineBackgroundColor': ' #041925',
'--timelineColor': '#fff',
'--timelineItemColor': '#2FD6E4',
'--timelineItemBackgroundColor': 'rgba(47,214,228,0.25)',
'--carouselBtnBgActive': '#94A5B1',
'--carouselBtnBg': '#394F5E',
'--splEditorKeyword': '#859900',
'--splEditorSplKeyword': '#859900',
'--splEditorStr': '#268bd2',
'--splEditorVar': '#74b0df',
'--splEditorFunc': '#d4d4d4',
'--splEditorNormal': '#d4d4d4',
'--splEditorCursor': '#ffffff'
}
};
var theme = lodash_1.merge(echartsTheme, customerTheme);
exports.default = theme;
exports.cssVariable = customerTheme.cssVariable;