qt-public-ui
Version:
新设计规范下业务组件库
670 lines (667 loc) • 13.7 kB
JavaScript
import theme from './g2.var';
const { colors, colors_16, colors_24, colors_pie, colors_pie_16 } = theme;
export default {
renderer: 'canvas',
trackingInfo: {},
animate: true,
widthRatio: {
column: 0.5,
rose: 0.9999999,
multiplePie: 0.7692307692307692
},
showSinglePoint: false,
connectNulls: false,
scales: {},
defaultColor: theme['primary-color'],
plotCfg: {
padding: [
20,
20,
95,
80
]
},
fontFamily: theme['font-family'],
defaultLegendPosition: 'bottom',
colors,
colors_16,
colors_24,
colors_pie,
colors_pie_16,
shapes: {
point: [
'hollowCircle',
'hollowSquare',
'hollowDiamond',
'hollowBowtie',
'hollowTriangle',
'hollowHexagon',
'cross',
'tick',
'plus',
'hyphen',
'line'
],
line: [
'line',
'dash',
'dot'
],
area: [
'area'
]
},
sizes: [
1,
10
],
opacities: [
0.1,
0.9
],
axis: {
top: {
position: 'top',
title: null,
label: {
offset: 16,
textStyle: {
fill: theme['axis-text-color'],
fontSize: 12,
lineHeight: 16,
textBaseline: 'middle',
fontFamily: theme['font-family']
},
autoRotate: true
},
line: {
lineWidth: 1,
stroke: theme['line-axis-color']
},
tickLine: {
lineWidth: 1,
stroke: theme['line-tick-color'],
length: 4,
alignWithLabel: true
}
},
bottom: {
position: 'bottom',
title: null,
label: {
offset: 16,
autoRotate: true,
textStyle: {
fill: theme['axis-text-color'],
fontSize: 12,
lineHeight: 16,
textBaseline: 'middle',
fontFamily: theme['font-family']
}
},
line: {
lineWidth: 1,
stroke: theme['line-axis-color']
},
tickLine: {
lineWidth: 1,
stroke: theme['line-tick-color'],
length: 4,
alignWithLabel: true
}
},
left: {
position: 'left',
title: null,
label: {
offset: 8,
autoRotate: true,
textStyle: {
fill: theme['axis-text-color'],
fontSize: 12,
lineHeight: 16,
textBaseline: 'middle',
fontFamily: theme['font-family']
}
},
line: {
stroke: theme['line-axis-color']
},
tickLine: {
lineWidth: 1,
stroke: theme['line-tick-color'],
length: 4,
alignWithLabel: true
},
grid: {
zIndex: -1,
lineStyle: {
stroke: theme['line-grid-color'],
lineWidth: 1,
lineDash: [
3,
3
]
},
hideFirstLine: true
}
},
right: {
position: 'right',
title: null,
label: {
offset: 8,
autoRotate: true,
textStyle: {
fill: theme['axis-text-color'],
fontSize: 12,
lineHeight: 16,
textBaseline: 'middle',
fontFamily: theme['font-family']
}
},
line: {
stroke: theme['line-axis-color']
},
tickLine: {
lineWidth: 1,
stroke: theme['line-tick-color'],
length: 4,
alignWithLabel: true
},
grid: {
lineStyle: {
stroke: theme['line-grid-color'],
lineWidth: 1,
lineDash: [
3,
3
]
},
hideFirstLine: true
}
},
circle: {
zIndex: 1,
title: null,
label: {
offset: 8,
textStyle: {
fill: theme['axis-text-color'],
fontSize: 12,
lineHeight: 16,
fontFamily: theme['font-family']
}
},
line: {
lineWidth: 1,
stroke: theme['line-axis-color']
},
tickLine: {
lineWidth: 1,
stroke: theme['line-tick-color'],
length: 4,
alignWithLabel: true
},
grid: {
lineStyle: {
stroke: theme['line-grid-color'],
lineWidth: 1,
lineDash: [
3,
3
]
},
hideFirstLine: true
}
},
radius: {
zIndex: 0,
label: {
offset: 12,
textStyle: {
fill: theme['axis-title-color'],
fontSize: 12,
textBaseline: 'middle',
lineHeight: 16,
fontFamily: theme['font-family']
}
},
line: {
lineWidth: 1,
stroke: theme['line-axis-color']
},
tickLine: {
lineWidth: 1,
stroke: theme['line-tick-color'],
length: 4,
alignWithLabel: true
},
grid: {
lineStyle: {
stroke: theme['line-grid-color'],
lineWidth: 1,
lineDash: [
3,
3
]
},
type: 'circle'
}
},
helix: {
grid: null,
label: null,
title: null,
line: {
lineWidth: 1,
stroke: theme['line-axis-color']
},
tickLine: {
lineWidth: 1,
length: 4,
stroke: theme['line-tick-color'],
alignWithLabel: true
}
}
},
label: {
offset: 20,
textStyle: {
fill: '#545454',
fontSize: 12,
textBaseline: 'middle',
fontFamily: theme['font-family']
}
},
treemapLabels: {
offset: 10,
textStyle: {
fill: '#fff',
fontSize: 12,
textBaseline: 'top',
fontStyle: 'bold',
fontFamily: theme['font-family']
}
},
innerLabels: {
textStyle: {
fill: '#fff',
fontSize: 12,
textBaseline: 'middle',
fontFamily: theme['font-family']
}
},
thetaLabels: {
labelHeight: 14,
offset: 30
},
legend: {
right: {
position: 'right',
layout: 'vertical',
itemMarginBottom: 8,
width: 16,
height: 156,
title: null,
legendStyle: {
LIST_CLASS: {
textAlign: 'left'
}
},
textStyle: {
fill: theme['legend-text-color'],
fontSize: 12,
textAlign: 'start',
textBaseline: 'middle',
lineHeight: 0,
fontFamily: theme['font-family']
},
unCheckColor: theme['legend-text-unchecked-color']
},
left: {
position: 'left',
layout: 'vertical',
itemMarginBottom: 8,
width: 16,
height: 156,
title: null,
textStyle: {
fill: theme['legend-text-color'],
fontSize: 12,
textAlign: 'start',
textBaseline: 'middle',
lineHeight: 20,
fontFamily: theme['font-family']
},
unCheckColor: theme['legend-text-unchecked-color']
},
top: {
position: 'top',
offset: [
0,
6
],
layout: 'horizontal',
title: null,
itemGap: 10,
width: 156,
height: 16,
textStyle: {
fill: theme['legend-text-color'],
fontSize: 12,
textAlign: 'start',
textBaseline: 'middle',
lineHeight: 20,
fontFamily: theme['font-family']
},
unCheckColor: theme['legend-text-unchecked-color']
},
bottom: {
position: 'bottom',
offset: [
0,
6
],
layout: 'horizontal',
title: null,
itemGap: 10,
width: 156,
height: 16,
textStyle: {
fill: theme['legend-text-color'],
fontSize: 12,
textAlign: 'start',
textBaseline: 'middle',
lineHeight: 20,
fontFamily: theme['font-family']
},
unCheckColor: theme['legend-text-unchecked-color']
},
html: {
'g2-legend': {
height: 'auto',
width: 'auto',
position: 'absolute',
overflow: 'auto',
fontSize: '12px',
fontFamily: theme['font-family'],
lineHeight: '20px',
color: theme['legend-text-color']
},
'g2-legend-title': {
marginBottom: '4px'
},
'g2-legend-list': {
listStyleType: 'none',
margin: 0,
padding: 0
},
'g2-legend-list-item': {
cursor: 'pointer',
marginBottom: '5px',
marginRight: '24px'
},
'g2-legend-marker': {
width: '9px',
height: '9px',
borderRadius: '50%',
display: 'inline-block',
marginRight: '8px',
verticalAlign: 'middle'
}
},
gradient: {
textStyle: {
fill: theme['legend-text-color'],
fontSize: 12,
textAlign: 'center',
textBaseline: 'middle',
lineHeight: 20,
fontFamily: theme['font-family']
},
lineStyle: {
lineWidth: 1,
stroke: '#fff'
},
unCheckColor: theme['legend-text-unchecked-color']
},
margin: [
0,
5,
24,
5
],
legendMargin: 24
},
tooltip: {
useHtml: true,
crosshairs: false,
offset: 15,
'g2-tooltip': {
position: 'absolute',
visibility: 'hidden',
zIndex: 8,
transition: 'visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1)',
backgroundColor: 'rgba(255, 255, 255, .95)',
opacity: 0.95,
borderRadius: '3px',
fontSize: '12px',
fontFamily: theme['font-family'],
boxShadow: '0 0 8px 0 rgba(0,0,0,0.16)',
color: '#252934',
lineHeight: '20px',
padding: '0 16px',
minWidth: '200px'
},
'g2-tooltip-title': {
marginBottom: '8px',
lineHeight: '18px',
marginTop: '16px'
},
'g2-tooltip-list': {
margin: 0,
listStyleType: 'none',
padding: 0
},
'g2-tooltip-list-item': {
listStyleType: 'none',
padding: 0,
marginBottom: '8px',
marginTop: '8px',
marginLeft: 0,
marginRight: 0
},
'g2-tooltip-name': {
maxWidth: '124px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'inline-block',
verticalAlign: 'middle',
color: '#6B798E'
},
'g2-tooltip-marker': {
width: '10px',
height: '10px',
borderRadius: 0,
display: 'inline-block',
margin: '0 8px 0 0'
},
'g2-tooltip-value': {
float: 'right',
marginLeft: '12px'
}
},
tooltipMarker: {
stroke: '#fff',
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffSetY: 0,
shadowColor: 'rgba(0,0,0,0.09)',
lineWidth: 2,
radius: 4
},
tooltipCrosshairsRect: {
type: 'rect',
rectStyle: {
fill: '#CCD6EC',
opacity: 0.3
}
},
tooltipCrosshairsLine: {
lineStyle: {
stroke: 'rgba(0, 0, 0, 0.25)',
lineWidth: 1
}
},
shape: {
point: {
lineWidth: 1,
fill: '#1890FF',
radius: 4
},
hollowPoint: {
fill: '#fff',
lineWidth: 1,
stroke: '#1890FF',
radius: 3
},
interval: {
lineWidth: 0,
fill: '#1890FF',
fillOpacity: 0.85
},
hollowInterval: {
fill: '#fff',
stroke: '#1890FF',
fillOpacity: 0,
lineWidth: 2
},
area: {
lineWidth: 0,
fill: '#1890FF',
fillOpacity: 0.6
},
polygon: {
lineWidth: 0,
fill: '#1890FF',
fillOpacity: 1
},
hollowPolygon: {
fill: '#fff',
stroke: '#1890FF',
fillOpacity: 0,
lineWidth: 2
},
hollowArea: {
fill: '#fff',
stroke: '#1890FF',
fillOpacity: 0,
lineWidth: 2
},
line: {
stroke: '#1890FF',
lineWidth: 2,
fill: null
},
edge: {
stroke: '#1890FF',
lineWidth: 1,
fill: null
},
schema: {
stroke: '#1890FF',
lineWidth: 1,
fill: null
}
},
guide: {
line: {
lineStyle: {
stroke: 'rgba(0, 0, 0, .65)',
lineDash: [
2,
2
],
lineWidth: 1
},
text: {
position: 'start',
autoRotate: true,
style: {
fill: 'rgba(0, 0, 0, .45)',
fontSize: 12,
textAlign: 'start',
fontFamily: theme['font-family'],
textBaseline: 'bottom'
}
}
},
text: {
style: {
fill: 'rgba(0,0,0,.5)',
fontSize: 12,
textBaseline: 'middle',
textAlign: 'start',
fontFamily: theme['font-family']
}
},
region: {
style: {
lineWidth: 0,
fill: '#000',
fillOpacity: 0.04
}
},
html: {
alignX: 'middle',
alignY: 'middle'
},
dataRegion: {
style: {
region: {
lineWidth: 0,
fill: '#000000',
opacity: 0.04
},
text: {
textAlign: 'center',
textBaseline: 'bottom',
fontSize: 12,
fill: 'rgba(0, 0, 0, .65)'
}
}
},
dataMarker: {
top: true,
style: {
point: {
r: 3,
fill: '#FFFFFF',
stroke: '#1890FF',
lineWidth: 2
},
line: {
stroke: '#A3B1BF',
lineWidth: 1
},
text: {
fill: 'rgba(0, 0, 0, .65)',
opacity: 1,
fontSize: 12,
textAlign: 'start'
}
},
display: {
point: true,
line: true,
text: true
},
lineLength: 20,
direction: 'upward',
autoAdjust: true
}
},
pixelRatio: null
};