qt-public-ui
Version:
新设计规范下业务组件库
1,834 lines (1,832 loc) • 37.9 kB
JavaScript
const FONT_FAMILY = 'Roboto-Regular, Alibaba-PuHuiTi-Regular, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
export default {
defaultColor: '#5B8FF9',
padding: 'auto',
fontFamily: FONT_FAMILY,
columnWidthRatio: 0.5,
maxColumnWidth: null,
minColumnWidth: null,
roseWidthRatio: 0.9999999,
multiplePieWidthRatio: 0.7692307692307692,
colors10: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E86452', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
colors20: ['#5B8FF9', '#CDDDFD', '#5AD8A6', '#CDF3E4', '#5D7092', '#CED4DE', '#F6BD16', '#FCEBB9', '#E86452', '#F8D0CB', '#6DC8EC', '#D3EEF9', '#945FB9', '#DECFEA', '#FF9845', '#FFE0C7', '#1E9493', '#BBDEDE', '#FF99C3', '#FFE0ED'],
shapes: {
point: ['hollow-circle', 'hollow-square', 'hollow-bowtie', 'hollow-diamond', 'hollow-hexagon', 'hollow-triangle', 'hollow-triangle-down', 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'],
line: ['line', 'dash', 'dot', 'smooth'],
area: ['area', 'smooth', 'line', 'smooth-line'],
interval: ['rect', 'hollow-rect', 'line', 'tick']
},
sizes: [1, 10],
geometries: {
interval: {
rect: {
default: {
style: {
fill: '#5B8FF9',
fillOpacity: 0.95
}
},
active: {
style: {
stroke: '#000',
lineWidth: 1
}
},
inactive: {
style: {
fillOpacity: 0.3,
strokeOpacity: 0.3
}
},
selected: {
animateCfg: {
duration: 300
}
}
},
'hollow-rect': {
default: {
style: {
fill: '#FFFFFF',
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1
}
},
active: {
style: {
stroke: '#000',
lineWidth: 2
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 3,
strokeOpacity: 1
}
}
},
line: {
default: {
style: {
fill: '#FFFFFF',
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1
}
},
active: {
style: {
stroke: '#000',
lineWidth: 2
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 3,
strokeOpacity: 1
}
}
},
tick: {
default: {
style: {
fill: '#FFFFFF',
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1
}
},
active: {
style: {
stroke: '#000',
lineWidth: 2
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 3,
strokeOpacity: 1
}
}
},
funnel: {
default: {
style: {
fill: '#5B8FF9',
fillOpacity: 0.95
}
},
active: {
style: {
stroke: '#000',
lineWidth: 1
}
},
inactive: {
style: {
fillOpacity: 0.3,
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 2
}
}
},
pyramid: {
default: {
style: {
fill: '#5B8FF9',
fillOpacity: 0.95
}
},
active: {
style: {
stroke: '#000',
lineWidth: 1
}
},
inactive: {
style: {
fillOpacity: 0.3,
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 2
}
}
}
},
line: {
line: {
default: {
style: {
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1,
fill: null,
lineAppendWidth: 10
}
},
active: {
style: {
lineWidth: 3
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 3
}
}
},
dot: {
default: {
style: {
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1,
fill: null,
lineAppendWidth: 10,
lineDash: [1, 1]
}
},
active: {
style: {
lineWidth: 3,
lineDash: [1, 1]
}
},
inactive: {
style: {
strokeOpacity: 0.3,
lineDash: [1, 1]
}
},
selected: {
style: {
lineWidth: 3,
lineDash: [1, 1]
}
}
},
dash: {
default: {
style: {
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1,
fill: null,
lineAppendWidth: 10,
lineDash: [5.5, 1]
}
},
active: {
style: {
lineWidth: 3,
lineDash: [5.5, 1]
}
},
inactive: {
style: {
strokeOpacity: 0.3,
lineDash: [5.5, 1]
}
},
selected: {
style: {
lineWidth: 3,
lineDash: [5.5, 1]
}
}
},
smooth: {
default: {
style: {
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1,
fill: null,
lineAppendWidth: 10
}
},
active: {
style: {
lineWidth: 3
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 3
}
}
},
hv: {
default: {
style: {
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1,
fill: null,
lineAppendWidth: 10
}
},
active: {
style: {
lineWidth: 3
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 3
}
}
},
vh: {
default: {
style: {
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1,
fill: null,
lineAppendWidth: 10
}
},
active: {
style: {
lineWidth: 3
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 3
}
}
},
hvh: {
default: {
style: {
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1,
fill: null,
lineAppendWidth: 10
}
},
active: {
style: {
lineWidth: 3
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 3
}
}
},
vhv: {
default: {
style: {
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1,
fill: null,
lineAppendWidth: 10
}
},
active: {
style: {
lineWidth: 3
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 3
}
}
}
},
polygon: {
polygon: {
default: {
style: {
fill: '#5B8FF9',
fillOpacity: 0.95
}
},
active: {
style: {
stroke: '#000',
lineWidth: 1
}
},
inactive: {
style: {
fillOpacity: 0.3,
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 2
}
}
}
},
point: {
circle: {
default: {
style: {
fill: '#5B8FF9',
r: 4,
stroke: '#FFFFFF',
lineWidth: 1,
fillOpacity: 0.95
}
},
active: {
style: {
stroke: '#000'
}
},
inactive: {
style: {
fillOpacity: 0.3,
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 2
}
}
},
square: {
default: {
style: {
fill: '#5B8FF9',
r: 4,
stroke: '#FFFFFF',
lineWidth: 1,
fillOpacity: 0.95
}
},
active: {
style: {
stroke: '#000'
}
},
inactive: {
style: {
fillOpacity: 0.3,
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 2
}
}
},
bowtie: {
default: {
style: {
fill: '#5B8FF9',
r: 4,
stroke: '#FFFFFF',
lineWidth: 1,
fillOpacity: 0.95
}
},
active: {
style: {
stroke: '#000'
}
},
inactive: {
style: {
fillOpacity: 0.3,
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 2
}
}
},
diamond: {
default: {
style: {
fill: '#5B8FF9',
r: 4,
stroke: '#FFFFFF',
lineWidth: 1,
fillOpacity: 0.95
}
},
active: {
style: {
stroke: '#000'
}
},
inactive: {
style: {
fillOpacity: 0.3,
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 2
}
}
},
hexagon: {
default: {
style: {
fill: '#5B8FF9',
r: 4,
stroke: '#FFFFFF',
lineWidth: 1,
fillOpacity: 0.95
}
},
active: {
style: {
stroke: '#000'
}
},
inactive: {
style: {
fillOpacity: 0.3,
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 2
}
}
},
triangle: {
default: {
style: {
fill: '#5B8FF9',
r: 4,
stroke: '#FFFFFF',
lineWidth: 1,
fillOpacity: 0.95
}
},
active: {
style: {
stroke: '#000'
}
},
inactive: {
style: {
fillOpacity: 0.3,
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 2
}
}
},
'triangle-down': {
default: {
style: {
fill: '#5B8FF9',
r: 4,
stroke: '#FFFFFF',
lineWidth: 1,
fillOpacity: 0.95
}
},
active: {
style: {
stroke: '#000'
}
},
inactive: {
style: {
fillOpacity: 0.3,
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 2
}
}
},
'hollow-circle': {
default: {
style: {
fill: '#FFFFFF',
lineWidth: 1,
stroke: '#5B8FF9',
strokeOpacity: 0.95,
r: 4
}
},
active: {
style: {
stroke: '#000',
strokeOpacity: 1
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 2,
stroke: '#000',
strokeOpacity: 1
}
}
},
'hollow-square': {
default: {
style: {
fill: '#FFFFFF',
lineWidth: 1,
stroke: '#5B8FF9',
strokeOpacity: 0.95,
r: 4
}
},
active: {
style: {
stroke: '#000',
strokeOpacity: 1
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 2,
stroke: '#000',
strokeOpacity: 1
}
}
},
'hollow-bowtie': {
default: {
style: {
fill: '#FFFFFF',
lineWidth: 1,
stroke: '#5B8FF9',
strokeOpacity: 0.95,
r: 4
}
},
active: {
style: {
stroke: '#000',
strokeOpacity: 1
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 2,
stroke: '#000',
strokeOpacity: 1
}
}
},
'hollow-diamond': {
default: {
style: {
fill: '#FFFFFF',
lineWidth: 1,
stroke: '#5B8FF9',
strokeOpacity: 0.95,
r: 4
}
},
active: {
style: {
stroke: '#000',
strokeOpacity: 1
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 2,
stroke: '#000',
strokeOpacity: 1
}
}
},
'hollow-hexagon': {
default: {
style: {
fill: '#FFFFFF',
lineWidth: 1,
stroke: '#5B8FF9',
strokeOpacity: 0.95,
r: 4
}
},
active: {
style: {
stroke: '#000',
strokeOpacity: 1
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 2,
stroke: '#000',
strokeOpacity: 1
}
}
},
'hollow-triangle': {
default: {
style: {
fill: '#FFFFFF',
lineWidth: 1,
stroke: '#5B8FF9',
strokeOpacity: 0.95,
r: 4
}
},
active: {
style: {
stroke: '#000',
strokeOpacity: 1
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 2,
stroke: '#000',
strokeOpacity: 1
}
}
},
'hollow-triangle-down': {
default: {
style: {
fill: '#FFFFFF',
lineWidth: 1,
stroke: '#5B8FF9',
strokeOpacity: 0.95,
r: 4
}
},
active: {
style: {
stroke: '#000',
strokeOpacity: 1
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 2,
stroke: '#000',
strokeOpacity: 1
}
}
},
cross: {
default: {
style: {
fill: '#FFFFFF',
lineWidth: 1,
stroke: '#5B8FF9',
strokeOpacity: 0.95,
r: 4
}
},
active: {
style: {
stroke: '#000',
strokeOpacity: 1
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 2,
stroke: '#000',
strokeOpacity: 1
}
}
},
tick: {
default: {
style: {
fill: '#FFFFFF',
lineWidth: 1,
stroke: '#5B8FF9',
strokeOpacity: 0.95,
r: 4
}
},
active: {
style: {
stroke: '#000',
strokeOpacity: 1
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 2,
stroke: '#000',
strokeOpacity: 1
}
}
},
plus: {
default: {
style: {
fill: '#FFFFFF',
lineWidth: 1,
stroke: '#5B8FF9',
strokeOpacity: 0.95,
r: 4
}
},
active: {
style: {
stroke: '#000',
strokeOpacity: 1
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 2,
stroke: '#000',
strokeOpacity: 1
}
}
},
hyphen: {
default: {
style: {
fill: '#FFFFFF',
lineWidth: 1,
stroke: '#5B8FF9',
strokeOpacity: 0.95,
r: 4
}
},
active: {
style: {
stroke: '#000',
strokeOpacity: 1
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 2,
stroke: '#000',
strokeOpacity: 1
}
}
},
line: {
default: {
style: {
fill: '#FFFFFF',
lineWidth: 1,
stroke: '#5B8FF9',
strokeOpacity: 0.95,
r: 4
}
},
active: {
style: {
stroke: '#000',
strokeOpacity: 1
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 2,
stroke: '#000',
strokeOpacity: 1
}
}
}
},
area: {
area: {
default: {
style: {
fill: '#5B8FF9',
fillOpacity: 0.25,
stroke: null
}
},
active: {
style: {
fillOpacity: 0.5
}
},
inactive: {
style: {
fillOpacity: 0.3
}
},
selected: {
style: {
fillOpacity: 0.5
}
}
},
smooth: {
default: {
style: {
fill: '#5B8FF9',
fillOpacity: 0.25,
stroke: null
}
},
active: {
style: {
fillOpacity: 0.5
}
},
inactive: {
style: {
fillOpacity: 0.3
}
},
selected: {
style: {
fillOpacity: 0.5
}
}
},
line: {
default: {
style: {
fill: null,
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1
}
},
active: {
style: {
fill: null,
lineWidth: 3
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
fill: null,
lineWidth: 3
}
}
},
'smooth-line': {
default: {
style: {
fill: null,
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1
}
},
active: {
style: {
fill: null,
lineWidth: 3
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
fill: null,
lineWidth: 3
}
}
}
},
schema: {
candle: {
default: {
style: {
fill: '#FFFFFF',
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1
}
},
active: {
style: {
stroke: '#000',
lineWidth: 2
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 3,
strokeOpacity: 1
}
}
},
box: {
default: {
style: {
fill: '#FFFFFF',
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1
}
},
active: {
style: {
stroke: '#000',
lineWidth: 2
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
stroke: '#000',
lineWidth: 3,
strokeOpacity: 1
}
}
}
},
edge: {
line: {
default: {
style: {
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1,
fill: null,
lineAppendWidth: 10
}
},
active: {
style: {
lineWidth: 3
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 3
}
}
},
vhv: {
default: {
style: {
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1,
fill: null,
lineAppendWidth: 10
}
},
active: {
style: {
lineWidth: 3
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 3
}
}
},
smooth: {
default: {
style: {
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1,
fill: null,
lineAppendWidth: 10
}
},
active: {
style: {
lineWidth: 3
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 3
}
}
},
arc: {
default: {
style: {
stroke: '#5B8FF9',
lineWidth: 2,
strokeOpacity: 1,
fill: null,
lineAppendWidth: 10
}
},
active: {
style: {
lineWidth: 3
}
},
inactive: {
style: {
strokeOpacity: 0.3
}
},
selected: {
style: {
lineWidth: 3
}
}
}
}
},
components: {
axis: {
top: {
title: null,
label: {
autoRotate: true,
autoHide: true,
offset: 16,
style: {
fill: '#8C8C8C',
fontSize: 12,
lineHeight: 12,
textBaseline: 'middle',
fontFamily: FONT_FAMILY
}
},
line: {
style: {
lineWidth: 0.5,
stroke: '#BFBFBF'
}
},
tickLine: {
style: {
lineWidth: 0.5,
stroke: '#BFBFBF'
},
alignTick: true,
length: 4
},
subTickLine: null,
animate: true,
position: 'top',
grid: null
},
bottom: {
title: null,
label: {
autoRotate: true,
autoHide: true,
offset: 16,
style: {
fill: '#8C8C8C',
fontSize: 12,
lineHeight: 12,
textBaseline: 'middle',
fontFamily: FONT_FAMILY
}
},
line: {
style: {
lineWidth: 0.5,
stroke: '#BFBFBF'
}
},
tickLine: {
style: {
lineWidth: 0.5,
stroke: '#BFBFBF'
},
alignTick: true,
length: 4
},
subTickLine: null,
animate: true,
position: 'bottom',
grid: null
},
left: {
title: null,
label: {
autoRotate: true,
autoHide: true,
offset: 8,
style: {
fill: '#8C8C8C',
fontSize: 12,
lineHeight: 12,
textBaseline: 'middle',
fontFamily: FONT_FAMILY
}
},
line: null,
tickLine: null,
subTickLine: null,
animate: true,
position: 'left',
grid: {
line: {
type: 'line',
style: {
stroke: '#D9D9D9',
lineWidth: 0.5,
lineDash: null
}
},
alignTick: true,
animate: true
}
},
right: {
title: null,
label: {
autoRotate: true,
autoHide: true,
offset: 8,
style: {
fill: '#8C8C8C',
fontSize: 12,
lineHeight: 12,
textBaseline: 'middle',
fontFamily: FONT_FAMILY
}
},
line: null,
tickLine: null,
subTickLine: null,
animate: true,
position: 'right',
grid: {
line: {
type: 'line',
style: {
stroke: '#D9D9D9',
lineWidth: 0.5,
lineDash: null
}
},
alignTick: true,
animate: true
}
},
circle: {
title: null,
label: {
autoRotate: true,
autoHide: true,
offset: 8,
style: {
fill: '#8C8C8C',
fontSize: 12,
lineHeight: 12,
textBaseline: 'middle',
fontFamily: FONT_FAMILY
}
},
line: {
style: {
lineWidth: 0.5,
stroke: '#BFBFBF'
}
},
tickLine: {
style: {
lineWidth: 0.5,
stroke: '#BFBFBF'
},
alignTick: true,
length: 4
},
subTickLine: null,
animate: true,
grid: {
line: {
type: 'line',
style: {
stroke: '#D9D9D9',
lineWidth: 0.5,
lineDash: null
}
},
alignTick: true,
animate: true
}
},
radius: {
title: null,
label: {
autoRotate: true,
autoHide: true,
offset: 8,
style: {
fill: '#8C8C8C',
fontSize: 12,
lineHeight: 12,
textBaseline: 'middle',
fontFamily: FONT_FAMILY
}
},
line: {
style: {
lineWidth: 0.5,
stroke: '#BFBFBF'
}
},
tickLine: {
style: {
lineWidth: 0.5,
stroke: '#BFBFBF'
},
alignTick: true,
length: 4
},
subTickLine: null,
animate: true,
grid: {
line: {
type: 'circle',
style: {
stroke: '#D9D9D9',
lineWidth: 0.5,
lineDash: null
}
},
alignTick: true,
animate: true
}
}
},
legend: {
right: {
title: null,
marker: {
symbol: 'circle',
style: {
r: 4,
fill: '#5B8FF9'
}
},
itemName: {
spacing: 5,
style: {
fill: '#595959',
fontFamily: FONT_FAMILY,
fontSize: 12,
lineHeight: 12,
fontWeight: 'normal',
textAlign: 'start',
textBaseline: 'middle'
}
},
flipPage: true,
animate: false,
layout: 'vertical'
},
left: {
title: null,
marker: {
symbol: 'circle',
style: {
r: 4,
fill: '#5B8FF9'
}
},
itemName: {
spacing: 5,
style: {
fill: '#595959',
fontFamily: FONT_FAMILY,
fontSize: 12,
lineHeight: 12,
fontWeight: 'normal',
textAlign: 'start',
textBaseline: 'middle'
}
},
flipPage: true,
animate: false,
layout: 'vertical'
},
top: {
title: null,
marker: {
symbol: 'circle',
style: {
r: 4,
fill: '#5B8FF9'
}
},
itemName: {
spacing: 5,
style: {
fill: '#595959',
fontFamily: FONT_FAMILY,
fontSize: 12,
lineHeight: 12,
fontWeight: 'normal',
textAlign: 'start',
textBaseline: 'middle'
}
},
flipPage: true,
animate: false,
layout: 'horizontal'
},
bottom: {
title: null,
marker: {
symbol: 'circle',
style: {
r: 4,
fill: '#5B8FF9'
}
},
itemName: {
spacing: 5,
style: {
fill: '#595959',
fontFamily: FONT_FAMILY,
fontSize: 12,
lineHeight: 12,
fontWeight: 'normal',
textAlign: 'start',
textBaseline: 'middle'
}
},
flipPage: true,
animate: false,
layout: 'horizontal'
},
continuous: {
title: null,
background: null,
track: {},
rail: {
type: 'color',
size: 12,
defaultLength: 100,
style: {
fill: '#D9D9D9',
stroke: null,
lineWidth: 0
}
},
label: {
align: 'rail',
spacing: 4,
formatter: null,
style: {
fill: '#8C8C8C',
fontSize: 12,
lineHeight: 12,
textBaseline: 'middle',
fontFamily: FONT_FAMILY
}
},
handler: {
size: 10,
style: {
fill: '#F0F0F0',
stroke: '#BFBFBF'
}
},
slidable: true
}
},
tooltip: {
showContent: true,
follow: true,
showCrosshairs: false,
showMarkers: true,
shared: false,
enterable: false,
marker: {
symbol: 'circle',
stroke: '#fff',
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffSetY: 0,
shadowColor: 'rgba(0,0,0,0.09)',
lineWidth: 2,
r: 4
},
crosshairs: {
line: {
style: {
stroke: '#BFBFBF',
lineWidth: 0.5
}
},
text: null,
textBackground: {
padding: 2,
style: {
fill: 'rgba(0, 0, 0, 0.25)',
lineWidth: 0,
stroke: null
}
},
follow: false
},
domStyles: {
'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: 'rgb(255, 255, 255)',
opacity: 0.95,
borderRadius: '3px',
fontSize: '12px',
fontFamily: FONT_FAMILY,
boxShadow: '0 0 8px 0 rgba(0,0,0,0.16)',
color: '#6B798E',
lineHeight: '20px',
padding: '0 16px',
width: '240px'
},
'g2-tooltip-title': {
marginBottom: '8px',
marginTop: '10px',
paddingBottom: '6px',
borderBottom: '1px solid #E1E4E8'
},
'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'
},
'g2-tooltip-marker': {
width: '8px',
height: '8px',
borderRadius: 0,
display: 'inline-block',
margin: '0 6px 0 4px'
},
'g2-tooltip-value': {
float: 'right',
marginLeft: '12px'
}
}
},
annotation: {
arc: {
style: {
stroke: '#D9D9D9',
lineWidth: 0.5
},
animate: true
},
line: {
style: {
stroke: '#BFBFBF',
lineDash: null,
lineWidth: 0.5
},
text: {
position: 'start',
autoRotate: true,
style: {
fill: '#595959',
stroke: '#F2F2F2',
lineWidth: 1.5,
fontSize: 12,
textAlign: 'start',
fontFamily: FONT_FAMILY,
textBaseline: 'bottom'
}
},
animate: true
},
text: {
style: {
fill: '#595959',
stroke: '#F2F2F2',
lineWidth: 1.5,
fontSize: 12,
textBaseline: 'middle',
textAlign: 'start',
fontFamily: FONT_FAMILY
},
animate: true
},
region: {
top: false,
style: {
lineWidth: 0,
stroke: null,
fill: '#000',
fillOpacity: 0.06
},
animate: true
},
image: {
top: false,
animate: true
},
dataMarker: {
top: true,
point: {
style: {
r: 3,
stroke: '#5B8FF9',
lineWidth: 2
}
},
line: {
style: {
stroke: '#BFBFBF',
lineWidth: 0.5
},
length: 16
},
text: {
style: {
textAlign: 'start',
fill: '#595959',
stroke: '#F2F2F2',
lineWidth: 1.5,
fontSize: 12,
fontFamily: FONT_FAMILY
}
},
direction: 'upward',
autoAdjust: true,
animate: true
},
dataRegion: {
style: {
region: {
fill: '#000',
fillOpacity: 0.06
},
text: {
textAlign: 'center',
textBaseline: 'bottom',
fill: '#595959',
stroke: '#F2F2F2',
lineWidth: 1.5,
fontSize: 12,
fontFamily: FONT_FAMILY
}
},
animate: true
}
}
},
labels: {
offset: 12,
style: {
fill: '#595959',
fontSize: 12,
textBaseline: 'middle',
fontFamily: FONT_FAMILY,
stroke: '#FFFFFF',
lineWidth: 2
},
autoRotate: true
},
innerLabels: {
style: {
fill: '#FFFFFF',
fontSize: 12,
textBaseline: 'middle',
fontFamily: FONT_FAMILY,
stroke: null,
lineWidth: 0
},
autoRotate: true
},
pieLabels: {
labelHeight: 14,
offset: 30,
labelLine: {
style: {
lineWidth: 0.5,
stroke: '#BFBFBF'
}
},
autoRotate: true
}
};