adaptor.js 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. import { __assign } from "tslib";
  2. import { get, isNil } from '@antv/util';
  3. import { animation, interaction, pattern, scale, theme } from '../../adaptor/common';
  4. import { interval } from '../../adaptor/geometries';
  5. import { deepAssign, flow, renderStatistic } from '../../utils';
  6. import { getLiquidData } from './utils';
  7. /**
  8. * geometry 处理
  9. * @param params
  10. */
  11. function geometry(params) {
  12. var chart = params.chart, options = params.options;
  13. var percent = options.percent, liquidStyle = options.liquidStyle, radius = options.radius, outline = options.outline, wave = options.wave, shape = options.shape, shapeStyle = options.shapeStyle, animation = options.animation;
  14. chart.scale({
  15. percent: {
  16. min: 0,
  17. max: 1,
  18. },
  19. });
  20. chart.data(getLiquidData(percent));
  21. var color = options.color || chart.getTheme().defaultColor;
  22. var p = deepAssign({}, params, {
  23. options: {
  24. xField: 'type',
  25. yField: 'percent',
  26. // radius 放到 columnWidthRatio 中。
  27. // 保证横向的大小是根据 radius 生成的
  28. widthRatio: radius,
  29. interval: {
  30. color: color,
  31. style: liquidStyle,
  32. shape: 'liquid-fill-gauge',
  33. },
  34. },
  35. });
  36. var ext = interval(p).ext;
  37. var geometry = ext.geometry;
  38. var background = chart.getTheme().background;
  39. var customInfo = {
  40. percent: percent,
  41. radius: radius,
  42. outline: outline,
  43. wave: wave,
  44. shape: shape,
  45. shapeStyle: shapeStyle,
  46. background: background,
  47. animation: animation,
  48. };
  49. // 将 radius 传入到自定义 shape 中
  50. geometry.customInfo(customInfo);
  51. // 关闭组件
  52. chart.legend(false);
  53. chart.axis(false);
  54. chart.tooltip(false);
  55. return params;
  56. }
  57. /**
  58. * 统计指标文档
  59. * @param params
  60. */
  61. export function statistic(params, updated) {
  62. var chart = params.chart, options = params.options;
  63. var statistic = options.statistic, percent = options.percent, meta = options.meta;
  64. // 先清空标注,再重新渲染
  65. chart.getController('annotation').clear(true);
  66. var metaFormatter = get(meta, ['percent', 'formatter']) || (function (v) { return "".concat((v * 100).toFixed(2), "%"); });
  67. var contentOpt = statistic.content;
  68. if (contentOpt) {
  69. contentOpt = deepAssign({}, contentOpt, {
  70. content: !isNil(contentOpt.content) ? contentOpt.content : metaFormatter(percent),
  71. });
  72. }
  73. renderStatistic(chart, { statistic: __assign(__assign({}, statistic), { content: contentOpt }), plotType: 'liquid' }, { percent: percent });
  74. if (updated) {
  75. chart.render(true);
  76. }
  77. return params;
  78. }
  79. /**
  80. * 水波图适配器
  81. * @param chart
  82. * @param options
  83. */
  84. export function adaptor(params) {
  85. // flow 的方式处理所有的配置到 G2 API (主题前置,会影响绘制的取色)
  86. return flow(theme, pattern('liquidStyle'), geometry, statistic, scale({}), animation, interaction)(params);
  87. }
  88. //# sourceMappingURL=adaptor.js.map