G2 默认内置的交互包括:

  1. active 激活;

  2. select 选中。

激活

开启以及关闭 shape 对于鼠标 hover 时的响应效果,G2 默认为各个 shape 内置了 active 效果。

  1. geom.active(false); // 关闭默认响应
  2. geom.active(true); // 开启默认响应

选中

各个几何标记 geom 选中的模式包含如下三种:

  1. 不可选中;

  2. 单选;

  3. 多选;

  4. 选中是否可取消选中。

选中模式的设置方式如下:

  1. geom.select(false); // 关闭
  2. geom.select(true); // 打开
  3. geom.select([true,] {
  4. mode: 'single' || 'multiple', // 选中模式,单选、多选
  5. style: {}, // 选中后 shape 的样式
  6. cancelable: true | false, // 选中之后是否允许取消选中,默认允许取消选中
  7. animate: true | false // 选中是否执行动画,默认执行动画
  8. });

默认情况下,G2 中只有饼图支持选中交互,其他 geom 的选中模式默认情况下都是关闭的。

下面通过一个实例来演示选中 select(enable, cfg) 方法的使用。

示例:地图省市下钻

本例中的地图 GeoJSON 数据请访问该地址获取:

  1. <script src="https://a.alipayobjects.com/g/datavis/china-geojson/1.0.0/index.js"></script>

或者 github
图表交互 - 图1

  1. let provinceChart;
  2. function processData(mapData) {
  3. // 构造虚拟数据
  4. const userData = [];
  5. const features = mapData.features;
  6. for (let i = 0; i < features.length; i++) {
  7. const name = features[i].properties.name;
  8. userData.push({
  9. name: name,
  10. value: Math.round(Math.random() * 1000),
  11. });
  12. }
  13. const ds = new DataSet();
  14. const geoDataView = ds.createView().source(mapData, {
  15. type: 'GeoJSON',
  16. }); // geoJSON 经纬度数据
  17. // 用户数据
  18. const dvData = ds.createView().source(userData);
  19. dvData.transform({
  20. type: 'geo.region',
  21. field: 'name',
  22. geoDataView: geoDataView,
  23. as: ['longitude', 'latitude'],
  24. });
  25. return dvData;
  26. }
  27. function renderProvinceChart(name) {
  28. const provinceData = ChinaGeoJSON[name];
  29. provinceChart && provinceChart.destroy();
  30. provinceChart = null;
  31. if (!provinceData) {
  32. return;
  33. }
  34. const dv = processData(provinceData);
  35. // start: 计算地图的最佳宽高
  36. const longitudeRange = dv.range('longitude');
  37. const latitudeRange = dv.range('latitude');
  38. const ratio = (longitudeRange[1] - longitudeRange[0]) / (latitudeRange[1] - latitudeRange[0]);
  39. let width;
  40. let height;
  41. if (ratio > 1) {
  42. width = 450;
  43. height = width / ratio;
  44. } else {
  45. width = 350 * ratio;
  46. height = 350;
  47. }
  48. // end: 计算地图的最佳宽高
  49. provinceChart = new G2.Chart({
  50. container: 'province',
  51. width,
  52. height,
  53. padding: 0
  54. });
  55. provinceChart.source(dv);
  56. provinceChart.axis(false);
  57. provinceChart.tooltip({
  58. showTitle: false,
  59. });
  60. provinceChart
  61. .polygon()
  62. .position('longitude*latitude')
  63. .label('name', {
  64. textStyle: {
  65. fill: '#fff',
  66. fontSize: 10,
  67. shadowBlur: 2,
  68. shadowColor: 'rgba(0, 0, 0, .45)'
  69. },
  70. })
  71. .style({
  72. stroke: '#fff',
  73. lineWidth: 1,
  74. })
  75. .color('value', '#BAE7FF-#1890FF-#0050B3');
  76. provinceChart.render();
  77. }
  78. const mapData = ChinaGeoJSON['China'];
  79. const chinaDv = processData(mapData);
  80. const longitudeRange = chinaDv.range('longitude');
  81. const latitudeRange = chinaDv.range('latitude');
  82. const ratio = (longitudeRange[1] - longitudeRange[0]) / (latitudeRange[1] - latitudeRange[0]);
  83. const chart = new G2.Chart({
  84. container: 'china',
  85. width: 250,
  86. height: 250 / ratio,
  87. padding: 0,
  88. animate: false
  89. });
  90. chart.source(chinaDv);
  91. chart.tooltip({
  92. showTitle: false,
  93. });
  94. chart.axis(false);
  95. chart
  96. .polygon()
  97. .position('longitude*latitude')
  98. .tooltip('name')
  99. .style({
  100. stroke: '#bfbfbf',
  101. lineWidth: 1,
  102. fill: '#e3e3e3',
  103. globalAlpha: 0.85,
  104. cursor: 'pointer', // 设置鼠标手势
  105. })
  106. .select({
  107. // 设置是否允许选中以及选中样式
  108. mode: 'single', // 多选还是单选
  109. style: {
  110. fill: '#1890ff', // 选中的样式
  111. },
  112. });
  113. chart.render();
  114. const shapes = chart.getAllGeoms()[0].getShapes();
  115. for (let i = 0, len = shapes.length; i < len; i++) {
  116. const shape = shapes[i];
  117. const origin = shape.get('origin')['_origin'];
  118. const name = origin.name;
  119. if (name === '浙江') {
  120. renderProvinceChart(name);
  121. chart.getAllGeoms()[0].setShapeSelected(shape);
  122. }
  123. }
  124. chart.on('plotclick', function(ev) {
  125. const shape = ev.shape;
  126. if (!shape || !shape.name) {
  127. return false;
  128. }
  129. if (shape.get('selected')) {
  130. const item = shape.get('origin');
  131. const data = item['_origin'];
  132. const name = data.name;
  133. renderProvinceChart(name);
  134. } else {
  135. provinceChart && provinceChart.clear();
  136. }
  137. });