test/standalone/clustering_animation.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="../lib/esl.js"></script>
        <script src="../lib/config.js"></script>
        <script src="../lib/jquery.min.js"></script>
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <div id="main"></div>
        <script>

            require([
                'echarts',
                'ecStat'
            ], function (echarts, ecStat) {

                var chart = echarts.init(document.getElementById('main'));

                $.getJSON('../data/clustering_dataset2.json')
                .done(function (data) {

                    var clusterNumber = 6;
                    var step = ecStat.clustering.hierarchicalKMeans(data, clusterNumber, true);
                    var result;
                    var option = {
                        timeline: {
                            top: 'center',
                            right: 50,
                            height: 300,
                            width: 10,
                            inverse: true,
                            playInterval: 2500,
                            symbol: 'none',
                            orient: 'vertical',
                            axisType: 'category',
                            autoPlay: true,
                            label: {normal: {show: false}},
                            data: []
                        },
                        baseOption: {
                            xAxis: {
                                type: 'value'
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                type: 'scatter'
                            }]
                        },
                        options: []
                    };

                    for (var i = 0; !(result = step.next()).isEnd; i++) {
                        option.options.push(getOption(result, clusterNumber));
                        option.timeline.data.push(i + '');
                    }

                    chart.setOption(option);

                    function getOption(result, k) {
                        var clusterAssment = result.clusterAssment;
                        var centroids = result.centroids;
                        var ptsInCluster = result.pointsInCluster;

                        var color = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
                        var series = [];
                        for (i = 0; i < k; i++) {
                            series.push({
                                name: 'scatter' + i,
                                type: 'scatter',
                                label: {
                                    emphasis: {
                                        show: true
                                    }
                                },
                                animation: false,
                                data: ptsInCluster[i],
                                markPoint: {
                                    symbolSize: 29,
                                    label: {
                                        normal: {
                                            show: false
                                        },
                                        emphasis: {
                                            show: true,
                                            position: 'top',
                                            formatter: function (params) {

                                                return Math.round(params.data.coord[0] * 100) / 100 + '  '
                                                    + Math.round(params.data.coord[1] * 100) / 100 + ' ';
                                            },
                                            textStyle: {
                                            color: '#000'
                                            }
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            opacity: 0.7
                                        }
                                    },
                                    data: [{
                                        coord: centroids[i]
                                    }]
                                }
                            });
                        }

                        return {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            series: series,
                            color: color
                        };
                    }
                });
            });
        </script>
    </body>
</html>