代码
提交代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>Echarts Example</title> </head> <body> <button id="btnStart" type="button">开始渲染</button> <div id="main" style="width: 800px;height: 400px"></div> <script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script> <script type="text/javascript"> // 生成随机数据 function genData(len, offset) { const lngRange = [-10.781327, 131.48]; const latRange = [18.252847, 52.33]; const result = new Array(len); for (let i = 0; i < len; i++) { const x = +Math.random() * 10; const y = +Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random() + (offset || 0) / 10; result[i] = [x, y]; } return result; } const data = genData(500000); const chart = echarts.init(document.getElementById('main')); const option = { xAxis: { type: 'value' }, yAxis: { type: 'value' }, series: [ { data: data, type: 'scatter', large: true, largeThreshold: 1000, progressive: 100, symboleSize: 3, }, ], }; document.getElementById('btnStart').addEventListener('click', function () { chart.setOption(option); }); </script> </body> </html>
运行结果