渐变漏斗图echarts funnel配置项内容和展示

      var textColorList = ['#E1FF00','#0AFFB3','#09E3FF','#1BB8FF','#00FFFF'];
    var colorList = [{
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: 'rgba(225,255,0,.8)' // 0% 处的颜色
        }, {
            offset: 0.2,
            color: 'rgba(225,255,0,.5)' // 20% 处的颜色
        }, {
            offset: 0.5,
            color: 'rgba(225,255,0,.3)' // 50% 处的颜色
        }, {
            offset: 0.8,
            color: 'rgba(225,255,0,.5)' // 80% 处的颜色
        }, {
            offset: 1,
            color: 'rgba(225,255,0,.8)' // 100% 处的颜色
        }],
    }, {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: 'rgba(10,255,179,.8)' // 0% 处的颜色
        }, {
            offset: 0.2,
            color: 'rgba(10,255,179,.5)' // 20% 处的颜色
        }, {
            offset: 0.5,
            color: 'rgba(10,255,179,.3)' // 50% 处的颜色
        }, {
            offset: 0.8,
            color: 'rgba(10,255,179,.5)' // 80% 处的颜色
        }, {
            offset: 1,
            color: 'rgba(10,255,179,.8)' // 100% 处的颜色
        }]
    }, {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: 'rgba(9,227,255,.8)' // 0% 处的颜色
        }, {
            offset: 0.2,
            color: 'rgba(9,227,255,.5)' // 20% 处的颜色
        }, {
            offset: 0.5,
            color: 'rgba(9,227,255,.3)' // 50% 处的颜色
        }, {
            offset: 0.8,
            color: 'rgba(9,227,255,.5)' // 80% 处的颜色
        }, {
            offset: 1,
            color: 'rgba(9,227,255,.8)' // 100% 处的颜色
        }]
    }, {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: 'rgba(27,184,255,.8)' // 0% 处的颜色
        }, {
            offset: 0.2,
            color: 'rgba(27,184,255,.5)' // 20% 处的颜色
        }, {
            offset: 0.5,
            color: 'rgba(27,184,255,.3)' // 50% 处的颜色
        }, {
            offset: 0.8,
            color: 'rgba(27,184,255,.5)' // 80% 处的颜色
        }, {
            offset: 1,
            color: 'rgba(27,184,255,.8)' // 100% 处的颜色
        }]
    }, {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0,
            color: 'rgba(0,255,255,.8)' // 0% 处的颜色
        }, {
            offset: 0.2,
            color: 'rgba(0,255,255,.5)' // 20% 处的颜色
        }, {
            offset: 0.5,
            color: 'rgba(0,255,255,.3)' // 50% 处的颜色
        }, {
            offset: 0.8,
            color: 'rgba(0,255,255,.5)' // 80% 处的颜色
        }, {
            offset: 1,
            color: 'rgba(0,255,255,.8)' // 100% 处的颜色
        }]
    }]
    var option = {
        backgroundColor:'#0E1F55',
        color: textColorList,
        calculable: true,
        tooltip:{
            formatter:function(param){
                
                return param.name+':'+param.percent+'%'
            }
        },
        series: [{
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            right:'10%',
            top: '10%',
            bottom: '10%',
            // width: '90%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'ascending',
            gap: 5,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                    formatter:function(param){
                        console.log(param)
                        return param.percent+'%'
                    },
                    color: function(param) {
                        return textColorList[param.dataIndex]
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                    color: function(param) {
                        return textColorList[param.dataIndex]
                    },
                    opacity: 1
                }
            },
            itemStyle: {
                normal: {
                    borderColor: 'transparent',
                    color: function(param) {
                        return colorList[param.dataIndex]
                    }
                }

            },
            data: [{
                    value: 60,
                    name: '系统C'
                },
                {
                    value: 40,
                    name: '系统D'
                },
                {
                    value: 20,
                    name: '系统E'
                },
                {
                    value: 80,
                    name: '系统B'
                },
                {
                    value: 100,
                    name: '系统A'
                }
            ]
        }]
    };