618 lines
14 KiB
Java
618 lines
14 KiB
Java
var _html, _tooltip;
|
|
|
|
/**
|
|
* @fileOverview G2 3.0 default theme
|
|
* @author sima.zhang
|
|
*/
|
|
var DEFAULT_COLOR = '#1890FF';
|
|
var COLOR_PLATE_8 = ['#1890FF', '#2FC25B', '#FACC14', '#223273', '#8543E0', '#13C2C2', '#3436C7', '#F04864'];
|
|
var COLOR_PLATE_16 = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#E6965C', '#223273', '#7564CC', '#8543E0', '#5C8EE6', '#13C2C2', '#5CA3E6', '#3436C7', '#B381E6', '#F04864', '#D598D9'];
|
|
var COLOR_PLATE_24 = ['#1890FF', '#66B5FF', '#41D9C7', '#2FC25B', '#6EDB8F', '#9AE65C', '#FACC14', '#E6965C', '#57AD71', '#223273', '#738AE6', '#7564CC', '#8543E0', '#A877ED', '#5C8EE6', '#13C2C2', '#70E0E0', '#5CA3E6', '#3436C7', '#8082FF', '#DD81E6', '#F04864', '#FA7D92', '#D598D9'];
|
|
var COLOR_PIE = ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273'];
|
|
var COLOR_PIE_16 = ['#1890FF', '#73C9E6', '#13C2C2', '#6CD9B3', '#2FC25B', '#9DD96C', '#FACC14', '#E6965C', '#F04864', '#D66BCA', '#8543E0', '#8E77ED', '#3436C7', '#737EE6', '#223273', '#7EA2E6'];
|
|
var FONT_FAMILY = '"-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",SimSun, "sans-serif"'; // tooltip 相关 dom 的 css 类名
|
|
|
|
var TOOLTIP_CONTAINER_CLASS = 'g2-tooltip';
|
|
var TOOLTIP_TITLE_CLASS = 'g2-tooltip-title';
|
|
var TOOLTIP_LIST_CLASS = 'g2-tooltip-list';
|
|
var TOOLTIP_LIST_ITEM_CLASS = 'g2-tooltip-list-item';
|
|
var TOOLTIP_MARKER_CLASS = 'g2-tooltip-marker';
|
|
var TOOLTIP_VALUE_CLASS = 'g2-tooltip-value'; // html 渲染的 legend 相关 dom 的 css 类型
|
|
|
|
var LEGEND_CONTAINER_CLASS = 'g2-legend';
|
|
var LEGEND_TITLE_CLASS = 'g2-legend-title';
|
|
var LEGEND_LIST_CLASS = 'g2-legend-list';
|
|
var LEGEND_LIST_ITEM_CLASS = 'g2-legend-list-item';
|
|
var LEGEND_MARKER_CLASS = 'g2-legend-marker';
|
|
var Theme = {
|
|
defaultColor: DEFAULT_COLOR,
|
|
// 默认主题色
|
|
plotCfg: {
|
|
padding: [20, 20, 95, 80]
|
|
},
|
|
fontFamily: FONT_FAMILY,
|
|
defaultLegendPosition: 'bottom',
|
|
// 默认图例的展示位置
|
|
colors: COLOR_PLATE_8,
|
|
colors_16: COLOR_PLATE_16,
|
|
colors_24: COLOR_PLATE_24,
|
|
colors_pie: COLOR_PIE,
|
|
colors_pie_16: COLOR_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: {
|
|
// zIndex: 1, // 默认上下方向的坐标轴位于左右坐标轴的上方
|
|
position: 'top',
|
|
title: null,
|
|
label: {
|
|
offset: 16,
|
|
textStyle: {
|
|
fill: '#545454',
|
|
fontSize: 12,
|
|
lineHeight: 16,
|
|
textBaseline: 'middle',
|
|
fontFamily: FONT_FAMILY
|
|
},
|
|
autoRotate: true
|
|
},
|
|
line: {
|
|
lineWidth: 1,
|
|
stroke: '#BFBFBF'
|
|
},
|
|
tickLine: {
|
|
lineWidth: 1,
|
|
stroke: '#BFBFBF',
|
|
length: 4,
|
|
alignWithLabel: true
|
|
}
|
|
},
|
|
bottom: {
|
|
position: 'bottom',
|
|
title: null,
|
|
label: {
|
|
offset: 16,
|
|
autoRotate: true,
|
|
textStyle: {
|
|
fill: '#545454',
|
|
fontSize: 12,
|
|
lineHeight: 16,
|
|
textBaseline: 'middle',
|
|
fontFamily: FONT_FAMILY
|
|
}
|
|
},
|
|
line: {
|
|
lineWidth: 1,
|
|
stroke: '#BFBFBF'
|
|
},
|
|
tickLine: {
|
|
lineWidth: 1,
|
|
stroke: '#BFBFBF',
|
|
length: 4,
|
|
alignWithLabel: true
|
|
}
|
|
},
|
|
left: {
|
|
position: 'left',
|
|
title: null,
|
|
label: {
|
|
offset: 8,
|
|
autoRotate: true,
|
|
textStyle: {
|
|
fill: '#545454',
|
|
fontSize: 12,
|
|
lineHeight: 16,
|
|
textBaseline: 'middle',
|
|
fontFamily: FONT_FAMILY
|
|
}
|
|
},
|
|
line: null,
|
|
tickLine: null,
|
|
grid: {
|
|
zIndex: -1,
|
|
lineStyle: {
|
|
stroke: '#E9E9E9',
|
|
lineWidth: 1,
|
|
lineDash: [3, 3]
|
|
},
|
|
hideFirstLine: true
|
|
}
|
|
},
|
|
right: {
|
|
position: 'right',
|
|
title: null,
|
|
label: {
|
|
offset: 8,
|
|
autoRotate: true,
|
|
textStyle: {
|
|
fill: '#545454',
|
|
fontSize: 12,
|
|
lineHeight: 16,
|
|
textBaseline: 'middle',
|
|
fontFamily: FONT_FAMILY
|
|
}
|
|
},
|
|
line: null,
|
|
tickLine: null,
|
|
grid: {
|
|
lineStyle: {
|
|
stroke: '#E9E9E9',
|
|
lineWidth: 1,
|
|
lineDash: [3, 3]
|
|
},
|
|
hideFirstLine: true
|
|
}
|
|
},
|
|
circle: {
|
|
zIndex: 1,
|
|
title: null,
|
|
label: {
|
|
offset: 8,
|
|
textStyle: {
|
|
fill: '#545454',
|
|
fontSize: 12,
|
|
lineHeight: 16,
|
|
fontFamily: FONT_FAMILY
|
|
}
|
|
},
|
|
line: {
|
|
lineWidth: 1,
|
|
stroke: '#BFBFBF'
|
|
},
|
|
tickLine: {
|
|
lineWidth: 1,
|
|
stroke: '#BFBFBF',
|
|
length: 4,
|
|
alignWithLabel: true
|
|
},
|
|
grid: {
|
|
lineStyle: {
|
|
stroke: '#E9E9E9',
|
|
lineWidth: 1,
|
|
lineDash: [3, 3]
|
|
},
|
|
hideFirstLine: true
|
|
}
|
|
},
|
|
radius: {
|
|
zIndex: 0,
|
|
label: {
|
|
offset: 12,
|
|
textStyle: {
|
|
fill: '#545454',
|
|
fontSize: 12,
|
|
textBaseline: 'middle',
|
|
lineHeight: 16,
|
|
fontFamily: FONT_FAMILY
|
|
}
|
|
},
|
|
line: {
|
|
lineWidth: 1,
|
|
stroke: '#BFBFBF'
|
|
},
|
|
tickLine: {
|
|
lineWidth: 1,
|
|
stroke: '#BFBFBF',
|
|
length: 4,
|
|
alignWithLabel: true
|
|
},
|
|
grid: {
|
|
lineStyle: {
|
|
stroke: '#E9E9E9',
|
|
lineWidth: 1,
|
|
lineDash: [3, 3]
|
|
},
|
|
type: 'circle'
|
|
}
|
|
},
|
|
helix: {
|
|
grid: null,
|
|
label: null,
|
|
title: null,
|
|
line: {
|
|
lineWidth: 1,
|
|
stroke: '#BFBFBF'
|
|
},
|
|
tickLine: {
|
|
lineWidth: 1,
|
|
length: 4,
|
|
stroke: '#BFBFBF',
|
|
alignWithLabel: true
|
|
}
|
|
}
|
|
},
|
|
label: {
|
|
offset: 20,
|
|
textStyle: {
|
|
fill: '#545454',
|
|
fontSize: 12,
|
|
textBaseline: 'middle',
|
|
fontFamily: FONT_FAMILY
|
|
}
|
|
},
|
|
treemapLabels: {
|
|
offset: 10,
|
|
textStyle: {
|
|
fill: '#fff',
|
|
fontSize: 12,
|
|
textBaseline: 'top',
|
|
fontStyle: 'bold',
|
|
fontFamily: FONT_FAMILY
|
|
}
|
|
},
|
|
innerLabels: {
|
|
textStyle: {
|
|
fill: '#fff',
|
|
fontSize: 12,
|
|
textBaseline: 'middle',
|
|
fontFamily: FONT_FAMILY
|
|
}
|
|
},
|
|
// 在theta坐标系下的饼图文本内部的样式
|
|
thetaLabels: {
|
|
labelHeight: 14,
|
|
offset: 30 // 在theta坐标系下的饼图文本的样式
|
|
|
|
},
|
|
legend: {
|
|
right: {
|
|
position: 'right',
|
|
layout: 'vertical',
|
|
itemMarginBottom: 8,
|
|
// layout 为 vertical 时各个图例项的间距
|
|
width: 16,
|
|
height: 156,
|
|
title: null,
|
|
legendStyle: {
|
|
LIST_CLASS: {
|
|
textAlign: 'left'
|
|
}
|
|
},
|
|
textStyle: {
|
|
fill: '#8C8C8C',
|
|
fontSize: 12,
|
|
textAlign: 'start',
|
|
textBaseline: 'middle',
|
|
lineHeight: 0,
|
|
fontFamily: FONT_FAMILY
|
|
},
|
|
// 图例项文本的样式
|
|
unCheckColor: '#bfbfbf'
|
|
},
|
|
left: {
|
|
position: 'left',
|
|
layout: 'vertical',
|
|
itemMarginBottom: 8,
|
|
width: 16,
|
|
height: 156,
|
|
title: null,
|
|
textStyle: {
|
|
fill: '#8C8C8C',
|
|
fontSize: 12,
|
|
textAlign: 'start',
|
|
textBaseline: 'middle',
|
|
lineHeight: 20,
|
|
fontFamily: FONT_FAMILY
|
|
},
|
|
// 图例项文本的样式
|
|
unCheckColor: '#bfbfbf'
|
|
},
|
|
top: {
|
|
position: 'top',
|
|
offset: [0, 6],
|
|
layout: 'horizontal',
|
|
title: null,
|
|
itemGap: 10,
|
|
width: 156,
|
|
height: 16,
|
|
textStyle: {
|
|
fill: '#8C8C8C',
|
|
fontSize: 12,
|
|
textAlign: 'start',
|
|
textBaseline: 'middle',
|
|
lineHeight: 20,
|
|
fontFamily: FONT_FAMILY
|
|
},
|
|
// 图例项文本的样式
|
|
unCheckColor: '#bfbfbf'
|
|
},
|
|
bottom: {
|
|
position: 'bottom',
|
|
offset: [0, 6],
|
|
layout: 'horizontal',
|
|
title: null,
|
|
itemGap: 10,
|
|
width: 156,
|
|
height: 16,
|
|
textStyle: {
|
|
fill: '#8C8C8C',
|
|
fontSize: 12,
|
|
textAlign: 'start',
|
|
textBaseline: 'middle',
|
|
lineHeight: 20,
|
|
fontFamily: FONT_FAMILY
|
|
},
|
|
// 图例项文本的样式
|
|
unCheckColor: '#bfbfbf'
|
|
},
|
|
// 定义 html 渲染图例的样式
|
|
html: (_html = {}, _html["" + LEGEND_CONTAINER_CLASS] = {
|
|
height: 'auto',
|
|
width: 'auto',
|
|
position: 'absolute',
|
|
overflow: 'auto',
|
|
fontSize: '12px',
|
|
fontFamily: FONT_FAMILY,
|
|
lineHeight: '20px',
|
|
color: '#8C8C8C'
|
|
}, _html["" + LEGEND_TITLE_CLASS] = {
|
|
marginBottom: '4px'
|
|
}, _html["" + LEGEND_LIST_CLASS] = {
|
|
listStyleType: 'none',
|
|
margin: 0,
|
|
padding: 0
|
|
}, _html["" + LEGEND_LIST_ITEM_CLASS] = {
|
|
listStyleType: 'none',
|
|
cursor: 'pointer',
|
|
marginBottom: '5px',
|
|
marginRight: '24px'
|
|
}, _html["" + LEGEND_MARKER_CLASS] = {
|
|
width: '9px',
|
|
height: '9px',
|
|
borderRadius: '50%',
|
|
display: 'inline-block',
|
|
marginRight: '8px',
|
|
verticalAlign: 'middle'
|
|
}, _html),
|
|
// 不能滑动的连续图例样式
|
|
gradient: {
|
|
textStyle: {
|
|
fill: '#8C8C8C',
|
|
fontSize: 12,
|
|
textAlign: 'center',
|
|
textBaseline: 'middle',
|
|
lineHeight: 20,
|
|
fontFamily: FONT_FAMILY
|
|
},
|
|
// 图例项文本的样式
|
|
lineStyle: {
|
|
lineWidth: 1,
|
|
stroke: '#fff'
|
|
},
|
|
unCheckColor: '#bfbfbf'
|
|
},
|
|
margin: [0, 5, 24, 5],
|
|
// 图例跟四个边的坐标轴、绘图区域的间距
|
|
legendMargin: 24 // 图例之间的间距
|
|
|
|
},
|
|
tooltip: (_tooltip = {
|
|
useHtml: true,
|
|
crosshairs: false,
|
|
offset: 15,
|
|
marker: {
|
|
symbol: 'circle',
|
|
activeSymbol: 'circle'
|
|
}
|
|
}, _tooltip["" + TOOLTIP_CONTAINER_CLASS] = {
|
|
position: 'absolute',
|
|
visibility: 'hidden',
|
|
// @2018-07-25 by blue.lb 这里去掉浮动，火狐上存在样式错位
|
|
// whiteSpace: 'nowrap',
|
|
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, 0.9)',
|
|
boxShadow: '0px 0px 10px #aeaeae',
|
|
borderRadius: '3px',
|
|
color: 'rgb(87, 87, 87)',
|
|
fontSize: '12px',
|
|
fontFamily: FONT_FAMILY,
|
|
lineHeight: '20px',
|
|
padding: '10px 10px 6px 10px'
|
|
}, _tooltip["" + TOOLTIP_TITLE_CLASS] = {
|
|
marginBottom: '4px'
|
|
}, _tooltip["" + TOOLTIP_LIST_CLASS] = {
|
|
margin: 0,
|
|
listStyleType: 'none',
|
|
padding: 0
|
|
}, _tooltip["" + TOOLTIP_LIST_ITEM_CLASS] = {
|
|
listStyleType: 'none',
|
|
marginBottom: '4px',
|
|
padding: 0,
|
|
marginTop: 0,
|
|
marginLeft: 0,
|
|
marginRight: 0
|
|
}, _tooltip["" + TOOLTIP_MARKER_CLASS] = {
|
|
width: '5px',
|
|
height: '5px',
|
|
display: 'inline-block',
|
|
marginRight: '8px'
|
|
}, _tooltip["" + TOOLTIP_VALUE_CLASS] = {
|
|
display: 'inline-block',
|
|
float: 'right',
|
|
marginLeft: '30px'
|
|
}, _tooltip),
|
|
tooltipMarker: {
|
|
symbol: function symbol(x, y, r) {
|
|
return [['M', x, y], ['m', -r, 0], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0]];
|
|
},
|
|
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
|
|
}
|
|
},
|
|
// tooltip 辅助背景框样式
|
|
tooltipCrosshairsLine: {
|
|
lineStyle: {
|
|
stroke: 'rgba(0, 0, 0, 0.25)',
|
|
lineWidth: 1
|
|
}
|
|
},
|
|
shape: {
|
|
point: {
|
|
lineWidth: 1,
|
|
fill: DEFAULT_COLOR,
|
|
radius: 4
|
|
},
|
|
hollowPoint: {
|
|
fill: '#fff',
|
|
lineWidth: 1,
|
|
stroke: DEFAULT_COLOR,
|
|
radius: 3
|
|
},
|
|
interval: {
|
|
lineWidth: 0,
|
|
fill: DEFAULT_COLOR,
|
|
fillOpacity: 0.85
|
|
},
|
|
hollowInterval: {
|
|
fill: '#fff',
|
|
stroke: DEFAULT_COLOR,
|
|
fillOpacity: 0,
|
|
lineWidth: 2
|
|
},
|
|
area: {
|
|
lineWidth: 0,
|
|
fill: DEFAULT_COLOR,
|
|
fillOpacity: 0.6
|
|
},
|
|
polygon: {
|
|
lineWidth: 0,
|
|
fill: DEFAULT_COLOR,
|
|
fillOpacity: 1
|
|
},
|
|
hollowPolygon: {
|
|
fill: '#fff',
|
|
stroke: DEFAULT_COLOR,
|
|
fillOpacity: 0,
|
|
lineWidth: 2
|
|
},
|
|
hollowArea: {
|
|
fill: '#fff',
|
|
stroke: DEFAULT_COLOR,
|
|
fillOpacity: 0,
|
|
lineWidth: 2
|
|
},
|
|
line: {
|
|
stroke: DEFAULT_COLOR,
|
|
lineWidth: 2,
|
|
fill: null
|
|
},
|
|
edge: {
|
|
stroke: DEFAULT_COLOR,
|
|
lineWidth: 1,
|
|
fill: null
|
|
},
|
|
schema: {
|
|
stroke: DEFAULT_COLOR,
|
|
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: FONT_FAMILY,
|
|
textBaseline: 'bottom'
|
|
}
|
|
}
|
|
},
|
|
text: {
|
|
style: {
|
|
fill: 'rgba(0,0,0,.5)',
|
|
fontSize: 12,
|
|
textBaseline: 'middle',
|
|
textAlign: 'start',
|
|
fontFamily: 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
|
|
};
|
|
module.exports = Theme; |