Flow Algorithm echarts 配置项内容和展示

              var size = 100;
        var titleSize = 30;
        
        var oneBid = function(x, y, less = false, v = 10) {
            if (less) {size = size - 23}
            var theBid = {
                type: 'scatter',
                symbol: 'circle',
                symbolSize: size,
                silent: true,
                data: [{
                    name: 1,
                    value: [x, y, v]
                }]
            };
            return theBid;
        };

        var oneStragy = function(x, y, v = 0) {
            var theStragy = {
                type: 'scatter',
                symbol: 'rect',
                symbolSize: 50,
                silent: true,
                data: [{
                    name: 1,
                    value: [x, y, v]
                }]
            };
            return theStragy;
        };


        var stragies = function(x, y, sColor = [1,2,3,1,9,9,2,8], showBidPrice = false) {
            var n = sColor.length;
            var stags = {
                type: 'scatter',
                symbol: 'rect',
                symbolSize: 30,
                silent: true,
                data: (function() {
                    var a = [];
                    for (var i = 0; i < n; i++) {
                        a.push({
                            name: 's1',
                            value: [x, y + i * 1.1, sColor[i]],
                            label: {normal: {show: showBidPrice}}
                        })
                    }
                    return a;
                })()
            };
            return stags;
        };

        var oneStep = function(x, theName, v = 0) {
            var theStep = {
                name: theName,
                type: 'scatter',
                symbol: 'rect',
                zlevel: -1,
                symbolSize: [100, 700],
                silent: true,
                data: [{
                    name: 1,
                    value: [x, 2.5, v]
                }]
            };
            return theStep;
        };

        var oneBidWithStratgies = function(x, y, v, n = 1) {
            var theBid = oneBid(x, y, v);
        };


