漏斗图-【官方】百战程序员_IT在线教育培训机构

漏斗图（Funnel）或金字塔是一个倒（正）三角形的条形图，适用于业务流程比较规范、周期较长、环节较多的流程分析。漏斗图也是常用的BI类图表之一，通过漏斗图或金字塔对各环节业务数据进行比较，不仅能够直观地发现和说明问题，而且可以通过漏斗图分析销售各环节中哪些环节出了问题。为了更直观地查看电商网站数据


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
</head>
<body>
    <div id="root" style="width:600px;height:400px"></div>
    <script>
        var myChart = echarts.init(document.getElementById("root"))
        var option = {
            title:{
                text:"汽车信息"
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c}%"
            },
            series: [
                {
                    name: '漏斗图',
                    type: 'funnel',
                    width: '50%',
                    sort: 'ascending',//设置漏斗图方向，
                    labelLine: { //视觉引导线样式
                        length: 30,
                        lineStyle: {
                            width: 2,
                            type: 'solid'
                        }
                    },
                    label: {
                        formatter: (data) => {
                            return data.data.name + '-' + data.data.num
                        },
                        color: ['#CD6235',],
                        fontSize: '16px',
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = [{
                                    colorStops: [{
                                        offset: 0, color: '#EE8684' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#E83F35' // 100% 处的颜色
                                    }],
                                },
                                {
                                    colorStops: [{
                                        offset: 0, color: '#F3BA56' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#EC6E34' // 100% 处的颜色
                                    }],
                                }, {
                                    colorStops: [{
                                        offset: 0, color: '#6EE7FA' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#3B88F5' // 100% 处的颜色
                                    }],
                                }];
                                return colorList[params.dataIndex];
                            }
                        }
                    },
                    emphasis: {
                        label: {
                            fontSize: 20
                        }
                    },
                    data: [
                        { value: 60, name: '使用公里数', num: 1200 },
                        { value: 40, name: '使用次数', num: 1100 },
                        { value: 20, name: '检修次数', num: 800 },
                    ]
                }
            ]
        }
        myChart.setOption(option)
    </script>
</body>
</html>

实时效果反馈

1. ECharts实现漏斗图，type 属性应设置为什么：

A funnel

B sankey

C tree

D sunburst

答案

1=>A

Grid_网格布局基础

北京市昌平区回龙观镇南店村综合商业楼2楼226室