转化率关系图echarts funnel配置项内容和展示

      var rightArrow = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAABNBAMAAAAYzFT5AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAElBMVEUAAACZmZmZmZmqqqqZmZkAAAClqsN/AAAAA3RSTlMAf4C/aSLHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAFdJREFUSMftzbENgCAYROEDHMCCASwYwMQFKNh/JkOhHfnPxuq9+sud9FSuZac+qnUFhUKhUKi3raNQqJ/U7qgU7k1VHZWGo+qI62qWyvHjrFkqW0pHTG6J1zAklFuGvAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wMi0wM1QxODo0OTo1NyswODowMJLTpqcAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDItMDNUMTg6NDk6NTcrMDg6MDDjjh4bAAAAAElFTkSuQmCC",
    uploadedDataURL = "/asset/get/s/data-1576742942370-X6JMK0GY.png",
    colors = ['#1cd389', '#668eff', '#ffc751', '#ff6e73', '#8683e6', 'rgba(134,131,230,1)', 'rgba(134,131,230,0.8)', 'rgba(134,131,230,0.6)', 'rgba(134,131,230,0.4)', 'rgba(134,131,230,0.2)'],
    url = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAARCAMAAACLgl7OAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAaVBMVEUAAADBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcEAAAD45xibAAAAInRSTlMAmT6WJYwSfBMGZAFHmEgtkBeCCW0KAlI1k5QeiA10A1tc7ah1owAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAB7SURBVCjPtZDZDoAgDAQXvA+8bwX1/3/SGKIBEd+cx07TdgtIiAF0/mygDvnAoYDr2b3nnjP8wOaDUG6J4ncfR9cdScpMzbJECZEXT1/kesyy0n1VPv6AulF908Kg6+9DWN/hjWGUfhpgYV5Ov8ywwgUhguODddtXvXIAjuUEs/70/t4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMTItMTZUMTU6MzM6MDkrMDg6MDCzL2BEAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTEyLTE2VDE1OjMzOjA5KzA4OjAwwnLY+AAAAABJRU5ErkJggg==',
    markLineSetting = {
        normal: {
            show: true,
            backgroundColor: '#e4f5da',
            borderRadius: 4,
            color: '#333',
            verticalAlign: 'middle',
            offset: [40, 0, 0, 0],
            fontSize: 14,
            padding: [3, 10, 5, 10],
            formatter: function(d) {
                if (d.value) {
                    var ins = '{img1|} ' + '{words|' + d.data.itemValue + '}';
                    return ins
                }
            },
            rich: {
                img1: {
                    backgroundColor: {
                        image: uploadedDataURL,
                    },
                    width: 18,
                    height: 16
                },
                words: {
                    color: '#333',
                    position: 'right',
                    fontSize: 14,
                    lineHeight: 20,
                    padding: [0, 0, 5, 0],
                }
            }
        }
    };



