@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
769 lines (768 loc) • 18.7 kB
JavaScript
import { merge } from 'lodash';
import { EShape } from '../../constants';
import { MapboxThemeTypes } from '../../components/Base/Mapbox/mapThemeStyle/constant';
import { gradientColors, thresholdColors, fontFamily, visualMapColors } from './constant';
var echartsTheme = {
color: [
'#33C8EF',
'#28B8BB',
'#A0D911',
'#FAAD14',
'#FA541C',
'#E14E9F',
'#8C41F4',
'#5272F4',
'#00AAE7',
'#59D1D3',
'#C2E643',
'#FBCA46',
'#FB834D',
'#EB7DC1',
'#B571F7',
'#819FF7'
],
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: fontFamily,
fontSize: 12
},
title: {
textStyle: {
color: '#666666'
},
subtextStyle: {
color: '#999999'
}
},
line: {
itemStyle: {
borderWidth: 2
},
lineStyle: {
width: 2
},
markLine: {
lineStyle: {
type: 'dashed'
}
},
symbolSize: 8,
symbol: EShape.circle,
smooth: false,
showSymbol: false,
showAllSymbol: true
},
radar: {
color: [
'#00AAE7',
'#FA541C',
'#FAAD14',
'#A0D911',
'#28B8BB',
'#E14E9F',
'#8C41F4',
'#5272F4',
'#33C8EF',
'#FB834D',
'#FBCA46',
'#C2E643',
'#59D1D3',
'#EB7DC1',
'#B571F7',
'#819FF7'
],
splitNumber: 4,
splitArea: {
show: false
},
axisLine: {
lineStyle: {
width: 1,
color: ['#42526e']
}
},
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'dashed',
color: ['#42526e']
}
},
shape: 'polygon',
lineStyle: {
width: 2
},
areaStyle: {
opacity: 0.3
},
name: {
textStyle: {
color: '#9DB2D7',
fontSize: 12
}
},
symbolSize: 0,
symbol: 'emptyCircle',
smooth: false
},
bar: {
symbol: EShape.circle
},
pie: {
itemStyle: {
borderColor: '#242C3B'
},
label: {
color: '#9DB2D7'
}
},
sankey: {
color: [
'#1AB9EB',
'#FA6C34',
'#FABC2C',
'#B1DF2A',
'#41C5C7',
'#E566B0',
'#A159F6',
'#6A8AF6',
'#33C8EF',
'#FB834D',
'#FBCA46',
'#C2E643',
'#59D1D3',
'#EB7DC1',
'#B571F7',
'#819FF7',
'#00AAE7',
'#FA541C',
'#FAAD14',
'#A0D911',
'#28B8BB',
'#E14E9F',
'#8C41F4',
'#5272F4'
],
grid: {
width: '100%',
left: 'center'
},
label: {
color: '#9DB2D7',
fontSize: 12
},
itemStyle: {
borderWidth: 0,
width: 50
},
lineStyle: {
opacity: 0.2
},
emphasis: {
itemStyle: {
borderWidth: 0
}
}
},
gauge: {
title: {
color: '#9DB2D7',
fontSize: 20,
fontWeight: 'normal',
fontFamily: fontFamily,
offsetCenter: [0, 20]
},
detail: {
color: '#E6F0FF',
fontSize: 40,
fontWeight: 'bold',
fontFamily: fontFamily,
offsetCenter: [0, -15]
},
axisTick: {
lineStyle: { color: '#BFBFBF', width: 1 },
length: 3
},
axisLabel: { color: '#999999', fontSize: 12 },
splitLine: {
length: 6,
lineStyle: { color: '#BFBFBF', width: 1 }
},
splitNumber: 8,
axisLine: {
lineStyle: {
width: 30
}
}
},
graph: {
itemStyle: {
borderWidth: 0,
color: '#33C8EF'
},
lineStyle: {
width: 1,
curveness: 0.5
},
symbolSize: 14,
symbol: 'circle',
smooth: false,
label: {
show: true,
color: '#9DB2D7',
fontSize: 10,
position: 'bottom' // 文字位置
},
emphasis: {
label: {
color: '#9DB2D7',
fontSize: 10
}
}
},
sunburst: {
itemStyle: {
borderWidth: 1,
borderColor: '#242C3B'
},
radius: ['15%', '85%'],
label: {
rotate: 'radial',
align: 'center',
padding: 3,
silent: false,
color: '#ffffff',
show: true,
fontSize: 7
}
},
map: {
label: {
color: '#E6F0FF'
},
itemStyle: {
areaColor: '#42526E',
borderColor: '#273349',
borderWidth: 0.5
},
emphasis: {
itemStyle: {
areaColor: 'rgba(63,177,227,0.25)',
borderColor: '#3fb1e3',
borderWidth: 1
},
label: {
color: '#E6F0FF'
}
}
},
geo: {
itemStyle: {
areaColor: '#42526E',
borderColor: '#273349',
borderWidth: 0.5
},
label: {
color: 'rgb(63,177,227)'
},
emphasis: {
itemStyle: {
color: '#ffffff'
},
label: {
color: '#666666'
}
}
},
scatter: {
thresholdColor: ['#FA541C', '#4BC310'],
itemStyle: {
shadowColor: 'hsla(196,100%,15%,1)',
color: '#00a0e0',
shadowBlur: 10
},
label: {
color: '#9DB2D7',
position: 'right'
}
},
effectScatter: {
itemStyle: {
shadowColor: 'hsla(196,100%,15%,1)',
color: '#00a0e0',
shadowBlur: 10
},
label: {
color: '#9DB2D7',
position: 'right'
}
},
categoryAxis: {
triggerEvent: false,
nameLocation: 'center',
nameTextStyle: {
color: '#42526E',
fontSize: 12
},
axisLine: {
show: true,
lineStyle: {
color: '#42526E',
type: 'dashed'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#333'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#596F94',
fontFamily: 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: '#42526E',
fontSize: 12
},
axisLine: {
show: false
},
axisTick: {
show: false,
lineStyle: {
color: '#333'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#596F94',
fontFamily: fontFamily,
fontSize: 12,
fontWeight: 'normal'
}
},
splitLine: {
// 生效
show: true,
lineStyle: {
color: '#42526E',
type: 'dashed'
}
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
}
}
},
logAxis: {
triggerEvent: true,
nameLocation: 'center',
axisLine: {
show: true,
lineStyle: {
color: '#42526E',
type: 'dashed'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#333'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#596F94',
fontFamily: 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',
axisLine: {
show: true,
lineStyle: {
color: '#42526E',
type: 'dashed'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#333'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#596F94',
fontFamily: 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.2)",
backgroundColor: '#273349',
borderColor: 'rgba(0, 0, 0, 0.2)',
opacity: 1,
textStyle: {
color: '#9DB2D7'
},
axisPointer: {
lineStyle: {
color: '#9DB2D7',
width: 1
},
shadowStyle: {
color: 'rgba(66, 82, 110, 0.4)'
},
label: {
color: '#00AAE7',
fontSize: 14,
fontFamily: fontFamily,
backgroundColor: '#242C3B',
shadowColor: 'rgba(0, 0, 0, .08)',
shadowOffsetY: 2,
shadowBlur: 4
},
crossStyle: {
color: '#42526E',
type: 'solid'
}
}
},
visualMap: {
color: visualMapColors.dark,
textStyle: {
color: '#E6F0FF',
fontSize: 12
},
itemWidth: 16,
itemHeight: 140
},
toolbox: {
emphasis: {
iconStyle: {
borderColor: '#2c6dd2'
}
}
}
};
var customerTheme = {
themeColor: '#242C3B',
legend: {
textStyle: {
color: '#9DB2D7'
},
inactiveColor: '#42526E'
},
statusPanel: {
color: [
'#FB834D',
'#FBCA46',
'#C2E643',
'#59D1D3',
'#EB7DC1',
'#B571F7',
'#819FF7'
],
inverseBgColor: '#00AAE7',
inverseColor: '#fff',
title: {
fontSize: 16,
lineHeight: 24
},
itemStyle: {
width: 184,
height: 148,
fontSize: 12,
fontColor: '#fff',
lineHeight: 20,
color: '#9DB2D7'
},
borderStyle: {
color: '#42526E',
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: '#273349'
}
},
pie: {
basic: {
borderWidth: 1
},
ring: {
borderWidth: 0
},
rose: {
borderWidth: 0
}
},
gauge: {
axisLineBackgroundColor: '#273349',
singleValue: {
backgroundColors: '#232c3b',
color: [
'#33C8EF',
'#FA541C',
'#FAAD14',
'#A0D911',
'#28B8BB',
'#E14E9F',
'#8C41F4',
'#5272F4'
],
titleStyle: {
fontSize: 40,
fontFamily: fontFamily,
fontWeight: 'normal',
inverseColor: '#fff'
},
trendNumberStyle: {
fontSize: 14,
fontFamily: fontFamily,
fontWeight: 'normal',
color: 'rgba(230,240,255,0.6)'
},
prefixStyle: {
fontSize: 12,
fontFamily: fontFamily,
fontWeight: 'normal',
color: 'rgba(230,240,255,1)'
},
suffixStyle: {
fontSize: 12,
fontFamily: fontFamily,
fontWeight: 'normal',
color: 'rgba(230,240,255,1)'
},
upIconStyle: {
color: '#FA541C',
type: 'arrow-up'
},
downIconStyle: {
color: '#A0D911',
type: 'arrow-down'
},
equalIconStyle: {
color: 'RGBA(141, 145, 153, 1)',
type: 'minus'
}
},
singleGauge: {
color: [
'#00AAE7',
'#FA541C',
'#FAAD14',
'#A0D911',
'#28B8BB',
'#E14E9F',
'#8C41F4',
'#5272F4'
],
radiusRatio: 2.5
},
singlePercent: {
color: [
'#00AAE7',
'#FB834D',
'#FBCA46',
'#C2E643',
'#59D1D3',
'#EB7DC1',
'#B571F7',
'#819FF7'
]
}
},
mapbox: {
bubbleStyle: {
color: '#33C8EF',
minSize: 5,
maxSize: 30
},
lineStyle: {
color: '#33C8EF',
width: 6,
bubbleSize: 16
},
theme: MapboxThemeTypes.Dark
},
effectScatter: {
color: ['#33C8EF', '#28B8BB'],
selectColors: visualMapColors.dark
},
table: {
tableTitle: {
fontFamily: fontFamily,
fontWeight: 'bold',
fontSize: 12,
color: '#E6F0FF',
backgroundColor: '#273349'
},
color: '#E6F0FF',
rowBackgroundColor: '#273349',
backgroundColor: '#242C3B',
border: {
color: '#42526e',
width: 1,
type: 'solid',
show: false
}
},
sunburst: {
color: gradientColors
},
timeline: {
chartBackGround: '#242C3B',
eventBackGround: 'rgba(0,170,231,1)',
fontColor: '#00AAE7'
},
thresholdColors: thresholdColors,
cssVariable: {
'--themeColor': '#105feb',
'--selectPopoverHoverColor': 'rgba(44, 109, 210, 0.05)',
'--scrollBarColor': '#42526E',
'--dashbordDashColor': 'rgba(44, 108, 210, 0.8)',
'--dashboardBg': '#19202b',
'--dashboardBlockBg': '#232c3b',
'--operationBarTitleColor': '#e6f0ff',
'--dashboardBorderCorder': '#394F5E',
'--dashboardColor': '#9DB2D7',
'--dashboardDisableColor': '#42526e',
'--dashboardDisableBack': '#273349',
'--layoutDeleteBarBg': 'rgba(16, 95, 235, 0.15)',
'--variableIconColor': '#7a869a',
'--selectionChoiceBg': '#273349',
'--titlebarColor': '#E6F0FF',
'--timeRangeColor': '#596F94',
'--tooltipBgColor': '#273349',
'--nodataIconShadow': '#273349',
'--nodataIconPath': '#42526E',
'--nodataIconBoxFill': '#1F2837',
'--nodataDescColor': '#42526E',
'--legendTitleheader': '#E6F0FF',
'--legendItemvalue': '#9DB2D7',
'--legendSorter': '#42526E',
'--paginationBorderColor': '#42526E',
'--paginationColor': '#9DB2D7',
'--evenRowBg': '#1f2837',
'--subTableTitleBg': '#273349',
'--tableBorder': '#42526E',
'--timelineBorderColor': '#42526E',
'--timelineHeadBackgroundColor': '#273349',
'--timelineBackgroundColor': ' #242C3B',
'--timelineColor': '#E6F0FF',
'--timelineItemColor': '#00aae7',
'--timelineItemBackgroundColor': 'rgba(0, 170, 231, 0.25)',
'--carouselBtnBgActive': '#596F94',
'--carouselBtnBg': '#42526E',
'--splEditorKeyword': '#859900',
'--splEditorSplKeyword': '#859900',
'--splEditorStr': '#268bd2',
'--splEditorVar': '#74b0df',
'--splEditorFunc': '#d4d4d4',
'--splEditorNormal': '#d4d4d4',
'--splEditorCursor': '#ffffff'
}
};
var theme = merge(echartsTheme, customerTheme);
export default theme;
export var cssVariable = customerTheme.cssVariable;