Echarts 里的 散点图

var Token = function (token, expireTime) {
    var _token, _expireTime;


    this.setToken = function (token) {
        _token = token;
    }

    this.getToken = function () {
        if (_expireTime < new Date())
            return undefined;

        return _token;
    }

    this.setExpire = function (expireTime) {
        _expireTime = expireTime;
    }

    this.getExpire = function () {
        return _expireTime;
    }

    this.setToken(token);
    this.setExpire(expireTime);
}

Token.prototype = {
    constructor: Token,

    load: function () {
        var localSaved = localStorage.getItem('token');
        console.log('localsaved:' + localSaved);
        if (localSaved != '') {
            try {
                var localSavedToken = JSON.parse(localSaved);

                this.setToken(localSavedToken.token);
                this.setExpire(localSavedToken.expireTime);
            } catch (ex) { console.log(ex); }
        }
    },

    save: function () {
        var tokenString = JSON.stringify({ "token": this.getToken(), "expireTime": this.getExpire() });
        localStorage.setItem('token', tokenString);
    },

    isReady: function () {
        var acccessToken = this.getToken();

        return typeof (tokenCode) != 'undefined';
    },

    delay: function (ms) {
        return new Promise((resolve, reject) => setTimeout(resolve, ms));
    },

    requestToken: function (identity, password) {
        return SendRequest("POST", "/api/token",
            {
                "Identity": identity,
                "Password": password
            });
    },

    showToken: function () {
        console.log('showToken:' + this.getToken());
    },

    /*输出散点图*/
    renderScatter: function (canvasId) {
        if (!document.body.contains(document.getElementById(canvasId)))
            return;

        var scatterDom = document.getElementById(canvasId);
        var keepsScatter = echarts.init(scatterDom);

        keepsScatter.showLoading();

        SendRequest('GET', '/api/reports', undefined, this.getToken())
            .then((response) => {
                var data = JSON.parse(response);
                keeps = data;

                var dates = data.map(function (item) {
                    return item["markTime"].substr(2, 8);
                }).filter(function (item, index, arr) {
                    return arr.indexOf(item, 0) === index;
                }).sort();

                var points = [
                    data
                        .filter(function (item) {
                            return item["stockCode"].startsWith('60');
                        })
                        .map(function (item) {
                            return [
                                item["markTime"].substr(2, 8),
                                item["increase"],
                                item["current"],
                                item["stockCode"],
                                item["fixedClose"],
                                item["negotiableCapital"],
                                item["generalCapital"]
                            ];
                        }),
                    data
                        .filter(function (item) {
                            return item["stockCode"].startsWith('688');
                        })
                        .map(function (item) {
                            return [
                                item["markTime"].substr(2, 8),
                                item["increase"],
                                item["current"],
                                item["stockCode"],
                                item["fixedClose"],
                                item["negotiableCapital"],
                                item["generalCapital"]
                            ];
                        }),
                    data
                        .filter(function (item) {
                            return item["stockCode"].startsWith('000');
                        })
                        .map(function (item) {
                            return [
                                item["markTime"].substr(2, 8),
                                item["increase"],
                                item["current"],
                                item["stockCode"],
                                item["fixedClose"],
                                item["negotiableCapital"],
                                item["generalCapital"]
                            ];
                        }),
                    data
                        .filter(function (item) {
                            return item["stockCode"].startsWith('001') || item["stockCode"].startsWith('002') || item["stockCode"].startsWith('003');
                        })
                        .map(function (item) {
                            return [
                                item["markTime"].substr(2, 8),
                                item["increase"],
                                item["current"],
                                item["stockCode"],
                                item["fixedClose"],
                                item["negotiableCapital"],
                                item["generalCapital"]
                            ];
                        }),
                    data
                        .filter(function (item) {
                            return item["stockCode"].startsWith('30');
                        })
                        .map(function (item) {
                            return [
                                item["markTime"].substr(2, 8),
                                item["increase"],
                                item["current"],
                                item["stockCode"],
                                item["fixedClose"],
                                item["negotiableCapital"],
                                item["generalCapital"]
                            ];
                        })

                ];

                var option = {
                    xAxis: {
                        data: dates,
                        splitLine: { show: false }
                    },
                    yAxis: {
                        splitLine: { show: true },
                        scale: true
                    },
                    tooltip: {
                        position: 'top',
                        formatter: function (params) {
                            return (
                                params.value[3] + '[' + params.value[5].ToCapital() + ']:' +
                                params.value[1].ColorString() + ' <br/> from ' +
                                params.value[4] + ' to ' + params.value[2]
                            );
                        }
                    },
                    dataZoom: [
                        {
                            type: 'slider',
                            show: true,
                            start: 94,
                            end: 100,
                            handleSize: 8
                        },
                        {
                            type: 'inside',
                            start: 94,
                            end: 100
                        },
                        {
                            type: 'slider',
                            show: true,
                            yAxisIndex: 0,
                            filterMode: 'empty',
                            width: 12,
                            height: '70%',
                            handleSize: 8,
                            showDataShadow: false,
                            left: '93%'
                        }
                    ],
                    grid: {
                        left: 40,
                        right: 40
                    },
                    legend: {
                        data: ['沪A[' + points[0].length + ']', '科创板[' + points[1].length + ']', '深A[' + points[2].length + ']', '中小板[' + points[3].length + ']', '创业板[' + points[4].length + ']'],
                        left: 10,
                        top: 10
                    },
                    series: [
                        {
                            name: '沪A[' + points[0].length + ']',
                            data: points[0],
                            type: 'scatter',
                            symbolSize: function (data) {
                                return Math.sqrt(data[5] / 10000000) * 2;
                            },
                            emphasis: {
                                focus: 'self'
                            }
                        },
                        {
                            name: '科创板[' + points[1].length + ']',
                            data: points[1],
                            type: 'scatter',
                            symbolSize: function (data) {
                                return Math.sqrt(data[5] / 10000000) * 2;
                            },
                            emphasis: {
                                focus: 'self'
                            }
                        },
                        {
                            name: '深A[' + points[2].length + ']',
                            data: points[2],
                            type: 'scatter',
                            symbolSize: function (data) {
                                return Math.sqrt(data[5] / 10000000) * 2;
                            },
                            emphasis: {
                                focus: 'self'
                            }
                        },
                        {
                            name: '中小板[' + points[3].length + ']',
                            data: points[3],
                            type: 'scatter',
                            symbolSize: function (data) {
                                return Math.sqrt(data[5] / 10000000) * 2;
                            },
                            emphasis: {
                                focus: 'self'
                            }
                        },
                        {
                            name: '创业板[' + points[4].length + ']',
                            data: points[4],
                            type: 'scatter',
                            symbolSize: function (data) {
                                return Math.sqrt(data[5] / 10000000) * 2;
                            },
                            emphasis: {
                                focus: 'self'
                            }
                        }
                    ]
                };

                keepsScatter.hideLoading();

                if (option && typeof option === 'object') {
                    keepsScatter.setOption(option);
                    if (currentCode == '' && keeps.length > 0) {
                        var index = 1;
                        currentCode = keeps[0].stockCode;
                        showOne();
                    }

                    keepsScatter.on('selectchanged', function (params) {
                        var seriesIndex = params['fromActionPayload']['seriesIndex'];
                        var dataIndex = params['fromActionPayload']['dataIndexInside'];

                        var node = points[seriesIndex][dataIndex];

                        currentCode = node[3];
                        showOne();

                    });

                    window.addEventListener("resize", resizeMe);
                }

            });

        function resizeMe() {
            keepsScatter.resize();
        }
    },