<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.0.0-alpha.2/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.0.0-alpha.2/map/js/world.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="./seedrandom.js"></script>
    <style>
        html, body {
            margin: 0;
            overflow: hidden;
        }
        #viewport {
            position: absolute;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
        }
    </style>
</head>
<body>
<div id="viewport"></div>
<script>
    // Params parser
    var params = {};
    (location.search || '').substr(1).split('&').forEach(function (item) {
        var kv = item.split('=');
        params[kv[0]] = kv[1];
    });

    var myChart = echarts.init(document.getElementById('viewport'), params.t || null);
    // var _$oldSetOption = myChart.setOption;
    // var _$finalOption;
    // myChart.setOption = function (option, notMerge) {
    //     if (!_$finalOption || notMerge === true || (notMerge && notMerge.notMerge)) {
    //         _$finalOption = option;
    //     }
    //     else {
    //         // TODO Should be same logic with echarts merge.
    //         _$finalOption = echarts.util.merge(_$finalOption, option);
    //     }

    //     return _$oldSetOption.apply(this, arguments);
    // }
    var _$getEChartsOption = function () {
        return myChart.getOption();
    }
    var app = {};
</script>
<script>
    var myrng = new Math.seedrandom('echarts');
    Math.random = function () {
        return myrng();
    };

    function addComponentPadding(componentOpt) {
        if (!componentOpt) {
            return;
        }
        if (!(componentOpt instanceof Array)) {
            componentOpt = [componentOpt];
        }
        componentOpt.forEach(function (opt) {
            if (!opt.padding) {
                opt.padding = 15;
            }
        });
    }

    echarts.registerPreprocessor(function (option) {
        option.animation = false;
        // option.textStyle = {
        //     fontSize: 14
        // };
        if (option.series) {
            if (!(option.series instanceof Array)) {
                option.series = [option.series];
            }
            option.series.forEach(function (seriesOpt) {
                if (seriesOpt.type === 'graph') {
                    seriesOpt.force = seriesOpt.force || {};
                    seriesOpt.force.layoutAnimation = false;
                }
                seriesOpt.progressive = 1e5;
                seriesOpt.animation = false;
            });
        }
        addComponentPadding(option.title);
        addComponentPadding(option.legend);
        addComponentPadding(option.toolbox);
    });

    if (params.c) {
        if (!window.ROOT_PATH) {
            // When visiting `screenshot.html` In browser.
            console.error('No ROOT_PATH specified. Use default ROOT_PATH "."');
            window.ROOT_PATH = '.';
        }
        var sourceFolder = params.s || 'data';
        var scriptTag = document.createElement('script');
        scriptTag.async = false;
        scriptTag.src = `../public/${sourceFolder}/${params.c}.js`
        document.body.appendChild(scriptTag);

        scriptTag.onload = function () {
            if (typeof option !== 'undefined' && option) {
                myChart.setOption(option);
            }
        }
    }
</script>
</body>
</html>