| <!DOCTYPE html> |
| <!-- |
| 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="lib/esl.js"></script> |
| <script src="lib/config.js"></script> |
| <script src="lib/jquery.min.js"></script> |
| <script src="lib/facePrint.js"></script> |
| <script src="lib/testHelper.js"></script> |
| <!-- <script src="ut/lib/canteen.js"></script> --> |
| <link rel="stylesheet" href="lib/reset.css" /> |
| </head> |
| <body> |
| <style> |
| body { |
| background: #000 !important; |
| } |
| .test-chart { |
| margin: 80px auto 80px auto !important; |
| background: #fff !important; |
| } |
| #live-info-panel { |
| position: fixed; |
| right: 5px; |
| top: 5px; |
| width: 140px; |
| height: 120px; |
| box-shadow: 0 0 5px #fff; |
| border: 2px solid green; |
| z-index: 999999; |
| color: #fff; |
| font-size: 10px; |
| background: #000; |
| } |
| #live-info-panel .title { |
| font-size: 10px; |
| color: yellow; |
| text-align: center; |
| } |
| #live-info-panel #live-info-content { |
| padding: 2px 3px; |
| } |
| #parent-of-main0 { |
| overflow: hidden; |
| } |
| </style> |
| |
| |
| <div id="live-info-panel"> |
| <div class="title">Live Info Panel</div> |
| <div id="live-info-content"></div> |
| </div> |
| |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div> |
| <div id="parent-of-main0"> |
| <div id="main0"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="main1"></div> |
| <div id="main2"></div> |
| |
| |
| |
| |
| <script> |
| var _liveInfoPanel = document.getElementById('live-info-panel'); |
| var _liveInfoContent = document.getElementById('live-info-content');; |
| var _liveMsg = []; |
| function _printLiveInfo(msg) { |
| _liveMsg.push(testHelper.encodeHTML(msg)); |
| _liveMsg = _liveMsg.slice(Math.max(0, _liveMsg.length - 9)); |
| _liveInfoContent.innerHTML = _liveMsg.join('<br>'); |
| } |
| function _printEvent(event) { |
| var x = event.offsetX; |
| var y = event.offsetY; |
| x = x != null ? x.toFixed(1) : '-'; |
| y = y != null ? y.toFixed(1) : '-'; |
| _printLiveInfo( |
| event.type + ' [' + x + ',' + x + ']' |
| ); |
| } |
| </script> |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| // $.getJSON('./data/nutrients.json', function (data) {}); |
| |
| option = { |
| xAxis: {}, |
| yAxis: {}, |
| brush: {}, |
| tooltip: { |
| enterable: true, |
| alwaysShowContent: true, |
| position: [10, 10] |
| }, |
| series: { |
| type: 'line', |
| data: [[11, 22]] |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main0', { |
| title: [ |
| '[ Test this case in **PC** / **Touch device** / **WeApp(no document)** ]', |
| '(1) Before anything clicked, **mousemove** / **click** on both inside and outside echarts.', |
| '**Live Info Panel** should have mouse events.', |
| '(2) **mousemove** / **click** on both inside and outside echarts.', |
| '**Live Info Panel** should display mouse **xy** correctly.', |
| 'drag outside and release, "globalout" event should be displayed fianly (only PC)', |
| '(3) Click "add stopPropagation on parent"', |
| 'drag outside should be as usual.', |
| 'Move inside and outside echarts, **Live Info Panel** should have mouse event.' |
| ], |
| option: option, |
| width: 300, |
| height: 200, |
| buttons: [{ |
| text: 'add stopPropagation on parent', |
| onclick: function () { |
| var parent = document.getElementById('parent-of-main0'); |
| parent.addEventListener('mousemove', function (event) { |
| event.stopPropagation(); |
| }); |
| } |
| }] |
| }); |
| |
| var zr; |
| var mounted; |
| if (chart) { |
| zr = chart.getZr(); |
| zr.on('mousemove', function (event) { |
| _printEvent(event) |
| }); |
| zr.on('mouseup', function (event) { |
| _printEvent(event) |
| }); |
| zr.on('globalout', function (event) { |
| _printEvent(event) |
| }); |
| } |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| // $.getJSON('./data/nutrients.json', function (data) {}); |
| |
| option = { |
| xAxis: {}, |
| yAxis: {}, |
| toolbox: { |
| feature: { |
| dataZoom: {} |
| } |
| }, |
| grid: { |
| left: 100 |
| }, |
| brush: {}, |
| dataZoom: [{ |
| type: 'slider' |
| }, { |
| type: 'inside' |
| }], |
| visualMap: { |
| type: 'continuous', |
| calculable: true, |
| left: 0, |
| top: 20, |
| min: 0, |
| max: 50, |
| itemHeight: 80 |
| }, |
| series: { |
| type: 'line', |
| data: [[11, 22], [33, 44], [42, 11], [52, 33]] |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main1', { |
| title: [ |
| 'Drag **toolbox.dataZoom** / **dataZoom-slider** / **brush**', |
| 'to the **top** / **right** / **bottom** / **left** of the **black area** (out of echarts)', |
| 'and then mouseup or go back.', |
| 'Should act like listening to document `mousemove` and `mouseup`' |
| ], |
| option: option, |
| width: 350, |
| height: 260, |
| // buttons: [{text: 'btn-txt', onclick: function () {}}], |
| // recordCanvas: true, |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require(['echarts', 'map/js/china'], function (echarts) { |
| var testGeoJson1 = { |
| 'type': 'FeatureCollection', |
| 'features': [ |
| { |
| 'geometry': { |
| 'type': 'Polygon', |
| 'coordinates': [ |
| [ |
| [ |
| 2000, |
| 3000 |
| ], |
| [ |
| 5000, |
| 3000 |
| ], |
| [ |
| 5000, |
| 8000 |
| ], |
| [ |
| 2000, |
| 8000 |
| ] |
| ] |
| ] |
| }, |
| 'properties': { |
| 'name': 'Some Area', |
| 'childNum': 1 |
| } |
| } |
| ] |
| }; |
| echarts.registerMap('test1', testGeoJson1); |
| |
| var data = []; |
| var step = 200; |
| var lngStart = 2000; |
| var latStart = 4000; |
| for (var i = 0; i < 10; i++) { |
| for (var j = 0; j < 20; j++) { |
| data.push({ |
| value: [lngStart + j * step, latStart + i * step], |
| symbolSize: 5 + j * 2 |
| }); |
| } |
| } |
| |
| var option = { |
| geo: [{ |
| map: 'test1', |
| zoom: 8, |
| roam: true |
| }], |
| brush: { |
| geoIndex: 0 |
| }, |
| series: [{ |
| type: 'scatter', |
| coordinateSystem: 'geo', |
| symbol: 'roundRect', |
| symbolSize: 30, |
| data: data |
| }, { |
| type: 'bar', |
| data: [] |
| }], |
| xAxis: {}, |
| yAxis: {}, |
| }; |
| |
| var chart = testHelper.create(echarts, 'main2', { |
| title: [ |
| 'brush out of the area, the points that out of the chart area should be selected.', |
| ], |
| option: option, |
| width: 350, |
| height: 260 |
| }); |
| |
| if (!chart) { |
| return; |
| } |
| |
| chart.on('brushselected', function (params) { |
| var selectedDataIndices = fetchSelected(params); |
| txtEl.style.text = 'selected data indices: ' + selectedDataIndices.join(', '); |
| txtEl.dirty(); |
| }); |
| |
| function fetchSelected(params) { |
| var selectedDataIndices = []; |
| for (var i = 0; i < params.batch.length; i++) { |
| var item = params.batch[i]; |
| var selected = item.selected; |
| for (var j = 0; j < selected.length; j++) { |
| selectedDataIndices = selectedDataIndices.concat(selected[j].dataIndex); |
| } |
| } |
| return selectedDataIndices; |
| } |
| |
| var txtEl = new echarts.graphic.Text({ |
| style: { |
| x: 10, |
| y: 10, |
| color: 'blue', |
| fontSize: 9 |
| }, |
| z: 9999 |
| }); |
| var zr = chart.getZr(); |
| zr.add(txtEl); |
| |
| }); |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| </body> |
| </html> |
| |
