G2Plot 漏斗图旋转 180 度教程：实现反向展示

要旋转 G2Plot 漏斗图 180 度，可以通过调整数据和坐标轴的方向来实现。具体步骤如下：

将数据按照倒序排列，即将漏斗图的最底部的数据放在最上面，最上面的数据放在最底部。可以使用 JavaScript 的 reverse() 方法来实现。
将 y 轴的 type 属性设置为 'category'，并将 label 的 rotate 属性设置为 180 度。这样 y 轴标签就会旋转 180 度，从而实现漏斗图的旋转。
如果需要使漏斗图的顶部和底部换位，可以将 y 轴的反转属性设置为 true。

下面是一个示例代码：

import { Funnel } from '@antv/g2plot';

const data = [
  { action: '访问', pv: 50000 },
  { action: '加入购物车', pv: 35000 },
  { action: '下单', pv: 25000 },
  { action: '支付', pv: 15000 },
  { action: '成交', pv: 8500 },
];

const reversedData = data.reverse();

const funnelPlot = new Funnel(document.getElementById('container'), {
  data: reversedData,
  xField: 'action',
  yField: 'pv',
  minSize: 0.3,
  maxSize: 0.9,
  label: {
    position: 'middle',
    layout: [
      {
        type: 'adjust-color',
      },
      {
        type: 'limit-in-plot',
      },
    ],
    rotate: 180, // 将标签旋转 180 度
    formatter: (datum) => `${datum.action} ${datum.pv}`,
  },
  tooltip: {
    formatter: (datum) => ({
      name: datum.action,
      value: datum.pv,
    }),
  },
  yAxis: {
    type: 'category', // 设置y轴类型为category
    label: {
      rotate: 180, // 将y轴标签旋转 180 度
    },
    reverse: true, // 将y轴反转，使漏斗图的顶部和底部换位
  },
});

funnelPlot.render();

通过以上步骤，您可以轻松地将 G2Plot 漏斗图旋转 180 度，以满足不同的展示需求。