| <!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&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> |
