antv 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();
原文地址: https://www.cveoy.top/t/topic/Fin 著作权归作者所有。请勿转载和采集!