@antv/f2/es/components/treemap/treemapView.js

Charts for mobile visualization.

import { jsx } from '../../jsx';
export default (function (props) {
  var nodes = props.nodes,
    coord = props.coord;
  if (coord.isPolar) {
    var center = coord.center;
    var x = center.x,
      y = center.y;
    return jsx("group", null, nodes.map(function (node) {
      var xMin = node.xMin,
        xMax = node.xMax,
        yMin = node.yMin,
        yMax = node.yMax,
        color = node.color;
      return jsx("sector", {
        attrs: {
          x: x,
          y: y,
          lineWidth: '1px',
          stroke: '#fff',
          startAngle: xMin,
          endAngle: xMax,
          r0: yMin,
          r: yMax,
          anticlockwise: false,
          fill: color
        }
      });
    }));
  }
  return jsx("group", null, nodes.map(function (node) {
    var key = node.key,
      xMin = node.xMin,
      xMax = node.xMax,
      yMin = node.yMin,
      yMax = node.yMax,
      color = node.color;
    return jsx("rect", {
      key: key,
      attrs: {
        x: xMin,
        y: yMin,
        width: xMax - xMin,
        height: yMax - yMin,
        fill: color,
        lineWidth: '4px',
        stroke: '#fff',
        radius: '8px'
      },
      animation: {
        appear: {
          easing: 'linear',
          duration: 450,
          property: ['fillOpacity', 'strokeOpacity'],
          start: {
            fillOpacity: 0,
            strokeOpacity: 0
          },
          end: {
            fillOpacity: 1,
            strokeOpacity: 1
          }
        },
        update: {
          easing: 'linear',
          duration: 450,
          property: ['x', 'y', 'width', 'height', 'radius', 'lineWidth']
        }
      }
    });
  }));
});