Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] 漏斗图设置圆角 #20508

Open
guoliuqing123 opened this issue Nov 13, 2024 · 3 comments
Open

[Bug] 漏斗图设置圆角 #20508

guoliuqing123 opened this issue Nov 13, 2024 · 3 comments
Labels
support topic: funnel waiting-for: author

Comments

@guoliuqing123
Copy link

Version

无

Link to Minimal Reproduction

无

Steps to Reproduce

let data1 =[
{
"number": 90,
"avgAge": null,
"license": "A1",
"proportion": 21.2,
"type": null,
"name": "A1",
"value": 90,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 90,
"avgAge": null,
"license": "A1",
"proportion": 21.2,
"type": null,
"name": "A1",
"value": 90,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 88,
"avgAge": null,
"license": "A2",
"proportion": 20.8,
"type": null,
"name": "A2",
"value": 88,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 88,
"avgAge": null,
"license": "A2",
"proportion": 20.8,
"type": null,
"name": "A2",
"value": 88,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 0,
"avgAge": null,
"license": "A3",
"proportion": 0,
"type": null,
"name": "A3",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 0,
"avgAge": null,
"license": "A3",
"proportion": 0,
"type": null,
"name": "A3",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 0,
"avgAge": null,
"license": "A4",
"proportion": 0,
"type": null,
"name": "A4",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 0,
"avgAge": null,
"license": "A4",
"proportion": 0,
"type": null,
"name": "A4",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 0,
"avgAge": null,
"license": "A5",
"proportion": 0,
"type": null,
"name": "A5",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 0,
"avgAge": null,
"license": "A5",
"proportion": 0,
"type": null,
"name": "A5",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 0,
"avgAge": null,
"license": "A6",
"proportion": 0,
"type": null,
"name": "A6",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 0,
"avgAge": null,
"license": "A6",
"proportion": 0,
"type": null,
"name": "A6",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 0,
"avgAge": null,
"license": "A7",
"proportion": 0,
"type": null,
"name": "A7",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 0,
"avgAge": null,
"license": "A7",
"proportion": 0,
"type": null,
"name": "A7",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 0,
"avgAge": null,
"license": "B1",
"proportion": 0,
"type": null,
"name": "B1",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 0,
"avgAge": null,
"license": "B1",
"proportion": 0,
"type": null,
"name": "B1",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 1,
"avgAge": null,
"license": "B2",
"proportion": 0.2,
"type": null,
"name": "B2",
"value": 1,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 1,
"avgAge": null,
"license": "B2",
"proportion": 0.2,
"type": null,
"name": "B2",
"value": 1,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 0,
"avgAge": null,
"license": "B3",
"proportion": 0,
"type": null,
"name": "B3",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 0,
"avgAge": null,
"license": "B3",
"proportion": 0,
"type": null,
"name": "B3",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 0,
"avgAge": null,
"license": "B4",
"proportion": 0,
"type": null,
"name": "B4",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 0,
"avgAge": null,
"license": "B4",
"proportion": 0,
"type": null,
"name": "B4",
"value": 0,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 19,
"avgAge": null,
"license": "C1",
"proportion": 4.5,
"type": null,
"name": "C1",
"value": 19,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 19,
"avgAge": null,
"license": "C1",
"proportion": 4.5,
"type": null,
"name": "C1",
"value": 19,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 53,
"avgAge": null,
"license": "C2",
"proportion": 12.5,
"type": null,
"name": "C2",
"value": 53,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 53,
"avgAge": null,
"license": "C2",
"proportion": 12.5,
"type": null,
"name": "C2",
"value": 53,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 41,
"avgAge": null,
"license": "C3",
"proportion": 9.7,
"type": null,
"name": "C3",
"value": 41,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 41,
"avgAge": null,
"license": "C3",
"proportion": 9.7,
"type": null,
"name": "C3",
"value": 41,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 33,
"avgAge": null,
"license": "C4",
"proportion": 7.8,
"type": null,
"name": "C4",
"value": 33,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 33,
"avgAge": null,
"license": "C4",
"proportion": 7.8,
"type": null,
"name": "C4",
"value": 33,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 95,
"avgAge": null,
"license": "C5",
"proportion": 22.4,
"type": null,
"name": "C5",
"value": 95,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 95,
"avgAge": null,
"license": "C5",
"proportion": 22.4,
"type": null,
"name": "C5",
"value": 95,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 1,
"avgAge": null,
"license": "D1",
"proportion": 0.2,
"type": null,
"name": "D1",
"value": 1,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 1,
"avgAge": null,
"license": "D1",
"proportion": 0.2,
"type": null,
"name": "D1",
"value": 1,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
},
{
"number": 2,
"avgAge": null,
"license": "D2",
"proportion": 0.5,
"type": null,
"name": "D2",
"value": 2,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null
},
{
"number": 2,
"avgAge": null,
"license": "D2",
"proportion": 0.5,
"type": null,
"name": "D2",
"value": 2,
"countValue": null,
"eduCountList": null,
"omDeptId": null,
"omOfficeId": null,
"omManageUnitId": null,
"cnsType": null,
"children": null,
"itemStyle": {
"normal": {
"color": "#fff",
"borderWidth": 0,
"borderColor": "black",
"height": 0
}
}
}
]

  option = {
    tooltip: {
      // show:false,
      // trigger: 'item',
      formatter: '{b} : {c}'
    },
    series: [
      {
        name: '从业证照',
        type: 'funnel',
        orient: 'horizontal',
        left:5,
        right:0,
        gap: 0, // 矩形间距
        minSize: '20%',// 数据最小值的占比宽度
        maxSize: '100%',// 数据最大值的占比宽度
        sort: function (params) {
          return params
        }, // 数据排序方式
        itemStyle: {
          normal: {
            borderWidth: 0,
            color: function (params) {
              if (params.name === 'A1') {
                return '#6d80ff'
              } else if (params.name === 'A2') {
                return '#6d80ff'
              } else if (params.name === 'A3') {
                return '#6d80ff'
              } else if (params.name === 'A4') {
                return '#6d80ff'
              } else if (params.name === 'A5') {
                return '#6d80ff'
              } else if (params.name === 'A6') {
                return '#6d80ff'
              } else if (params.name === 'A7') {
                return '#6d80ff'
              } else if (params.name === 'B1') {
                return '#3fbcb3'
              } else if (params.name === 'B2') {
                return '#3fbcb3'
              } else if (params.name === 'B3') {
                return '#75d1c6'
              } else if (params.name === 'B4') {
                return '#42c1ac'
              } else if (params.name === 'C1') {
                return '#90a8cf'
              } else if (params.name === 'C2') {
                return '#93aac8'
              } else if (params.name === 'C3') {
                return '#93a8c6'
              } else if (params.name === 'C4') {
                return '#8aa7d6'
              } else if (params.name === 'C5') {
                return '#8ea8d3'
              } else if (params.name === 'D1') {
                return '#8970fd'
              } else if (params.name === 'D2') {
                return '#878efd'
              }
            },
            height: 22
          },
        },
        data: data1,
        label: {
          position: 'inside',
          formatter: function (params) {
            if (params.borderColor === '#fff') {
              return params.data.license
            }
            if (params.borderColor === 'black') {
              return ''
            }
          },
          color: '#fff',
          fontSize: 11,
        },
        labelLine: false, // 是否显示视觉引导线
      },
      {
        name: '从业证照',
        type: 'funnel',
        orient: 'horizontal',
        left:5,
        right:0,
        gap: 0, // 矩形间距
        maxSize: 0,// 设为 0，表示最大宽度为0，这样此层只会显示label
        sort: function (params) {
          return params
        }, // 数据排序方式
        itemStyle: {
          normal: {
            borderWidth: 0,
            color: function (params) {
              if (params.name === 'A1') {
                return '#6d80ff'
              } else if (params.name === 'A2') {
                return '#6d80ff'
              } else if (params.name === 'A3') {
                return '#6d80ff'
              } else if (params.name === 'A4') {
                return '#6d80ff'
              } else if (params.name === 'A5') {
                return '#6d80ff'
              } else if (params.name === 'A6') {
                return '#6d80ff'
              } else if (params.name === 'A7') {
                return '#6d80ff'
              } else if (params.name === 'B1') {
                return '#3fbcb3'
              } else if (params.name === 'B2') {
                return '#3fbcb3'
              } else if (params.name === 'B3') {
                return '#75d1c6'
              } else if (params.name === 'B4') {
                return '#42c1ac'
              } else if (params.name === 'C1') {
                return '#90a8cf'
              } else if (params.name === 'C2') {
                return '#93aac8'
              } else if (params.name === 'C3') {
                return '#93a8c6'
              } else if (params.name === 'C4') {
                return '#8aa7d6'
              } else if (params.name === 'C5') {
                return '#8ea8d3'
              } else if (params.name === 'D1') {
                return '#8970fd'
              } else if (params.name === 'D2') {
                return '#878efd'
              }
            },
            height: 22
          },
        },
        data: data1,
        labelLine: {
          show: false,
          position: 'bottom',
          // length: 105, // label拉线的长度根据自己的场景进行设置即可
        },
        label: {
          position: 'bottom',
          formatter: function (params) {
            if (params.borderColor === '#fff') {
              return params.data.value
            }
            if (params.borderColor === 'black') {
              return ''
            }
          },
          color: '#999999',
        },
      },
    ]
  };

Current Behavior

想要给漏斗图设置圆角 没有找到配置的项
QQ

Expected Behavior

想要给漏斗图实现这个效果
QQ截图20241113095753

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response
@echarts-bot echarts-bot bot added the pending We are not sure about whether this is a bug/new feature. label Nov 13, 2024
@echarts-bot ECharts Bot
Copy link

echarts-bot bot commented Nov 13, 2024

@guoliuqing123 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] Funnel chart set rounded corners

@helgasoft
Copy link

helgasoft commented Nov 14, 2024 •
edited
Loading

Simple lines will work better than funnel - Demo.

🚩 This is not-a-bug or feature request. Please follow Official posting guidelines below:

The issue list is reserved exclusively for bug reports and feature requests.
For usage questions, please use the following resources:

@Ovilia
Copy link
Contributor

Ovilia commented Nov 14, 2024

@helgasoft That's genius. I was just going to reply that custom series should be required.

@Ovilia Ovilia added support waiting-for: author topic: funnel and removed bug pending We are not sure about whether this is a bug/new feature. labels Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
support topic: funnel waiting-for: author
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Ovilia @helgasoft @guoliuqing123