apache / echarts

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

Anybody idea for funnel by bar chart #11831

Closed charian closed 2 years ago

charian commented 4 years ago

What problem does this feature solve?

Please help for made funnel chart. I'm making a funnel report using a bar chart.

As you can see in the code, I'm making it without big problems. But I want to represent the converted area, but I can't think of a way. Help me with any ideas.

What does the proposed API look like?

option = {
    tooltip : {
        trigger: 'item',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    legend: {
        data:['converted','dropoff'],
        bottom: 0
    },
    itemStyle: {},
    barWidth: '100px',
    label: {
        show: true
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '7%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['step1','step2','step3','step4','step5']
        }
    ],
    yAxis : [
        {
            type : 'value',
            data: ['20%', '40%', '60%', '80%', '100%'],
            offset: 10
        }
    ],
    series : [
        {
            name:'converted',
            type:'bar',
            stack: 'funnel',
            data:[220, 132, 101, 72, 10],
            itemStyle: {
                color: '#229AE8',
            },
            label: {
                position: 'insideTop'
            },
            z: 1
        },
        {
            name:'dropoff',
            type:'bar',
            stack: 'funnel',
            data:[0, 88,31, 29, 62],
            itemStyle: {
                color: '#C2E7FF'
            },
            label: {
                show: false,
                position: 'top',
                color: '#229AE8'
            },
            z: 1,
            markPoint : {
                silent: true,
                data : [
                    {
                        value : 0, 
                        xAxis: 0, 
                        yAxis: 220,

                    },
                    {
                        value : 88, 
                        xAxis: 1, 
                        yAxis: 220

                    },
                    {
                        value : 31, 
                        xAxis: 2, 
                        yAxis: 132

                    },
                    {
                        value : 29, 
                        xAxis: 3, 
                        yAxis: 101

                    },
                    {
                        value : 62, 
                        xAxis: 4, 
                        yAxis: 72

                    }
                ]
            }
        }

    ]
};

Screen Shot 2019-12-11 at 12 14 26 PM

echarts-bot[bot] commented 4 years ago

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

github-actions[bot] commented 2 years ago

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] commented 2 years ago

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!