Echarts漏斗图:如何将文字显示在左边并添加横线连接

要让文字显示在漏斗图的左边并带有对应的横线连接,可以通过调整label和labelLine的属性来实现。下面是修改后的代码示例:

option = {
  title: {
    text: '职称构成',
    left: 'center',
    top: 'top',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%',
  },
  series: [
    {
      name: '职称构成',
      type: 'funnel',
      left: '10%',
      top: 40,
      bottom: 20,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '20%',
      maxSize: '100%',
      sort: 'descending',
      color: ['#7d76ff', '#00c8c8', '#81a3ff', '#b476ff'],
      gap: 2,
      label: {
        show: true,
        position: 'left', // 将文字显示在漏斗图的左边
        formatter: '{b}', // 显示职称名称
        align: 'right',
        verticalAlign: 'middle',
        fontWeight: 'bold',
        fontSize: 14,
      },
      labelLine: {
        show: true,
        length: 60, // 横线的长度
        lineStyle: {
          width: 1,
          type: 'solid',
        },
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1,
      },
      emphasis: {
        label: {
          fontSize: 20,
        },
      },
      data: [
        { value: 60, name: '中级' },
        { value: 40, name: '初级' },
        { value: 20, name: '高级' },
        { value: 80, name: '无' },
      ],
    },
  ],
};

通过设置label的position为'left',将文字显示在漏斗图的左边。然后设置labelLine的show为true,length为横线的长度,使得文字和对应图片部分之间连接一条横线。

Echarts漏斗图:如何将文字显示在左边并添加横线连接

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

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