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;