简介

G2 提供了一系列的全局配置项，一旦更改这些配置项会影响全局的图表展示，这里展示所有的全局配置项。

所有配置项

  1. const DEFAULT_COLOR = '#1890FF';
  2. const COLOR_PLATE_8 = [
  3.   '#1890FF',
  4.   '#2FC25B',
  5.   '#FACC14',
  6.   '#223273',
  7.   '#8543E0',
  8.   '#13C2C2',
  9.   '#3436C7',
  10.   '#F04864'
  11. ];
  12. const COLOR_PLATE_16 = [
  13.   '#1890FF',
  14.   '#41D9C7',
  15.   '#2FC25B',
  16.   '#FACC14',
  17.   '#E6965C',
  18.   '#223273',
  19.   '#7564CC',
  20.   '#8543E0',
  21.   '#5C8EE6',
  22.   '#13C2C2',
  23.   '#5CA3E6',
  24.   '#3436C7',
  25.   '#B381E6',
  26.   '#F04864',
  27.   '#D598D9'
  28. ];
  29. const COLOR_PLATE_24 = [ '#1890FF',
  30.   '#66B5FF',
  31.   '#41D9C7',
  32.   '#2FC25B',
  33.   '#6EDB8F',
  34.   '#9AE65C',
  35.   '#FACC14',
  36.   '#E6965C',
  37.   '#57AD71',
  38.   '#223273',
  39.   '#738AE6',
  40.   '#7564CC',
  41.   '#8543E0',
  42.   '#A877ED',
  43.   '#5C8EE6',
  44.   '#13C2C2',
  45.   '#70E0E0',
  46.   '#5CA3E6',
  47.   '#3436C7',
  48.   '#8082FF',
  49.   '#DD81E6',
  50.   '#F04864',
  51.   '#FA7D92',
  52.   '#D598D9' ];
  53. const COLOR_PIE = [
  54.   '#1890FF',
  55.   '#13C2C2',
  56.   '#2FC25B',
  57.   '#FACC14',
  58.   '#F04864',
  59.   '#8543E0',
  60.   '#3436C7',
  61.   '#223273' ];
  62. const COLOR_PIE_16 = [
  63.   '#1890FF',
  64.   '#73C9E6',
  65.   '#13C2C2',
  66.   '#6CD9B3',
  67.   '#2FC25B',
  68.   '#9DD96C',
  69.   '#FACC14',
  70.   '#E6965C',
  71.   '#F04864',
  72.   '#D66BCA',
  73.   '#8543E0',
  74.   '#8E77ED',
  75.   '#3436C7',
  76.   '#737EE6',
  77.   '#223273',
  78.   '#7EA2E6'
  79. ];
  81. const FONT_FAMILY = '"-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",SimSun, "sans-serif"';
  82. // tooltip 相关 dom 的 css 类名
  83. const TOOLTIP_CONTAINER_CLASS = 'g2-tooltip';
  84. const TOOLTIP_TITLE_CLASS = 'g2-tooltip-title';
  85. const TOOLTIP_LIST_CLASS = 'g2-tooltip-list';
  86. const TOOLTIP_LIST_ITEM_CLASS = 'g2-tooltip-list-item';
  87. const TOOLTIP_MARKER_CLASS = 'g2-tooltip-marker';
  88. const TOOLTIP_VALUE_CLASS = 'g2-tooltip-value';
  90. // html 渲染的 legend 相关 dom 的 css 类型
  91. const LEGEND_CONTAINER_CLASS = 'g2-legend';
  92. const LEGEND_TITLE_CLASS = 'g2-legend-title';
  93. const LEGEND_LIST_CLASS = 'g2-legend-list';
  94. const LEGEND_LIST_ITEM_CLASS = 'g2-legend-list-item';
  95. const LEGEND_MARKER_CLASS = 'g2-legend-marker';
  97. const Theme = {
  98.   defaultColor: DEFAULT_COLOR, // 默认主题色
  99.   plotCfg: {
  100.     padding: [ 20, 20, 95, 80 ] // 默认边框
  101.   },
  102.   fontFamily: FONT_FAMILY,
  103.   defaultLegendPosition: 'bottom', // 默认图例的展示位置
  104.   colors: COLOR_PLATE_8,
  105.   colors_16: COLOR_PLATE_16,
  106.   colors_24: COLOR_PLATE_24,
  107.   colors_pie: COLOR_PIE,
  108.   colors_pie_16: COLOR_PIE_16,
  109.   shapes: {
  110.     point: [ 'hollowCircle', 'hollowSquare', 'hollowDiamond', 'hollowBowtie', 'hollowTriangle',
  111.       'hollowHexagon', 'cross', 'tick', 'plus', 'hyphen', 'line' ],
  112.     line: [ 'line', 'dash', 'dot' ],
  113.     area: [ 'area' ]
  114.   },
  115.   sizes: [ 1, 10 ],
  116.   opacities: [ 0.1, 0.9 ],
  117.   axis: { // 坐标轴
  118.     top: {
  119.       // zIndex: 1, // 默认上下方向的坐标轴位于左右坐标轴的上方
  120.       position: 'top',
  121.       title: null,
  122.       label: {
  123.         offset: 16,
  124.         textStyle: {
  125.           fill: '#545454',
  126.           fontSize: 12,
  127.           lineHeight: 16,
  128.           textBaseline: 'middle',
  129.           fontFamily: FONT_FAMILY
  130.         },
  131.         autoRotate: true
  132.       },
  133.       line: {
  134.         lineWidth: 1,
  135.         stroke: '#BFBFBF'
  136.       },
  137.       tickLine: {
  138.         lineWidth: 1,
  139.         stroke: '#BFBFBF',
  140.         length: 4,
  141.         alignWithLabel: true
  142.       }
  143.     },
  144.     bottom: {
  145.       position: 'bottom',
  146.       title: null,
  147.       label: {
  148.         offset: 16,
  149.         autoRotate: true,
  150.         textStyle: {
  151.           fill: '#545454',
  152.           fontSize: 12,
  153.           lineHeight: 16,
  154.           textBaseline: 'middle',
  155.           fontFamily: FONT_FAMILY
  156.         }
  157.       },
  158.       line: {
  159.         lineWidth: 1,
  160.         stroke: '#BFBFBF'
  161.       },
  162.       tickLine: {
  163.         lineWidth: 1,
  164.         stroke: '#BFBFBF',
  165.         length: 4,
  166.         alignWithLabel: true
  167.       }
  168.     },
  169.     left: {
  170.       position: 'left',
  171.       title: null,
  172.       label: {
  173.         offset: 8,
  174.         autoRotate: true,
  175.         textStyle: {
  176.           fill: '#545454',
  177.           fontSize: 12,
  178.           lineHeight: 16,
  179.           textBaseline: 'middle',
  180.           fontFamily: FONT_FAMILY
  181.         }
  182.       },
  183.       line: null,
  184.       tickLine: null,
  185.       grid: {
  186.         zIndex: -1,
  187.         lineStyle: {
  188.           stroke: '#E9E9E9',
  189.           lineWidth: 1,
  190.           lineDash: [ 3, 3 ]
  191.         },
  192.         hideFirstLine: true
  193.       }
  194.     },
  195.     right: {
  196.       position: 'right',
  197.       title: null,
  198.       label: {
  199.         offset: 8,
  200.         autoRotate: true,
  201.         textStyle: {
  202.           fill: '#545454',
  203.           fontSize: 12,
  204.           lineHeight: 16,
  205.           textBaseline: 'middle',
  206.           fontFamily: FONT_FAMILY
  207.         }
  208.       },
  209.       line: null,
  210.       tickLine: null,
  211.       grid: {
  212.         lineStyle: {
  213.           stroke: '#E9E9E9',
  214.           lineWidth: 1,
  215.           lineDash: [ 3, 3 ]
  216.         },
  217.         hideFirstLine: true
  218.       }
  219.     },
  220.     circle: {
  221.       zIndex: 1,
  222.       title: null,
  223.       label: {
  224.         offset: 8,
  225.         textStyle: {
  226.           fill: '#545454',
  227.           fontSize: 12,
  228.           lineHeight: 16,
  229.           fontFamily: FONT_FAMILY
  230.         }
  231.       },
  232.       line: {
  233.         lineWidth: 1,
  234.         stroke: '#BFBFBF'
  235.       },
  236.       tickLine: {
  237.         lineWidth: 1,
  238.         stroke: '#BFBFBF',
  239.         length: 4,
  240.         alignWithLabel: true
  241.       },
  242.       grid: {
  243.         lineStyle: {
  244.           stroke: '#E9E9E9',
  245.           lineWidth: 1,
  246.           lineDash: [ 3, 3 ]
  247.         },
  248.         hideFirstLine: true
  249.       }
  250.     },
  251.     radius: {
  252.       zIndex: 0,
  253.       label: {
  254.         offset: 12,
  255.         textStyle: {
  256.           fill: '#545454',
  257.           fontSize: 12,
  258.           textBaseline: 'middle',
  259.           lineHeight: 16,
  260.           fontFamily: FONT_FAMILY
  261.         }
  262.       },
  263.       line: {
  264.         lineWidth: 1,
  265.         stroke: '#BFBFBF'
  266.       },
  267.       tickLine: {
  268.         lineWidth: 1,
  269.         stroke: '#BFBFBF',
  270.         length: 4,
  271.         alignWithLabel: true
  272.       },
  273.       grid: {
  274.         lineStyle: {
  275.           stroke: '#E9E9E9',
  276.           lineWidth: 1,
  277.           lineDash: [ 3, 3 ]
  278.         },
  279.         type: 'circle'
  280.       }
  281.     },
  282.     helix: {
  283.       grid: null,
  284.       label: null,
  285.       title: null,
  286.       line: {
  287.         lineWidth: 1,
  288.         stroke: '#BFBFBF'
  289.       },
  290.       tickLine: {
  291.         lineWidth: 1,
  292.         length: 4,
  293.         stroke: '#BFBFBF',
  294.         alignWithLabel: true
  295.       }
  296.     }
  297.   },
  298.   // 默认 label 上的配置项
  299.   label: {
  300.     offset: 20,
  301.     textStyle: {
  302.       fill: '#545454',
  303.       fontSize: 12,
  304.       textBaseline: 'middle',
  305.       fontFamily: FONT_FAMILY
  306.     }
  307.   },
  308.   treemapLabels: {
  309.     offset: 10,
  310.     textStyle: {
  311.       fill: '#fff',
  312.       fontSize: 12,
  313.       textBaseline: 'top',
  314.       fontStyle: 'bold',
  315.       fontFamily: FONT_FAMILY
  316.     }
  317.   },
  318.   innerLabels: {
  319.     textStyle: {
  320.       fill: '#fff',
  321.       fontSize: 12,
  322.       textBaseline: 'middle',
  323.       fontFamily: FONT_FAMILY
  324.     }
  325.   },
  326.   // 在theta坐标系下的饼图文本内部的样式
  327.   thetaLabels: {
  328.     labelHeight: 14,
  329.     offset: 30
  330.     // 在theta坐标系下的饼图文本的样式
  331.   },
  332.   // 图例
  333.   legend: {
  334.     right: {
  335.       position: 'right',
  336.       layout: 'vertical',
  337.       itemMarginBottom: 8, // layout 为 vertical 时各个图例项的间距
  338.       width: 16,
  339.       height: 156,
  340.       title: null,
  341.       legendStyle: {
  342.         LIST_CLASS: {
  343.           textAlign: 'left'
  344.         }
  345.       },
  346.       textStyle: {
  347.         fill: '#8C8C8C',
  348.         fontSize: 12,
  349.         textAlign: 'start',
  350.         textBaseline: 'middle',
  351.         lineHeight: 0,
  352.         fontFamily: FONT_FAMILY
  353.       }, // 图例项文本的样式
  354.       unCheckColor: '#bfbfbf'
  355.     },
  356.     left: {
  357.       position: 'left',
  358.       layout: 'vertical',
  359.       itemMarginBottom: 8,
  360.       width: 16,
  361.       height: 156,
  362.       title: null,
  363.       textStyle: {
  364.         fill: '#8C8C8C',
  365.         fontSize: 12,
  366.         textAlign: 'start',
  367.         textBaseline: 'middle',
  368.         lineHeight: 20,
  369.         fontFamily: FONT_FAMILY
  370.       }, // 图例项文本的样式
  371.       unCheckColor: '#bfbfbf'
  372.     },
  373.     top: {
  374.       position: 'top',
  375.       offset: [ 0, 6 ],
  376.       layout: 'horizontal',
  377.       title: null,
  378.       itemGap: 10,
  379.       width: 156,
  380.       height: 16,
  381.       textStyle: {
  382.         fill: '#8C8C8C',
  383.         fontSize: 12,
  384.         textAlign: 'start',
  385.         textBaseline: 'middle',
  386.         lineHeight: 20,
  387.         fontFamily: FONT_FAMILY
  388.       }, // 图例项文本的样式
  389.       unCheckColor: '#bfbfbf'
  390.     },
  391.     bottom: {
  392.       position: 'bottom',
  393.       offset: [ 0, 6 ],
  394.       layout: 'horizontal',
  395.       title: null,
  396.       itemGap: 10,
  397.       width: 156,
  398.       height: 16,
  399.       textStyle: {
  400.         fill: '#8C8C8C',
  401.         fontSize: 12,
  402.         textAlign: 'start',
  403.         textBaseline: 'middle',
  404.         lineHeight: 20,
  405.         fontFamily: FONT_FAMILY
  406.       }, // 图例项文本的样式
  407.       unCheckColor: '#bfbfbf'
  408.     },
  409.     // 定义 html 渲染图例的样式
  410.     html: {
  411.       [`${LEGEND_CONTAINER_CLASS}`]: {
  412.         height: 'auto',
  413.         width: 'auto',
  414.         position: 'absolute',
  415.         overflow: 'auto',
  416.         fontSize: '12px',
  417.         fontFamily: FONT_FAMILY,
  418.         lineHeight: '20px',
  419.         color: '#8C8C8C'
  420.       },
  421.       [`${LEGEND_TITLE_CLASS}`]: {
  422.         marginBottom: '4px'
  423.       },
  424.       [`${LEGEND_LIST_CLASS}`]: {
  425.         listStyleType: 'none',
  426.         margin: 0,
  427.         padding: 0
  428.       },
  429.       [`${LEGEND_LIST_ITEM_CLASS}`]: {
  430.         cursor: 'pointer',
  431.         marginBottom: '5px',
  432.         marginRight: '24px'
  433.       },
  434.       [`${LEGEND_MARKER_CLASS}`]: {
  435.         width: '9px',
  436.         height: '9px',
  437.         borderRadius: '50%',
  438.         display: 'inline-block',
  439.         marginRight: '8px',
  440.         verticalAlign: 'middle'
  441.       }
  442.     },
  443.     // 不能滑动的连续图例样式
  444.     gradient: {
  445.       textStyle: {
  446.         fill: '#8C8C8C',
  447.         fontSize: 12,
  448.         textAlign: 'center',
  449.         textBaseline: 'middle',
  450.         lineHeight: 20,
  451.         fontFamily: FONT_FAMILY
  452.       }, // 图例项文本的样式
  453.       lineStyle: {
  454.         lineWidth: 1,
  455.         stroke: '#fff'
  456.       },
  457.       unCheckColor: '#bfbfbf'
  458.     },
  459.     margin: [ 0, 5, 24, 5 ], // 图例跟四个边的坐标轴、绘图区域的间距
  460.     legendMargin: 24 // 图例之间的间距
  461.   },
  462.   // tooltip 默认的配置项
  463.   tooltip: {
  464.     useHtml: true,
  465.     crosshairs: false,
  466.     offset: 15,
  467.     // css style for tooltip
  468.     [`${TOOLTIP_CONTAINER_CLASS}`]: {
  469.       position: 'absolute',
  470.       visibility: 'hidden',
  471.       // @2018-07-25 by blue.lb 这里去掉浮动，火狐上存在样式错位
  472.       // whiteSpace: 'nowrap',
  473.       zIndex: 8,
  474.       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)',
  475.       backgroundColor: 'rgba(255, 255, 255, 0.9)',
  476.       boxShadow: '0px 0px 10px #aeaeae',
  477.       borderRadius: '3px',
  478.       color: 'rgb(87, 87, 87)',
  479.       fontSize: '12px',
  480.       fontFamily: FONT_FAMILY,
  481.       lineHeight: '20px',
  482.       padding: '10px 10px 6px 10px'
  483.     },
  484.     [`${TOOLTIP_TITLE_CLASS}`]: {
  485.       marginBottom: '4px'
  486.     },
  487.     [`${TOOLTIP_LIST_CLASS}`]: {
  488.       margin: 0,
  489.       listStyleType: 'none',
  490.       padding: 0
  491.     },
  492.     [`${TOOLTIP_LIST_ITEM_CLASS}`]: {
  493.       marginBottom: '4px'
  494.     },
  495.     [`${TOOLTIP_MARKER_CLASS}`]: {
  496.       width: '5px',
  497.       height: '5px',
  498.       borderRadius: '50%',
  499.       display: 'inline-block',
  500.       marginRight: '8px'
  501.     },
  503.     [`${TOOLTIP_VALUE_CLASS}`]: {
  504.       display: 'inline-block',
  505.       float: 'right',
  506.       marginLeft: '30px'
  507.     }
  509.   },
  510.   // 折线图显示 tooltip 时的 marker
  511.   tooltipMarker: {
  512.     symbol: (x, y, r) => {
  513.       return [
  514.         [ 'M', x, y ],
  515.         [ 'm', -r, 0 ],
  516.         [ 'a', r, r, 0, 1, 0, r * 2, 0 ],
  517.         [ 'a', r, r, 0, 1, 0, -r * 2, 0 ]
  518.       ];
  519.     },
  520.     stroke: '#fff',
  521.     shadowBlur: 10,
  522.     shadowOffsetX: 0,
  523.     shadowOffSetY: 0,
  524.     shadowColor: 'rgba(0,0,0,0.09)',
  525.     lineWidth: 2,
  526.     radius: 4
  527.   }, // 提示信息在折线图、区域图上形成点的样式
  528.   tooltipCrosshairsRect: {
  529.     type: 'rect',
  530.     rectStyle: {
  531.       fill: '#CCD6EC',
  532.       opacity: 0.3
  533.     }
  534.   }, // tooltip 辅助背景框样式
  535.   tooltipCrosshairsLine: {
  536.     lineStyle: {
  537.       stroke: 'rgba(0, 0, 0, 0.25)',
  538.       lineWidth: 1
  539.     }
  540.   },
  541.   // 各种 geometry 默认的样式
  542.   shape: {
  543.     point: {
  544.       lineWidth: 1,
  545.       fill: DEFAULT_COLOR,
  546.       radius: 4
  547.     },
  548.     hollowPoint: {
  549.       fill: '#fff',
  550.       lineWidth: 1,
  551.       stroke: DEFAULT_COLOR,
  552.       radius: 3
  553.     },
  554.     interval: {
  555.       lineWidth: 0,
  556.       fill: DEFAULT_COLOR,
  557.       fillOpacity: 0.85
  558.     },
  559.     hollowInterval: {
  560.       fill: '#fff',
  561.       stroke: DEFAULT_COLOR,
  562.       fillOpacity: 0,
  563.       lineWidth: 2
  564.     },
  565.     area: {
  566.       lineWidth: 0,
  567.       fill: DEFAULT_COLOR,
  568.       fillOpacity: 0.6
  569.     },
  570.     polygon: {
  571.       lineWidth: 0,
  572.       fill: DEFAULT_COLOR,
  573.       fillOpacity: 1
  574.     },
  575.     hollowPolygon: {
  576.       fill: '#fff',
  577.       stroke: DEFAULT_COLOR,
  578.       fillOpacity: 0,
  579.       lineWidth: 2
  580.     },
  581.     hollowArea: {
  582.       fill: '#fff',
  583.       stroke: DEFAULT_COLOR,
  584.       fillOpacity: 0,
  585.       lineWidth: 2
  586.     },
  587.     line: {
  588.       stroke: DEFAULT_COLOR,
  589.       lineWidth: 2,
  590.       fill: null
  591.     },
  592.     edge: {
  593.       stroke: DEFAULT_COLOR,
  594.       lineWidth: 1,
  595.       fill: null
  596.     },
  597.     schema: {
  598.       stroke: DEFAULT_COLOR,
  599.       lineWidth: 1,
  600.       fill: null
  601.     }
  602.   },
  603.   // 辅助元素的样式
  604.   guide: {
  605.     line: {
  606.       lineStyle: {
  607.         stroke: 'rgba(0, 0, 0, .65)',
  608.         lineDash: [ 2, 2 ],
  609.         lineWidth: 1
  610.       },
  611.       text: {
  612.         position: 'start',
  613.         autoRotate: true,
  614.         style: {
  615.           fill: 'rgba(0, 0, 0, .45)',
  616.           fontSize: 12,
  617.           textAlign: 'start',
  618.           fontFamily: FONT_FAMILY,
  619.           textBaseline: 'bottom'
  620.         }
  621.       }
  622.     },
  623.     text: {
  624.       style: {
  625.         fill: 'rgba(0,0,0,.5)',
  626.         fontSize: 12,
  627.         textBaseline: 'middle',
  628.         textAlign: 'start',
  629.         fontFamily: FONT_FAMILY
  630.       }
  631.     },
  632.     region: {
  633.       style: {
  634.         lineWidth: 0, // 辅助框的边框宽度
  635.         fill: '#000', // 辅助框填充的颜色
  636.         fillOpacity: 0.04 // 辅助框的背景透明度
  637.       } // 辅助框的图形样式属性
  638.     },
  639.     html: {
  640.       alignX: 'middle',
  641.       alignY: 'middle'
  642.     },
  643.     dataRegion: {
  644.       style: {
  645.         region: {
  646.           lineWidth: 0,
  647.           fill: '#000000',
  648.           opacity: 0.04
  649.         },
  650.         text: {
  651.           textAlign: 'center',
  652.           textBaseline: 'bottom',
  653.           fontSize: 12,
  654.           fill: 'rgba(0, 0, 0, .65)'
  655.         }
  656.       }
  657.     },
  658.     dataMarker: {
  659.       top: true,
  660.       style: {
  661.         point: {
  662.           r: 3,
  663.           fill: '#FFFFFF',
  664.           stroke: '#1890FF',
  665.           lineWidth: 2
  666.         },
  667.         line: {
  668.           stroke: '#A3B1BF',
  669.           lineWidth: 1
  670.         },
  671.         text: {
  672.           fill: 'rgba(0, 0, 0, .65)',
  673.           opacity: 1,
  674.           fontSize: 12,
  675.           textAlign: 'start'
  676.         }
  677.       },
  678.       display: {
  679.         point: true,
  680.         line: true,
  681.         text: true
  682.       },
  683.       lineLength: 20,
  684.       direction: 'upward',
  685.       autoAdjust: true
  686.     }
  687.   },
  688.   pixelRatio: null
  689. };

其他

还有其他几个配置项：

  1.     // 默认使用 canvas
  2.     renderer: 'canvas',
  3.     // 全局的配置项开关
  4.   animate: true,
  5.   widthRatio: { // 宽度所占的分类的比例
  6.     column: 1 / 2, // 一般的柱状图占比 1/2
  7.     rose: 0.9999999, // 玫瑰图柱状占比 1
  8.     multiplePie: 1 / 1.3 // 多层的饼图、环图
  9.   },
  10.   // 折线图、区域图、path 当只有一个数据时，是否显示成点
  11.   showSinglePoint: false,
  12.   connectNulls: false, // 折线图存在 null 时是否忽视

使用

G2 全局的配置项有两种方式可以更改：

  • 通过 theme 更改全局样式
  • 单独调整单个样式 ```javascript G2.widthRatio.column = 2 / 3;

G2.legend.bottom = {} // 整体更改显示在下面的图例的配置项 ```