获取方式： G2.Global

G2的全局配置信息，用于主题等的设置。

属性

G2.Global 中属性有两种类型：

  • 度量相关
  • 皮肤主题相关

皮肤相关的属性如下：

  1. var DEFAULT_COLOR = '#4E7CCC';
  2. var FONT_FAMILY = '"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", SimSun, "sans-serif"';
  4. var Theme = {
  5.   defaultColor: DEFAULT_COLOR, // 默认主题色
  6.   plotCfg: {
  7.     margin: [20, 80, 60, 80]
  8.   },
  9.   facetCfg: {
  10.     type: 'rect',
  11.     margin: 10,
  12.     facetTitle: {
  13.       titleOffset: 16,
  14.       colDimTitle: {
  15.         title: {
  16.           fontSize: 14,
  17.           textAlign: 'center',
  18.           fill: '#999'
  19.         }
  20.       },
  21.       colTitle: {
  22.         title: {
  23.           fontSize: 12,
  24.           textAlign: 'center',
  25.           fill: '#999'
  26.         }
  27.       },
  28.       rowTitle: {
  29.         title: {
  30.           fontSize: 12,
  31.           textAlign: 'center',
  32.           rotate: 90,
  33.           fill: '#999'
  34.         }
  35.       },
  36.       rowDimTitle: {
  37.         title: {
  38.           fontSize: 12,
  39.           textAlign: 'center',
  40.           rotate: 90,
  41.           fill: '#999'
  42.         }
  43.       }
  44.     }
  45.   },
  46.   binWidth: 0.03, // bin 统计的默认值
  47.   fontFamily: FONT_FAMILY,
  48.   colors: {
  49.     'default': ['#4E7CCC', '#36B3C3', '#4ECDA5', '#94E08A', '#E2F194', '#EDCC72', '#F8AB60', '#F9815C', '#EB4456', '#C82B3D'],
  50.     intervalStack: ['#4E7CCC', '#36B3C3', '#4ECDA5', '#94E08A', '#E2F194', '#EDCC72', '#F8AB60', '#F9815C', '#EB4456', '#C82B3D']
  51.   },
  52.   shapes: {
  53.     point: ['hollowCircle', 'hollowSquare', 'hollowDiamond', 'hollowBowtie', 'hollowTriangle',
  54.       'hollowHexagon', 'cross', 'tick', 'plus', 'hyphen', 'line'],
  55.     line: ['line', 'dash', 'dot'],
  56.     area: ['area']
  57.   },
  58.   hues: ['red', 'yellow', 'green', 'blue', 'orange', 'purple', 'pink', 'brown', 'white', 'gray', 'black'],
  59.   axis: {
  60.     top: {
  61.       position: 'top',
  62.       titleOffset: 30,
  63.       title: {
  64.         fontSize: 12,
  65.         fill: '#999'
  66.       },
  67.       labels: {
  68.         label: {
  69.           fill: '#404040',
  70.           fontSize: 12
  71.         }
  72.       },
  73.       tickLine: {
  74.         lineWidth: 1,
  75.         stroke: '#ccc',
  76.         value: 5
  77.       }
  78.     },
  79.     bottom: {
  80.       position: 'bottom',
  81.       titleOffset: 45,
  82.       labelOffset: 20,
  83.       title: {
  84.         fontSize: 12,
  85.         textAlign: 'center',
  86.         fill: '#999'
  87.       },
  88.       labels: {
  89.         label: {
  90.           fill: '#404040',
  91.           fontSize: 12
  92.         }
  93.       },
  94.       line: {
  95.         lineWidth: 1,
  96.         stroke: '#ccc'
  97.       },
  98.       tickLine: {
  99.         lineWidth: 1,
  100.         stroke: '#ccc',
  101.         value: 5
  102.       }
  103.     },
  104.     left: {
  105.       position: 'left',
  106.       titleOffset: 60,
  107.       labelOffset: 13,
  108.       title: {
  109.         fontSize: 12,
  110.         fill: '#999'
  111.       },
  112.       labels: {
  113.         label: {
  114.           fill: '#404040'
  115.         }
  116.       },
  117.       line: {
  118.         lineWidth: 1,
  119.         stroke: '#ccc'
  120.       },
  121.       tickLine: {
  122.         lineWidth: 1,
  123.         stroke: '#ccc',
  124.         value: 5
  125.       },
  126.       grid: {
  127.         line: {
  128.           stroke: '#d9d9d9',
  129.           lineWidth: 1,
  130.           lineDash: [2, 2]
  131.         }
  132.       }
  133.     },
  134.     right: {
  135.       position: 'right',
  136.       titleOffset: 60,
  137.       labelOffset: 13,
  138.       title: {
  139.         fontSize: 12,
  140.         fill: '#999'
  141.       },
  142.       labels: {
  143.         label: {
  144.           fill: '#404040'
  145.         }
  146.       },
  147.       line: {
  148.         lineWidth: 1,
  149.         stroke: '#ccc'
  150.       },
  151.       tickLine: {
  152.         lineWidth: 1,
  153.         stroke: '#ccc',
  154.         value: 5
  155.       }
  156.     },
  157.     circle: {
  158.       labelOffset: 5,
  159.       line: {
  160.         lineWidth: 1,
  161.         stroke: '#ccc'
  162.       },
  163.       grid: {
  164.         line: {
  165.           stroke: '#d9d9d9',
  166.           lineWidth: 1,
  167.           lineDash: [1, 3]
  168.         }
  169.       },
  170.       labels: {
  171.         label: {
  172.           fill: '#404040'
  173.         }
  174.       }
  175.     },
  176.     gauge: {
  177.       grid: null,
  178.       labelOffset: 5,
  179.       tickLine: {
  180.         lineWidth: 1,
  181.         value: -20,
  182.         stroke: '#ccc'
  183.       },
  184.       subTick: 5,
  185.       labels: {
  186.         label: {
  187.           fill: '#404040'
  188.         }
  189.       }
  190.     },
  191.     clock: {
  192.       grid: null,
  193.       labelOffset: 5,
  194.       tickLine: {
  195.         lineWidth: 1,
  196.         value: -20,
  197.         stroke: '#C0D0E0'
  198.       },
  199.       subTick: 5,
  200.       labels: {
  201.         label: {
  202.           fill: '#404040'
  203.         }
  204.       }
  205.     },
  206.     radius: {
  207.       titleOffset: 45,
  208.       labels: {
  209.         label: {
  210.           fill: '#404040'
  211.         }
  212.       },
  213.       line: {
  214.         lineWidth: 1,
  215.         stroke: '#ccc'
  216.       },
  217.       grid: {
  218.         line: {
  219.           stroke: '#d9d9d9',
  220.           lineWidth: 1,
  221.           lineDash: [2, 2]
  222.         },
  223.         type: 'circle'
  224.       }
  225.     },
  226.     helix: {
  227.       grid: null,
  228.       labels: {
  229.         label: null
  230.       },
  231.       line: {
  232.         lineWidth: 1,
  233.         stroke: '#ccc'
  234.       },
  235.       tickLine: {
  236.         lineWidth: 1,
  237.         value: 5,
  238.         stroke: '#ccc'
  239.       }
  240.     }
  241.   },
  242.   labels: {
  243.     offset: 14,
  244.     label: {
  245.       fill: '#666',
  246.       fontSize: 12
  247.     }
  248.   },
  249.   treemapLabels: {
  250.     offset: 10,
  251.     label: {
  252.       fill: '#fff',
  253.       fontSize: 14,
  254.       textBaseline: 'top',
  255.       fontStyle: 'bold'
  256.     }
  257.   },
  258.   innerLabels: {
  259.     label: {
  260.       fill: '#fff',
  261.       fontSize: 12
  262.     }
  263.   }, // 在theta坐标系下的饼图文本内部的样式
  264.   thetaLabels: {
  265.     labelLine: {
  266.       lineWidth: 1
  267.     },
  268.     labelHeight: 14,
  269.     offset: 30
  270.   }, // 在theta坐标系下的饼图文本的样式
  271.   legend: {
  272.     right: {
  273.       position: 'right',
  274.       back: null,
  275.       spacingX: 10,
  276.       spacingY: 12,
  277.       markerAlign: 'center',
  278.       wordSpaceing: 12,
  279.       width: 20,
  280.       height: 156
  281.     },
  282.     left: {
  283.       position: 'left',
  284.       back: null,
  285.       spacingX: 10,
  286.       spacingY: 12,
  287.       markerAlign: 'center',
  288.       wordSpaceing: 12,
  289.       width: 20,
  290.       height: 156
  291.     },
  292.     top: {
  293.       position: 'top',
  294.       title: null,
  295.       back: null,
  296.       spacingX: 16,
  297.       spacingY: 10,
  298.       markerAlign: 'center',
  299.       wordSpaceing: 12,
  300.       width: 156,
  301.       height: 20
  302.     },
  303.     bottom: {
  304.       position: 'bottom',
  305.       title: null,
  306.       back: null,
  307.       spacingX: 16,
  308.       spacingY: 10,
  309.       markerAlign: 'center',
  310.       wordSpaceing: 12,
  311.       width: 156,
  312.       height: 20
  313.     }
  314.   },
  315.   tooltip: {
  316.     crosshairs: false,
  317.     offset: 15,
  318.     crossLine: {
  319.       stroke: '#666'
  320.     },
  321.     wordSpaceing: 6,
  322.     markerCfg: {
  323.       symbol: 'circle',
  324.       radius: 3
  325.     }
  326.   },
  327.   activeShape: {
  328.     point: {
  329.       radius: 5,
  330.       fillOpacity: 0.7
  331.     },
  332.     hollowPoint: {
  333.       lineWidth: 2,
  334.       radius: 4
  335.     },
  336.     interval: {
  337.       fillOpacity: 0.7
  338.     },
  339.     hollowInterval: {
  340.       lineWidth: 2
  341.     },
  342.     area: {
  343.       fillOpacity: 0.85
  344.     },
  345.     hollowArea: {
  346.       lineWidth: 2
  347.     },
  348.     line: {
  349.       lineWidth: 2
  350.     },
  351.     polygon: {
  352.       fillOpacity: 0.75
  353.     }
  354.   }, // 图形激活时，鼠标移动到上面
  355.   shape: {
  356.     point: {
  357.       lineWidth: 1,
  358.       fill: DEFAULT_COLOR,
  359.       radius: 4
  360.     },
  361.     hollowPoint: {
  362.       fill: '#fff',
  363.       lineWidth: 1,
  364.       stroke: DEFAULT_COLOR,
  365.       radius: 3
  366.     },
  367.     interval: {
  368.       lineWidth: 0,
  369.       fill: DEFAULT_COLOR,
  370.       fillOpacity: 0.85
  371.     },
  372.     pie: {
  373.       lineWidth: 1,
  374.       stroke: '#fff'
  375.     },
  376.     hollowInterval: {
  377.       fill: '#fff',
  378.       stroke: DEFAULT_COLOR,
  379.       fillOpacity: 0,
  380.       lineWidth: 1
  381.     },
  382.     area: {
  383.       lineWidth: 0,
  384.       fill: DEFAULT_COLOR,
  385.       fillOpacity: 0.6
  386.     },
  387.     polygon: {
  388.       lineWidth: 0,
  389.       fill: DEFAULT_COLOR,
  390.       fillOpacity: 1
  391.     },
  392.     hollowPolygon: {
  393.       fill: '#fff',
  394.       stroke: DEFAULT_COLOR,
  395.       fillOpacity: 0,
  396.       lineWidth: 1
  397.     },
  398.     hollowArea: {
  399.       fill: '#fff',
  400.       stroke: DEFAULT_COLOR,
  401.       fillOpacity: 0,
  402.       lineWidth: 1
  403.     },
  404.     line: {
  405.       stroke: DEFAULT_COLOR,
  406.       lineWidth: 1,
  407.       fill: null
  408.     }
  409.   },
  410.   guide: {
  411.     text: {
  412.       fill: '#666',
  413.       fontSize: 12
  414.     },
  415.     line: {
  416.       stroke: DEFAULT_COLOR,
  417.       lineDash: [0, 2, 2]
  418.     },
  419.     rect: {
  420.       lineWidth: 0,
  421.       fill: DEFAULT_COLOR,
  422.       fillOpacity: 0.1
  423.     },
  424.     tag: {
  425.       line: {
  426.         stroke: DEFAULT_COLOR,
  427.         lineDash: [0, 2, 2]
  428.       },
  429.       text: {
  430.         fill: '#666',
  431.         fontSize: 12,
  432.         textAlign: 'center'
  433.       },
  434.       rect: {
  435.         lineWidth: 0,
  436.         fill: DEFAULT_COLOR,
  437.         fillOpacity: 0.1
  438.       }
  439.     },
  440.     html: {
  441.       align: 'cc'
  442.     }
  443.   },
  444.   tooltipMarker: {
  445.     fill: '#fff',
  446.     symbol: 'circle',
  447.     lineWidth: 2,
  448.     stroke: DEFAULT_COLOR,
  449.     radius: 4
  450.   } // 提示信息在折线图、区域图上形成点的样式
  451. };

方法

G2.Global 只提供了一种方法：setTheme(string | object) 设置主题。

Global.setTheme

方法名： Global.setTheme(theme)

参数

  • theme: String | Object

当参数为字符串时，取值必须为 ['default', 'dark', 'cheery'] 中的一种，每一个值代表一个主题，否则还是使用默认的主题。详见皮肤。

  1. G2.Global.setTheme('dark'); // 将主题设置为 dark

当参数为 object 对象时，可以是 Global.Theme.dark、Global.Theme.default、Global.Theme.cheery 这三种，分别对应 'dark' 'default' 'cheery' 这三个主题名。

也可是使用户自定义的主题配置。

  1. G2.Global.setTheme(G2.Theme.dark); // 将主题设置为 dark
  3. var customTheme = {
  4.   titleOffset: 30,
  5.   plotCfg: {
  6.     background: {
  7.       fill: '#18242E'
  8.     }
  9.   },
  10.   facetCfg: {
  11.     type: 'rect',
  12.     margin: 40
  13.   }
  14. };
  15. Global.setTheme(customTheme); // 将主题设置为用户自定义的主题