var lineargroup = [{
        value: 100,
        name: '目标',
        oriname: "意向",
        number: 98756,
        percent: '15.35%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    },
    {
        value: 80,
        name: '方案率',
        oriname: "方案",
        number: 88756,
        percent: '18.35%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    },
    {
        value: 60,
        name: '商務率',
        oriname: "商務",
        number: 78756,
        percent: '19.56%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    },
    {
        value: 40,
        name: '成交率',
        oriname: "即將成交",
        number: 68756,
        percent: '25.35%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    },
    {
        value: 20,
        name: '贏单率',
        oriname: "贏单",
        number: 58756,
        percent: '65.35%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    },
    {
        value: 20,
        name: '贏单率1',
        oriname: "贏单1",
        number: 58756,
        percent: '65.35%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    },
    {
        value: 20,
        name: '贏单率2',
        oriname: "贏单2",
        number: 58756,
        percent: '65.35%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    }, {
        value: 20,
        name: '贏单率2',
        oriname: "贏单2",
        number: 58756,
        percent: '65.35%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    },
     {
        value: 20,
        name: '贏单率2',
        oriname: "贏单2",
        number: 58756,
        percent: '65.35%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    },

 {
        value: 20,
        name: '贏单率2',
        oriname: "贏单2",
        number: 58756,
        percent: '65.35%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    },

    {
        value: 20,
        name: '贏单率2',
        oriname: "贏单2",
        number: 58756,
        percent: '65.35%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    }, {
        value: 20,
        name: '贏单率2',
        oriname: "贏单2",
        number: 58756,
        percent: '65.35%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    },
     {
        value: 20,
        name: '贏单率2',
        oriname: "贏单2",
        number: 58756,
        percent: '65.35%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    },

 {
        value: 20,
        name: '贏单率2',
        oriname: "贏单2",
        number: 58756,
        percent: '65.35%', // 非必须，如果不需要，填充空字符串， 左侧的数据

    },


];





var data1 = [];
var data2 = [];
var ydata = [];
var xiaojiantou_data = [];
for (var i = 0; i < lineargroup.length; i++) {
    var obj1 = {
        value: (100 / lineargroup.length) * (lineargroup.length - i),
        num: lineargroup[i].number,
        name: lineargroup[i].oriname
    };
    var obj2 = {
        value: (100 / lineargroup.length) * (lineargroup.length - i),
        percent: lineargroup[i].percent,
        name: lineargroup[i].name,
        itemStyle: {
            normal: {
                color: '#eee',
                borderWidth: 0,
                opacity: 1
            }
        },
    };
    var _jiantou = {
        value: 100,
    }
    data1.push(obj1);
    data2.push(obj2);
    ydata.push(i + 1);
    xiaojiantou_data.push(_jiantou)
}

var _rightHeight = (600 - 20 * (lineargroup.length - 1)) / lineargroup.length + 17;

//转化率数据
var sdata = ['24%', '21%', '15%', '12%', '7%', '97.87%', '20%', '20%', '12%']



var arrowData = [{
    value: 0,
    itemValue: '50%',
    show: false,
    label: markLineSetting,
}]

for (var i = 0; i < lineargroup.length - 1; i++) {
    var _objdd = {
        value: 365 - i * (50 / lineargroup.length),
        itemValue: sdata[i],
        label: markLineSetting,
    }
    arrowData.push(_objdd);
}



var option = {
    backgroundColor: '#ffffff',
    color: colors,
    grid: {
        top: '0',
        left: "2%",
        right: 20,
        height: ((600 - 20 * (lineargroup.length )) / lineargroup.length + 23) * (lineargroup.length - 1)- (lineargroup.length),
        bottom: '10',
    },
    xAxis: [{
            show: false,
            inverse: true,
            position: 'top',
        },
        {
            position: 'bottom',
            show: false,
            min: 100,
            max: 200
        }
    ],
    yAxis: [{
     
        top: '120',
        show: false,
        boundaryGap: false,
        inverse: true,
        type: "category",
        // min: '转化率1',
        data: ydata
    }],
    series: [
        {
            top: 0,
            type: 'funnel',
            height: '600',
            gap: 20,
            minSize: 150,
            left: '20%',
            width: '60%',
            z: 3,

            label: {
                show: true,
                position: 'inside',
                fontSize: '14',
                formatter: function(d) {
                    var ins = d.name + '{aa|} ' + d.data.num;
                    return ins
                },
                rich: {
                    aa: {
                        padding: [8, 0, 6, 0]
                    }
                }
            },
            data: data1
        },
        {
            top: 0,
            type: 'funnel',
            height: '600',
            gap: 20,
            minSize: 150,
            left: '8%',
            width: '60%',
            z: 2,
            label: {
                normal: {
                    color: '#333',
                    position: 'insideLeft',
                    padding: [11, 25],
                    formatter: function(d) {
                        var ins = '{bb|' + d.data.percent + '}';
                        return ins;
                    },
                    rich: {
                        aa: {
                            align: 'center',
                            color: '#666',
                            fontSize: '12',
                            lineHeight: '30'
                        },
                        bb: {
                            align: 'center',
                            color: '#333',
                            fontSize: '22'
                        }
                    }
                }
            },
            data: data2
        },
        {
            top: '0',
            type: 'pictorialBar',
            name: 'xiaojiantou',
            symbolSize: ['32', '17'],
            symbolOffset: [0, -10],
            symbolPosition: 'center',
            symbol: url,
            animation: true,
            symbolClip: true,
            z: 10,
            data: xiaojiantou_data
        },
        {
            top: '0',
            name: 'youcejiantou',
            type: 'pictorialBar',
            symbolPosition: 'center',
            symbolSize: ['73', '' + _rightHeight],
            symbol: rightArrow,
            symbolClip: true,
            xAxisIndex: '1',
            z: 1,
            data: arrowData
        },
    ]
};