| |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <script src="../dist/echarts.js"></script> |
| <script src="lib/jquery.min.js"></script> |
| <script src="lib/testHelper.js"></script> |
| <script src="lib/facePrint.js"></script> |
| </head> |
| <body> |
| <style> |
| html, body, #main { |
| width: 100%; |
| height: 600; |
| margin: 0; |
| } |
| |
| #main { |
| /* margin-left: 200px; */ |
| /* width: 300px; */ |
| width: 90%; |
| margin: 0 auto; |
| } |
| |
| #snapshot { |
| position: fixed; |
| right: 10; |
| top: 10; |
| width: 50; |
| height: 50; |
| background: #fff; |
| border: 2px solid rgba(0,0,0,0.5); |
| } |
| |
| |
| </style> |
| |
| <button id="show_layers">Show Layers</button> |
| |
| <script> |
| var btn = document.getElementById('show_layers'); |
| btn.onclick = function () { |
| var container = document.getElementById('container'); |
| container.className = 'container-show-layers'; |
| var canvasList = document.getElementsByTagName('canvas'); |
| canvasList[0].parentNode.style.cssText = [ |
| // 'perspective:971px;' |
| ].join(';'); |
| for (var i = 0; i < canvasList.length; i++) { |
| var canvasDom = canvasList[i]; |
| canvasDom.style.cssText = [ |
| 'transform: translateY(' + (-200 - i * 1350) + 'px) rotateX(82deg) rotateZ(345deg) scaleX(0.3) translateX(-1600px)', |
| 'border: 10px solid #999', |
| 'background: rgba(255,255,255,0.5)' |
| ].join(';') + ';'; |
| } |
| }; |
| </script> |
| |
| |
| <div id="container" data-ec-title="css transform 3d" style=" |
| "> |
| <div id="main" style=""></div> |
| </div> |
| |
| <script> |
| |
| var dataCount = 1e5; |
| // var dataCount = 1e6; |
| var chunkMax = 4; |
| var chunkCount = 0; |
| // var progressive = 2; |
| // var progressive = 5000; |
| // var progressive = 10000; |
| var progressive = 'auto'; |
| // var progressive = 100; |
| // var largeThreshold = 500; |
| var largeThreshold = 500; |
| // var largeThreshold = Infinity; |
| var ticker = 'frame'; |
| // var ticker = 'messageChannel'; |
| |
| function genData1(len, offset) { |
| var lngRange = [-10.781327, 131.48]; |
| var latRange = [18.252847, 52.33]; |
| |
| var arr = new Float32Array(len * 2); |
| var off = 0; |
| |
| for (var i = 0; i < len; i++) { |
| var x = +Math.random() * 10; |
| var y = +Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random() + (offset || 0) / 10; |
| arr[off++] = x; |
| arr[off++] = y; |
| } |
| return arr; |
| } |
| |
| function genData2(count) { |
| var lngRange = [-10.781327, 31.48]; |
| var latRange = [-18.252847, 30.33]; |
| return genData(count, lngRange, latRange); |
| } |
| |
| function genData(count, lngRange, latRange) { |
| lngRange[1] += 5; |
| lngRange[0] -= 10; |
| latRange[1] += 4; |
| var lngExtent = lngRange[1] - lngRange[0]; |
| var latExtent = latRange[1] - latRange[0]; |
| var data = []; |
| for (var i = 0; i < count; i++) { |
| data.push([ |
| Math.random() * lngExtent + lngRange[0], |
| Math.random() * latExtent + latRange[0], |
| Math.random() * 1000 |
| ]); |
| } |
| return data; |
| } |
| |
| var series0Data = genData1(dataCount); |
| |
| var chart = echarts.init(document.getElementById('main'), null, { |
| schedule: { |
| ticker: ticker |
| } |
| }); |
| |
| chart.setOption({ |
| tooltip: { |
| // trigger: 'axis', |
| // renderMode: 'richText' |
| }, |
| toolbox: { |
| left: 'center', |
| feature: { |
| dataZoom: {} |
| } |
| }, |
| legend: { |
| orient: 'vertical', |
| left: 'left', |
| data: ['pm2.5' /* ,'pm10' */] |
| }, |
| // ??? |
| // visualMap: { |
| // min: 0, |
| // max: 1500, |
| // left: 'left', |
| // top: 'bottom', |
| // text: ['High','Low'], |
| // seriesIndex: [1, 2, 3], |
| // inRange: { |
| // color: ['#006edd', '#e0ffff'] |
| // }, |
| // calculable : true |
| // }, |
| xAxis: [{ |
| }], |
| yAxis: [{ |
| }], |
| dataZoom: [{ |
| type: 'inside', |
| // filterMode: 'none', |
| }, { |
| type: 'slider', |
| // filterMode: 'none', |
| showDataShadow: false |
| }], |
| animation: false, |
| series : [{ |
| name: 'pm2.5', |
| type: 'scatter', |
| progressive: progressive, |
| data: series0Data, |
| dimensions: ['x', 'y'], |
| // symbol: 'rect', |
| symbolSize: 3, |
| // symbol: 'rect', |
| itemStyle: { |
| // color: '#128de3', |
| color: '#5470c6', |
| opacity: 0.2 |
| }, |
| z: 100, |
| large: true, |
| // large: { |
| // symbolSize: 2 |
| // }, |
| // large: function (params) { |
| // if (params.dataCount > 30000) { |
| // return {symbolSize: 1}; |
| // } |
| // else if (params.dataCount > 3000) { |
| // return {symbolSize: 5}; |
| // } |
| // }, |
| largeThreshold: largeThreshold |
| }, { |
| type: 'pie', |
| center: ['50%', '50%'], |
| radius: '30%', |
| data: [{ |
| value: 123, name: 'a' |
| }, { |
| value: 123, name: 'b' |
| }, { |
| value: 123, name: 'c' |
| }, { |
| value: 123, name: 'd' |
| }, { |
| value: 123, name: 'e' |
| }, { |
| value: 23, name: 'f' |
| }], |
| z: 121212 |
| }] |
| }); |
| |
| chart.on('click', function (param) { |
| alert('asdf'); |
| }); |
| |
| // chart.on('finished', function () { |
| // console.log('finished'); |
| // var url = chart.getDataURL(); |
| // var snapshotEl = document.getElementById('snapshot'); |
| // snapshotEl.src = url; |
| // }); |
| |
| window.onresize = chart.resize; |
| |
| // next(); |
| |
| function next() { |
| if (chunkCount++ < chunkMax) { |
| var newData = genData1(100000, chunkCount); |
| chart.appendData({seriesIndex: 0, data: newData}); |
| // console.log('Data loaded'); |
| setTimeout(next, 3000); |
| } |
| } |
| |
| |
| </script> |
| </body> |
| </html> |
