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

dynamic multiple titles auto fit in a multiple funnel chart?在一个多图漏斗图中,如何让多个title自适应展示? #13259

Closed developmentmachine closed 4 years ago

developmentmachine commented 4 years ago

What problem does this feature solve?

multiple titles will be beautiful

What does the proposed API look like?

funnel chart option is down below right here:

image

funnel chart option is down below right here:

option = {
    "tooltip": {
        "trigger": "item"
    },
    "legend": {
        "data": [
            "详情页uv",
            "yyy",
            "哈哈哈哈",
            "订单uv",
            "商品发布24小时之内成交的商品数"
        ],
        "type": "scroll"
    },
    "series": [{
            "name": "其他分类",
            "type": "funnel",
            "width": "45%",
            "left": "0%",
            "sort": "none",
            "label": {
                "position": "inside"
            },
            "data": [{
                    "name": "详情页uv",
                    "value": "193661",
                    "transformRatio": "99.14%"
                },
                {
                    "name": "yyy",
                    "value": "191990",
                    "transformRatio": "2.98%"
                },
                {
                    "name": "哈哈哈哈",
                    "value": "5730",
                    "transformRatio": "70.84%"
                },
                {
                    "name": "订单uv",
                    "value": "4059",
                    "transformRatio": "41.17%"
                },
                {
                    "name": "商品发布24小时之内成交的商品数",
                    "value": "1671",
                    "transformRatio": "0%"
                }
            ]
        },
        {
            "name": "手机",
            "type": "funnel",
            "width": "45%",
            "left": "50%",
            "sort": "none",
            "label": {
                "position": "inside"
            },
            "data": [{
                    "name": "详情页uv",
                    "value": "602805",
                    "transformRatio": "98.37%"
                },
                {
                    "name": "yyy",
                    "value": "592960",
                    "transformRatio": "6.97%"
                },
                {
                    "name": "哈哈哈哈",
                    "value": "41351",
                    "transformRatio": "76.19%"
                },
                {
                    "name": "订单uv",
                    "value": "31506",
                    "transformRatio": "31.25%"
                },
                {
                    "name": "商品发布24小时之内成交的商品数",
                    "value": "9845",
                    "transformRatio": "0%"
                }
            ]
        }
    ],
    "title": [{
            "text": "其他分类",
            "top": "bottom",
            "textStyle": {
                "fontFamily": "sans-serif",
                "fontSize": "18"
            },
            "left": "22.5%"
        },
        {
            "text": "手机",
            "top": "bottom",
            "textStyle": {
                "fontFamily": "sans-serif",
                "fontSize": "18"
            },
            "left": "72.5%"
        }
    ]
};
100pah commented 4 years ago

Try title.textAlign: center

developmentmachine commented 4 years ago

image

Try title.textAlign: center

not work

pissang commented 4 years ago

Not sure how you did it. I tried it and it works

option = {
    "tooltip": {
        "trigger": "item"
    },
    "legend": {
        "data": [
            "详情页uv",
            "yyy",
            "哈哈哈哈",
            "订单uv",
            "商品发布24小时之内成交的商品数"
        ],
        "type": "scroll"
    },
    "series": [{
            "name": "其他分类",
            "type": "funnel",
            "width": "45%",
            "left": "0%",
            "sort": "none",
            "label": {
                "position": "inside"
            },
            "data": [{
                    "name": "详情页uv",
                    "value": "193661",
                    "transformRatio": "99.14%"
                },
                {
                    "name": "yyy",
                    "value": "191990",
                    "transformRatio": "2.98%"
                },
                {
                    "name": "哈哈哈哈",
                    "value": "5730",
                    "transformRatio": "70.84%"
                },
                {
                    "name": "订单uv",
                    "value": "4059",
                    "transformRatio": "41.17%"
                },
                {
                    "name": "商品发布24小时之内成交的商品数",
                    "value": "1671",
                    "transformRatio": "0%"
                }
            ]
        },
        {
            "name": "手机",
            "type": "funnel",
            "width": "45%",
            "left": "50%",
            "sort": "none",
            "label": {
                "position": "inside"
            },
            "data": [{
                    "name": "详情页uv",
                    "value": "602805",
                    "transformRatio": "98.37%"
                },
                {
                    "name": "yyy",
                    "value": "592960",
                    "transformRatio": "6.97%"
                },
                {
                    "name": "哈哈哈哈",
                    "value": "41351",
                    "transformRatio": "76.19%"
                },
                {
                    "name": "订单uv",
                    "value": "31506",
                    "transformRatio": "31.25%"
                },
                {
                    "name": "商品发布24小时之内成交的商品数",
                    "value": "9845",
                    "transformRatio": "0%"
                }
            ]
        }
    ],
    "title": [{
            "text": "其他分类",
            "top": "bottom",
                textAlign: 'center',
            "textStyle": {
                "fontFamily": "sans-serif",
                "fontSize": "18"
            },
            "left": "22.5%"
        },
        {
            "text": "手机",
            "top": "bottom",
                textAlign: 'center',
            "textStyle": {
                "fontFamily": "sans-serif",
                "fontSize": "18"
            },
            "left": "72.5%"
        }
    ]
}
developmentmachine commented 4 years ago

Not sure how you did it. I tried it and it works

option = {
    "tooltip": {
        "trigger": "item"
    },
    "legend": {
        "data": [
            "详情页uv",
            "yyy",
            "哈哈哈哈",
            "订单uv",
            "商品发布24小时之内成交的商品数"
        ],
        "type": "scroll"
    },
    "series": [{
            "name": "其他分类",
            "type": "funnel",
            "width": "45%",
            "left": "0%",
            "sort": "none",
            "label": {
                "position": "inside"
            },
            "data": [{
                    "name": "详情页uv",
                    "value": "193661",
                    "transformRatio": "99.14%"
                },
                {
                    "name": "yyy",
                    "value": "191990",
                    "transformRatio": "2.98%"
                },
                {
                    "name": "哈哈哈哈",
                    "value": "5730",
                    "transformRatio": "70.84%"
                },
                {
                    "name": "订单uv",
                    "value": "4059",
                    "transformRatio": "41.17%"
                },
                {
                    "name": "商品发布24小时之内成交的商品数",
                    "value": "1671",
                    "transformRatio": "0%"
                }
            ]
        },
        {
            "name": "手机",
            "type": "funnel",
            "width": "45%",
            "left": "50%",
            "sort": "none",
            "label": {
                "position": "inside"
            },
            "data": [{
                    "name": "详情页uv",
                    "value": "602805",
                    "transformRatio": "98.37%"
                },
                {
                    "name": "yyy",
                    "value": "592960",
                    "transformRatio": "6.97%"
                },
                {
                    "name": "哈哈哈哈",
                    "value": "41351",
                    "transformRatio": "76.19%"
                },
                {
                    "name": "订单uv",
                    "value": "31506",
                    "transformRatio": "31.25%"
                },
                {
                    "name": "商品发布24小时之内成交的商品数",
                    "value": "9845",
                    "transformRatio": "0%"
                }
            ]
        }
    ],
    "title": [{
            "text": "其他分类",
            "top": "bottom",
                textAlign: 'center',
            "textStyle": {
                "fontFamily": "sans-serif",
                "fontSize": "18"
            },
            "left": "22.5%"
        },
        {
            "text": "手机",
            "top": "bottom",
                textAlign: 'center',
            "textStyle": {
                "fontFamily": "sans-serif",
                "fontSize": "18"
            },
            "left": "72.5%"
        }
    ]
}

orz!!!cool!!!thank you!!!mogul