search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.69k stars 19.62k forks source link

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

Open guoliuqing123 opened 1 week ago

guoliuqing123 commented 1 week ago

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[bot] commented 1 week ago

@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 commented 1 week ago

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 commented 1 week ago

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