@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
829 lines (828 loc) • 21.8 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: [
'#00AAE7',
'#59D1D3',
'#C2E643',
'#FBCA46',
'#FB834D',
'#EB7DC1',
'#B571F7',
'#819FF7',
'#33C8EF',
'#28B8BB',
'#A0D911',
'#FAAD14',
'#FA541C',
'#E14E9F',
'#8C41F4',
'#5272F4'
],
twodColor: [
'#33C8EF',
'#28B8BB',
'#C2E643',
'#FBCA46',
'#FB834D',
'#EB7DC1',
'#B571F7',
'#819FF7',
'#00AAE7',
'#59D1D3',
'#A0D911',
'#FAAD14',
'#FA541C',
'#E14E9F',
'#8C41F4',
'#5272F4'
],
backgroundColor: 'rgba(252,252,252,0)',
// 会让pie图引申线上的文字标识也全都变成这个颜色，所以最好单独到每个图表设置，尤其是颜色
textStyle: {
// 生效
fontFamily: constant_2.fontFamily,
fontSize: 12
},
title: {
textStyle: {
color: '#666666'
},
// yyf_todo ?是啥
subtextStyle: {
color: '#999999'
}
},
line: {
// color: ['#FFCE3D', '#ef5350']不能用，始终是第一个生效,用代码使生效
itemStyle: {
borderWidth: 2
},
lineStyle: {
width: 2
},
markLine: {
lineStyle: {
type: 'dashed'
}
},
showAllSymbol: true,
symbolSize: 8,
symbol: constants_1.EShape.circle,
smooth: false,
showSymbol: false
},
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: ['#bfbfbf']
}
},
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'dashed',
color: ['#bfbfbf']
}
},
shape: 'polygon',
lineStyle: {
width: 2
},
areaStyle: {
opacity: 0.3
},
name: {
textStyle: {
color: '#999999',
fontSize: 12
}
},
symbolSize: 0,
symbol: 'emptyCircle',
smooth: false
},
bar: {
// color: ['#FAA2C1', '#ef5350']不能生效，只有第一个可以,用代码使生效
symbol: constants_1.EShape.circle
},
pie: {
itemStyle: {
// borderWidth: 0 舍弃，用具体的pie图表里设置
borderColor: '#fff'
}
},
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: '#666666',
fontSize: 12
},
itemStyle: {
borderWidth: 0,
width: 50
},
lineStyle: {
opacity: 0.2
},
emphasis: {
itemStyle: {
borderWidth: 0
}
}
},
gauge: {
title: {
color: '#666666',
fontSize: 20,
fontWeight: 'normal',
fontFamily: constant_2.fontFamily,
offsetCenter: [0, 20]
},
detail: {
// 数值样式
color: '#333333',
fontSize: 40,
fontWeight: 'bold',
fontFamily: constant_2.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
}
}
// color: ['#ef5350', '#96cf79']不支持统一配置
},
graph: {
itemStyle: {
borderWidth: 0,
color: '#33C8EF'
},
lineStyle: {
width: 1,
curveness: 0.5
// color: "auto", 可以生效，但是不能自动取主题色
},
symbolSize: 14,
symbol: 'circle',
smooth: false,
// color: ["#1989fa", "#00bcd4"]可以生效，不用单独设置, 但是没必要设置这个，因为只会用到第一个，可以直接取item里的颜色值
label: {
show: true,
color: '#666666',
fontSize: 10,
position: 'bottom' // 文字位置
},
emphasis: {
label: {
color: '#666666',
fontSize: 10
}
}
},
sunburst: {
// color: ['#FAA2C1', '#ef5350', '#91A7FF', '#3DBD7D'], // 不直接生效，需要手动按序塞入item
itemStyle: {
borderWidth: 1,
borderColor: '#fff' // 需要根据主题色背景生成，透明色无法隔开饼图
// color: "#3DBD7D" 废弃，只能是一种颜色
},
radius: ['15%', '85%'],
label: {
rotate: 'radial',
align: 'center',
padding: 3,
silent: false,
color: '#ffffff',
show: true,
fontSize: 7
}
},
map: {
label: {
color: '#666666'
},
itemStyle: {
// 地图底色
areaColor: '#DDDFE1',
borderColor: '#fff',
borderWidth: 0.5
},
emphasis: {
itemStyle: {
areaColor: 'rgba(63,177,227,0.25)',
borderColor: '#3fb1e3',
borderWidth: 1
},
label: {
color: '#666666'
}
}
},
// 地图底色 如气泡图等扩展图
geo: {
itemStyle: {
areaColor: '#DDDFE1',
borderColor: '#fff',
borderWidth: 0.5
},
label: {
color: 'rgb(63,177,227)'
},
emphasis: {
itemStyle: {
color: '#ffffff'
},
label: {
color: '#666666'
}
}
},
// 地图气泡,无扩散动画。即不高亮的颜色
scatter: {
// 气泡图底色
itemStyle: {
shadowColor: 'hsla(196,100%,15%,0.35)',
color: '#00a0e0',
shadowBlur: 10
},
// emphasis: {} 如果单独设置颜色，那么迁移图的也会用这个配置，建议不要设置
label: {
color: '#666666',
position: 'right'
},
thresholdColor: ['#FA541C', '#4BC310']
},
// 地图气泡
effectScatter: {
// 气泡图底色
itemStyle: {
shadowColor: 'hsla(196,100%,15%,0.35)',
color: '#00a0e0',
shadowBlur: 10
},
// emphasis: {} 如果单独设置颜色，那么迁移图的也会用这个配置，建议不要设置
label: {
color: '#666666',
position: 'right'
}
},
categoryAxis: {
nameLocation: 'center',
nameTextStyle: {
color: '#BFBFBF',
fontSize: 12
},
axisLine: {
// 生效
show: true,
lineStyle: {
color: '#E5E5E5',
type: 'dashed'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#333'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#999',
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: '#BFBFBF',
fontSize: 12
},
axisLine: {
show: false
},
axisTick: {
show: false,
lineStyle: {
color: '#333'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#999',
fontFamily: constant_2.fontFamily,
fontSize: 12,
fontWeight: 'normal'
}
},
splitLine: {
// 生效
show: true,
lineStyle: {
color: '#E5E5E5',
type: 'dashed'
}
},
splitArea: {
show: false,
areaStyle: {
color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)']
}
}
},
timeAxis: {
nameLocation: 'center',
nameTextStyle: {
color: '#BFBFBF',
fontSize: 12
},
axisLine: {
// 生效
show: true,
lineStyle: {
color: '#E5E5E5',
type: 'dashed'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#333'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#999',
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)']
}
}
},
logAxis: {
nameLocation: 'center',
nameTextStyle: {
color: '#BFBFBF',
fontSize: 12
},
axisLine: {
// 生效
show: true,
lineStyle: {
color: '#E5E5E5',
type: 'dashed'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#333'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#999',
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.08);",
backgroundColor: '#fff',
textStyle: {
color: '#666'
},
axisPointer: {
lineStyle: {
color: '#999',
width: 1
},
shadowStyle: {
color: 'rgba(229, 229, 229, 0.5)'
},
label: {
// 散点图用到的，十字架指向的数字显示
color: '#00AAE7',
fontSize: 14,
fontFamily: constant_2.fontFamily,
backgroundColor: '#fff',
shadowColor: 'rgba(0, 0, 0, .08)',
shadowOffsetY: 2,
shadowBlur: 4
},
// 十字架颜色
crossStyle: {
color: '#E5E5E5',
type: 'solid'
}
}
},
visualMap: {
color: constant_2.visualMapColors.light,
textStyle: {
color: '#333333',
fontSize: 12
},
itemWidth: 16,
itemHeight: 140
},
toolbox: {
emphasis: {
iconStyle: {
borderColor: '#2c6dd2'
}
}
}
};
var customerTheme = {
themeColor: '#fff',
cssColor: {
// yyf_todo 还有用吗
backgroundColor: '#fff'
},
legend: {
textStyle: {
color: '#666666'
},
inactiveColor: '#BFBFBF' // 点击图例灰色时的颜色
},
// 状态矩阵
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: '#333',
lineHeight: 20,
color: '#666666'
},
borderStyle: {
color: '#E5E5E5',
width: 1,
radius: 4
}
},
line: {
// color: ['#FFCE3D', '#ef5350']不能用，始终是第一个生效,用代码使生效
thresholdColor: ['#FA541C', '#4BC310'],
outlier: {
// 异常检测图
// 错误点颜色
errorColor: '#fa6464'
}
},
bar: {
// color: 不能生效，只有第一个可以,用代码使生效
color: [
'#33C8EF',
'#28B8BB',
'#C2E643',
'#FBCA46',
'#FB834D',
'#EB7DC1',
'#B571F7',
'#819FF7',
'#00AAE7',
'#59D1D3',
'#A0D911',
'#FAAD14',
'#FA541C',
'#E14E9F',
'#8C41F4',
'#5272F4'
],
thresholdColor: ['#FA541C', '#4BC310'],
capsuleBar: {
backgroundBarColor: '#F5F5F5'
}
},
// 不能生效，只有第一个可以,用代码使生效
// scatter: {
// // color: ['#FAA2C1', '#ef5350'],
// },
pie: {
basic: {
borderWidth: 1 // 扇形之间的间距
},
ring: {
borderWidth: 0
},
rose: {
borderWidth: 0
}
// 可用color: ['#FAA2C1', '#ef5350']
},
gauge: {
// 不支持color: ['#ef5350', '#96cf79']统一配置
axisLineBackgroundColor: '#F5F5F5',
// 数字单值图
singleValue: {
backgroundColors: '#ffffff',
color: [
'#33C8EF',
'#FA541C',
'#FAAD14',
'#A0D911',
'#28B8BB',
'#E14E9F',
'#8C41F4',
'#5272F4'
],
titleStyle: {
fontSize: 40,
fontFamily: constant_2.fontFamily,
fontWeight: 'normal',
inverseColor: '#fff' // 反色时文字颜色
},
trendNumberStyle: {
fontSize: 14,
fontFamily: constant_2.fontFamily,
fontWeight: 'normal',
color: 'rgba(51,51,51,0.5)'
},
prefixStyle: {
fontSize: 12,
fontFamily: constant_2.fontFamily,
fontWeight: 'normal',
color: 'rgba(51,51,51,0.7)'
},
suffixStyle: {
fontSize: 12,
fontFamily: constant_2.fontFamily,
fontWeight: 'normal',
color: 'rgba(51,51,51,0.7)'
},
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 // 自定义config
},
// 占比图
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: constant_1.MapboxThemeTypes.Light
},
effectScatter: {
color: ['#33C8EF', '#28B8BB'],
selectColors: constant_2.visualMapColors.light
},
table: {
tableTitle: {
fontFamily: constant_2.fontFamily,
fontWeight: 'bold',
fontSize: 12,
color: '#42526e',
backgroundColor: '#FAFAFA'
},
color: '#333333',
rowBackgroundColor: '#FAFAFA',
backgroundColor: '#fff',
border: {
color: '#e5e5e5',
width: 1,
type: 'solid',
show: false
}
},
sunburst: {
color: constant_2.gradientColors
},
timeline: {
// echarts有timeline，但这里属性自定义
chartBackGround: '#fff',
eventBackGround: 'rgba(0,170,231,1)',
fontColor: '#00AAE7'
},
thresholdColors: constant_2.thresholdColors,
cssVariable: {
// 主题==========================================
'--themeColor': '#105feb',
'--selectPopoverHoverColor': 'rgba(44, 109, 210, 0.05)',
'--scrollBarColor': '#e5e5e5',
'--dashbordDashColor': 'rgba(44, 108, 210, 0.8)',
// dashboard==========================================
'--dashboardBg': '#f6f8fb',
'--dashboardBlockBg': '#fff',
'--operationBarTitleColor': '#333',
'--dashboardBorderCorder': '#D9D9D9',
'--dashboardColor': '#666',
'--layoutDeleteBarBg': '#dbe7f8',
'--variableIconColor': '#7a869a',
'--dashboardDisableColor': '#bfbfbf',
'--dashboardDisableBack': '#f5f5f5',
// 模版变量===============================================
'--selectionChoiceBg': '#F5F5F5',
// chart===============================================
'--titlebarColor': '#333',
'--timeRangeColor': '#999999',
// tooltip
'--tooltipBgColor': '#fff',
// 无数据icon
'--nodataIconShadow': '#F5F5F5',
'--nodataIconPath': '#D9D9D9',
'--nodataIconBoxFill': '#FAFAFA',
'--nodataDescColor': '#BFBFBF',
// legend 表格
'--legendTitleheader': '#333',
'--legendItemvalue': '#666',
'--legendSorter': '#BFBFBF',
// 数据表
'--paginationBorderColor': '#d9d9d9',
'--paginationColor': '#666666',
// 日志表 phoenix
'--evenRowBg': '#FAFAFA',
'--subTableTitleBg': '#f3f3f3',
'--tableBorder': '#e5e5e5',
// 时间轴
'--timelineBorderColor': '#e5e5e5',
'--timelineHeadBackgroundColor': '#f5f5f5',
'--timelineBackgroundColor': ' #fff',
'--timelineColor': '#333',
'--timelineItemColor': '#00aae7',
'--timelineItemBackgroundColor': 'rgba(0, 170, 231, 0.25)',
// 控制面板statusPanel
'--carouselBtnBgActive': '#BFBFBF',
'--carouselBtnBg': '#D9D9D9',
// SPL编辑器
'--splEditorKeyword': '#c2a025',
'--splEditorSplKeyword': '#147575',
'--splEditorStr': '#5d90cd',
'--splEditorVar': '#001188',
'--splEditorFunc': '#0b7523',
'--splEditorNormal': '#7a869a',
'--splEditorCursor': '#000000'
}
};
var theme = lodash_1.merge(echartsTheme, customerTheme);
exports.default = theme;
exports.cssVariable = customerTheme.cssVariable;