漏斗图

描述:当前是关于Echarts图表中的 漏斗图 示例。
 
            var colors=['#f36119','#ff9921','#20c8ff','#2cb7ff','#1785ef'];
var url='https://q.cnblogs.com/Images/qdigg.gif';
option = {
    title:{
        text:'eweew',
    },
    
    backgroundColor:'#ffffff',
    color:colors,
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "cross",
            "label": {
                "backgroundColor": "red"
            },
            "lineStyle": {
                "color": "#9eb2cb"
            } 
        }
    },
   
    "legend": {
        show:false,
        "top": "top",
        "left": "2%",
        "textStyle": {
            "color": "#000"
        },
        "itemHeight": 2,
        "data":  ['意向','方案','商务','即将成交','赢单']
    },
    "grid": {
        "top": 24,
        "left": "2%",
        "right": 20,
        "bottom": 30,
        "containLabel": true,
        "borderWidth": 0.5
    },

    series: [
        {
            top:0,
            type: 'funnel',
            left: '10%',
            width: '80%',
            gap: 16,
            minSize: 150,
            maxSize: 410,
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}  ({c}万)'
            },
            data: [
                {value: 100, name: '意向'},
                {value: 80, name: '方案'},
                {value: 60, name: '商务'},
                {value: 40, name: '即将成交'},
                {value: 20, name: '赢单'},
              
            ]
        },
        
        {
            top:0,
            type: 'funnel',
            left: '10%',
            width: '80%',
            gap: 16,
            z:1,
            minSize: 150,
            maxSize: 150,
            label: {
                normal: {
                    color: '#000000',
                    position: 'right',
                    backgroundColor:'#f6f7fc',
                    borderColor:'#f6f7fc',
                    borderWidth :1,
                    borderRadius :4,
                    padding :[11,25,11,25],
                    width:50,
                   /* formatter:function(d){
                        var ins='{aa|}'+d.percent;
                        console.log(ins)
                        return ins
                       
                    },*/
                    rich:{
                        aa:{
                            backgroundColor:{
                                image:url,
                                padding:[1,2,3,4],
                                
                            },
                            width:14,
                            height:9,
                            align: 'center',
                            padding:[0,0,0,0]
                        }
                    }

                   
                }
              
            },
            //右侧的百分比显示的地方
            labelLine: {
                show:true,
                normal: {
                    length: 200,
                    position: 'right',
                    lineStyle: {
                        width: 1,
                        color:'#e8e9f1',
                        type:'solid'
                        
                    },
                },
              
            }, 
            //主体是透明的
             itemStyle: {
                normal: {
                    color: 'transparent',
                    borderWidth:0,
                    opacity: 1
                }
            },
            data: [
                {value: 100, name: '意向'},
                {value: 80, name: '方案'},
                {value: 60, name: '商务'},
                {value: 40, name: '即将成交'},
                {value: 20, name: '赢单'},
              
            ]
        }
    ]
};