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

  1. 将数据按照倒序排列,即将漏斗图的最底部的数据放在最上面,最上面的数据放在最底部。可以使用JavaScript的reverse()方法来实现。

  2. 将y轴的type属性设置为"category",并将label的rotate属性设置为180度。这样y轴标签就会旋转180度,从而实现漏斗图的旋转。

  3. 如果需要使漏斗图的顶部和底部换位,可以将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();
antv G2Plot漏斗图旋转180度

原文地址: https://www.cveoy.top/t/topic/Fin 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录