var basicValue = [6.5,1.2,5.1,1.0,8.8,9.7,7.2,9.3];
var afterPacing = [1.2,5.1,1.0,8.8,7.2,9.3];
var afterRanking = [5.1,7.2,8.8,9.3,1.2,1.0];
var afterPostRanking = [7.2,5.1,9.3,8.8,1.2,1.0];
var finalValue = [7.2];

        // 指定图表的配置项和数据
        var option = {

            timeline: {
                type: 'number',
                data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                //label: {
               //     formatter: function(v) {
                 //       return 'step' + (v >= 10 ? v : ('0' + v))
                //    }
                //},
                label: {normal: {show: false}},
                playInterval: 1500,
                autoPlay: false
            },
            options: [
                //1
                {
                    title: {
                        text:  '',
                        textStyle: {fontSize: titleSize}
                    },
                    tooltip: {},
                    legend: {},
                    grid: {
                        show: false
                    },
                    xAxis: {
                        data: [],
                        min: 0,
                        max: 140,
                        show: false
                    },
                    yAxis: {
                        silent: true,
                        min: -10,
                        max: 10,
                        show: false
                    },


                    visualMap: {
                        min: 0,
                        max: 10,
                        calculable: true,
                        show: false,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [oneBid(0, 0),
                        stragies(0, 3, basicValue),
                        oneStep(20, 'antispam', 6),
                        oneStep(40, 'pacing', 3),
                        oneStep(60, 'pre-ranking', 2),
                        oneStep(80, 'bidding', 1),
                        oneStep(100, 'post-ranking', 0)
                    ]
                },
                // 2 antispam
                {
                    title: {
                        text: 'Antispam',
                        textStyle: {fontSize: titleSize}
                    },
                    tooltip: {},
                    legend: {},
                    grid: {
                        show: false
                    },
                    xAxis: {
                        data: [],
                        min: 0,
                        max: 140,
                        show: false
                    },
                    yAxis: {
                        silent: true,
                        min: -10,
                        max: 10,
                        show: false
                    },


                    visualMap: {
                        min: 0,
                        max: 10,
                        calculable: true,
                        show: false,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [oneBid(20, 0),
                        stragies(20, 3,basicValue),
                        oneStep(20, 'antispam', 6),
                        oneStep(40, 'pacing', 3),
                        oneStep(60, 'pre-ranking', 2),
                        oneStep(80, 'bidding', 1),
                        oneStep(100, 'post-ranking', 0)
                    ]
                },
                // 2.2 antispam
                {
                    title: {
                        text: 'Antispam',
                        textStyle: {fontSize: titleSize}
                    },
                    tooltip: {},
                    legend: {},
                    grid: {
                        show: false
                    },
                    xAxis: {
                        data: [],
                        min: 0,
                        max: 140,
                        show: false
                    },
                    yAxis: {
                        silent: true,
                        min: -10,
                        max: 10,
                        show: false
                    },


                    visualMap: {
                        min: 0,
                        max: 10,
                        calculable: true,
                        show: false,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [oneBid(20, 0, true),
                        stragies(20, 3,basicValue),
                        oneStep(20, 'antispam', 6),
                        oneStep(40, 'pacing', 3),
                        oneStep(60, 'pre-ranking', 2),
                        oneStep(80, 'bidding', 1),
                        oneStep(100, 'post-ranking', 0)
                    ]
                },
                // 3 pacing 1
                {
                    title: {
                        text: 'Pacing',
                        textStyle: {fontSize: titleSize}
                    },
                    tooltip: {},
                    legend: {},
                    grid: {
                        show: false
                    },
                    xAxis: {
                        data: [],
                        min: 0,
                        max: 140,
                        show: false
                    },
                    yAxis: {
                        silent: true,
                        min: -10,
                        max: 10,
                        show: false
                    },


                    visualMap: {
                        min: 0,
                        max: 10,
                        calculable: true,
                        show: false,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [oneBid(40, 0),
                        stragies(40, 3,basicValue),
                        oneStep(20, 'antispam', 6),
                        oneStep(40, 'pacing', 3),
                        oneStep(60, 'pre-ranking', 2),
                        oneStep(80, 'bidding', 1),
                        oneStep(100, 'post-ranking', 0)
                    ]
                },
                // 4 pacing 2
                {
                    title: {
                        text: 'Pacing',
                        textStyle: {fontSize: titleSize}
                    },
                    tooltip: {},
                    legend: {},
                    grid: {
                        show: false
                    },
                    xAxis: {
                        data: [],
                        min: 0,
                        max: 140,
                        show: false
                    },
                    yAxis: {
                        silent: true,
                        min: -10,
                        max: 10,
                        show: false
                    },


                    visualMap: {
                        min: 0,
                        max: 10,
                        calculable: true,
                        show: false,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [oneBid(40, 0, true),
                        stragies(40, 3,afterPacing),
                        oneStep(20, 'antispam', 6),
                        oneStep(40, 'pacing', 3),
                        oneStep(60, 'pre-ranking', 2),
                        oneStep(80, 'bidding', 1),
                        oneStep(100, 'post-ranking', 0)
                    ]
                },
                // 5 pre-ranking 1
                {
                    title: {
                        text: 'Pre-Ranking',
                        textStyle: {fontSize: titleSize}
                    },
                    tooltip: {},
                    legend: {},
                    grid: {
                        show: false
                    },
                    xAxis: {
                        data: [],
                        min: 0,
                        max: 140,
                        show: false
                    },
                    yAxis: {
                        silent: true,
                        min: -10,
                        max: 10,
                        show: false
                    },


                    visualMap: {
                        min: 0,
                        max: 10,
                        calculable: true,
                        show: false,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [oneBid(60, 0),
                        stragies(60, 3,afterPacing),
                        oneStep(20, 'antispam', 6),
                        oneStep(40, 'pacing', 3),
                        oneStep(60, 'pre-ranking', 2),
                        oneStep(80, 'bidding', 1),
                        oneStep(100, 'post-ranking', 0)
                    ]
                },
                // 6 pre-ranking 2
                {
                    title: {
                        text: 'Pre-Ranking',
                        textStyle: {fontSize: titleSize}
                    },
                    tooltip: {},
                    legend: {},
                    grid: {
                        show: false
                    },
                    xAxis: {
                        data: [],
                        min: 0,
                        max: 140,
                        show: false
                    },
                    yAxis: {
                        silent: true,
                        min: -10,
                        max: 10,
                        show: false
                    },


                    visualMap: {
                        min: 0,
                        max: 10,
                        calculable: true,
                        show: false,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [oneBid(60, 0),
                        stragies(60, 3,afterRanking),
                        oneStep(20, 'antispam', 6),
                        oneStep(40, 'pacing', 3),
                        oneStep(60, 'pre-ranking', 2),
                        oneStep(80, 'bidding', 1),
                        oneStep(100, 'post-ranking', 0)
                    ]
                },
                // 7 bidding 1
                {
                    title: {
                        text: 'Bidding',
                        textStyle: {fontSize: titleSize}
                    },
                    tooltip: {},
                    legend: {},
                    grid: {
                        show: false
                    },
                    xAxis: {
                        data: [],
                        min: 0,
                        max: 140,
                        show: false
                    },
                    yAxis: {
                        silent: true,
                        min: -10,
                        max: 10,
                        show: false
                    },


                    visualMap: {
                        min: 0,
                        max: 10,
                        calculable: true,
                        show: false,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [oneBid(80, 0),
                        stragies(80, 3,afterRanking),
                        oneStep(20, 'antispam', 6),
                        oneStep(40, 'pacing', 3),
                        oneStep(60, 'pre-ranking', 2),
                        oneStep(80, 'bidding', 1),
                        oneStep(100, 'post-ranking', 0)
                    ]
                },
                // 8 bidding 2
                {
                    title: {
                        text: 'Bidding',
                        textStyle: {fontSize: titleSize}
                    },
                    tooltip: {},
                    legend: {},
                    grid: {
                        show: false
                    },
                    xAxis: {
                        data: [],
                        min: 0,
                        max: 140,
                        show: false
                    },
                    yAxis: {
                        silent: true,
                        min: -10,
                        max: 10,
                        show: false
                    },


                    visualMap: {
                        min: 0,
                        max: 10,
                        calculable: true,
                        show: false,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [oneBid(80, 0, true),
                        stragies(80, 3,afterRanking,true),
                        oneStep(20, 'antispam', 6),
                        oneStep(40, 'pacing', 3),
                        oneStep(60, 'pre-ranking', 2),
                        oneStep(80, 'bidding', 1),
                        oneStep(100, 'post-ranking', 0)
                    ]
                },
                // 9 post-ranking 1
                {
                    title: {
                        text: 'Post-Ranking',
                        textStyle: {fontSize: titleSize}
                    },
                    tooltip: {},
                    legend: {},
                    grid: {
                        show: false
                    },
                    xAxis: {
                        data: [],
                        min: 0,
                        max: 140,
                        show: false
                    },
                    yAxis: {
                        silent: true,
                        min: -10,
                        max: 10,
                        show: false
                    },


                    visualMap: {
                        min: 0,
                        max: 10,
                        calculable: true,
                        show: false,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [oneBid(100, 0),
                        stragies(100, 3,afterRanking,true),
                        oneStep(20, 'antispam', 6),
                        oneStep(40, 'pacing', 3),
                        oneStep(60, 'pre-ranking', 2),
                        oneStep(80, 'bidding', 1),
                        oneStep(100, 'post-ranking', 0)
                    ]
                },
                // 10 post-ranking 2
                {
                    title: {
                        text: 'Post-Ranking',
                        textStyle: {fontSize: titleSize}
                    },
                    tooltip: {},
                    legend: {},
                    grid: {
                        show: false
                    },
                    xAxis: {
                        data: [],
                        min: 0,
                        max: 140,
                        show: false
                    },
                    yAxis: {
                        silent: true,
                        min: -10,
                        max: 10,
                        show: false
                    },


                    visualMap: {
                        min: 0,
                        max: 10,
                        calculable: true,
                        show: false,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [oneBid(100, 0),
                        stragies(100, 3,afterPostRanking,true),
                        oneStep(20, 'antispam', 6),
                        oneStep(40, 'pacing', 3),
                        oneStep(60, 'pre-ranking', 2),
                        oneStep(80, 'bidding', 1),
                        oneStep(100, 'post-ranking', 0)
                    ]
                },
                // 11 finish
                {
                    title: {
                        text: 'Final Match',
                        textStyle: {fontSize: titleSize}
                    },
                    tooltip: {},
                    legend: {},
                    grid: {
                        show: false
                    },
                    xAxis: {
                        data: [],
                        min: 0,
                        max: 140,
                        show: false
                    },
                    yAxis: {
                        silent: true,
                        min: -10,
                        max: 10,
                        show: false
                    },


                    visualMap: {
                        min: 0,
                        max: 10,
                        calculable: true,
                        show: false,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [oneBid(120, 0),
                        stragies(120, 3, finalValue,true),
                        oneStep(20, 'antispam', 6),
                        oneStep(40, 'pacing', 3),
                        oneStep(60, 'pre-ranking', 2),
                        oneStep(80, 'bidding', 1),
                        oneStep(100, 'post-ranking', 0)
                    ]
                },
            ]


        };