echarts漏斗图的label右对齐解决方案

需求如图:

 方法一:创建一个div,利用绝对定位定位到需要的位置

 创建一个容器,将漏斗图和一个新div放到里面,然后将容器定位设置成`relative`,div的定位设为`absolute`。连接线用`hr`,重写样式。连接线宽度是一样的,所以标签能对齐。

这个方法的缺点是间距不太准确。

.chartContainer {
    position: relative;
    .label {
      position: absolute;
      top: 60px;
      right: 160px;
      div {
        padding: 18px 0;
        .hori-line {
          display: inline-block;
          width: 200px; // 指定固定宽度
          border-top: solid #e0e0e0 1px;
          vertical-align: middle;
          margin-right: 2px;
        }
      }
    }
}

方法二:利用两个漏斗图,让其中一个不显示label

option = {
    series: [
        {
            name:'漏斗图',
            type:'funnel',
            left: 0,
            top: 60,
            bottom: 60,
            width: '60%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: 0, // 设为 0,表示最大宽度为0,这样此层只会显示label
            //并且由于宽度为0,漏斗图是居中显示的,所以label线条的起始位置都是中间
            sort: 'descending',
            z: 1,// 控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
            gap: 2,
            label: {
                show: true,
                position: 'right'
            },
            labelLine: {
                length: 400, // label拉线的长度根据自己的场景进行设置即可
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            data: []
        },
        {
            name:'漏斗图label',
            type:'funnel',
            left: 0,
            top: 60,
            bottom: 60,
            width: '60%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: false,
            },
            data: []
        }
    ]
};

两个漏斗图的data值是一样的。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
漏斗图(funnel)是一种条形图,用于展示业务流程中各个阶段的数据占比情况。漏斗图呈现的数据是整体的一部分,每个阶段的数据占比自上而下递减,总计为100%。与饼图不同,漏斗图不需要使用数据轴。通过漏斗图,用户可以直观地比较各个阶段的业务数据,并发现潜在问题。 在Echarts中,可以通过配置图表组件来绘制漏斗图。以下是一个示例的配置代码: ```javascript var option = { series: [{ name: '漏斗图', type: 'funnel', left: '3%', sort: 'descending', top: 60, bottom: 60, width: '80%', min: 0, max: 100, minSize: '0%', maxSize: '100%', gap: 2, label: { show: true, position: 'inside' }, data: [ {value: 100, name: '浏览器'}, {value: 60, name: '添加到购物车'}, {value: 42, name: '购物车结算'}, {value: 25, name: '核对订单'}, {value: 9, name: '提交订单'}, {value: 4, name: '选择支付方式'}, {value: 2.5, name: '完成支付'} ] }] }; ``` 在上述代码中,通过`type: 'funnel'`指定了绘制漏斗图。`sort`参数可以设置为`descending`表示按照降序排列阶段,也可以设置为`ascending`表示按照升序排列阶段。`minSize`和`maxSize`参数可以控制每个阶段的最小宽度和最大宽度。`gap`参数表示每个阶段之间的间隔。`label`参数可以设置是否显示阶段的标签以及标签的位置。 请注意,以上代码只是一个示例配置,具体的漏斗图配置可以根据实际需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值