| <!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> |
| <link rel="stylesheet" href="lib/reset.css" /> |
| </head> |
| <body> |
| <style> |
| .test-title { |
| background: #146402; |
| color: #fff; |
| } |
| </style> |
| |
| |
| <div id="main0"></div> |
| <div id="main2"></div> |
| <div id="main3"></div> |
| <!-- <div id="main1"></div> --> |
| |
| |
| <script> |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| var option = { |
| xAxis: {}, |
| yAxis: {}, |
| dataZoom: [{}, {type: 'inside'}], |
| series: [{ |
| type: 'custom', |
| renderItem: function (params, api) { |
| return { |
| type: 'group', |
| position: api.coord([api.value(0), api.value(1)]), |
| children: [{ |
| type: 'rect', |
| shape: { |
| x: -100, |
| y: -100, |
| width: 200, |
| height: 200, |
| r: 10 |
| }, |
| style: { |
| fill: 'rgba(102,241,98,0.4)' |
| }, |
| silent: true, |
| styleEmphasis: false |
| }, { |
| type: 'group', |
| name: 'innerGroup', |
| children: [{ |
| type: 'circle', |
| shape: { |
| r: 30, |
| cx: 0, |
| cy: 0 |
| }, |
| info: 0, |
| style: { |
| fill: 'red', |
| text: 'dataIndex: ' + params.dataIndex, |
| textStroke: '#fff', |
| textStrokeWidth: 1 |
| } |
| }, { |
| type: 'rect', |
| shape: { |
| x: 50, |
| y: 60, |
| width: 80, |
| height: 80 |
| }, |
| style: { |
| fill: '#ff3391' |
| } |
| }] |
| }] |
| }; |
| }, |
| data: [[121, 333], [29, 212]] |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main0', { |
| title: [ |
| 'Eventful: ', |
| '+ red circle and red rect trigger events, but green shapes not. ', |
| '+ Only dataIndex: 1 trigger event', |
| '+ events (click, mousedown, mousemove, mouseup) are printed in console log.', |
| '+ red circle: params.info = 0, red rect: params.info = undefined' |
| ], |
| option: option |
| }); |
| |
| chart && echarts.util.each(['click', 'mousedown', 'mousemove', 'mouseup'], function (eventName) { |
| chart.on(eventName, {dataIndex: 1, element: 'innerGroup'}, function (params) { |
| console.log(params.type, params); |
| console.log('params.info: ', params.info); |
| }); |
| }); |
| }); |
| |
| </script> |
| |
| |
| |
| |
| <script> |
| |
| // require([ |
| // 'echarts'/*, 'map/js/china' */ |
| // ], function (echarts) { |
| |
| // // deprecated: this case would be wrong. |
| |
| // var option = { |
| // xAxis: { |
| // min: 90, |
| // max: 120, |
| // scale: true |
| // }, |
| // yAxis: { |
| // min: 50, |
| // max: 500, |
| // scale: true |
| // }, |
| // dataZoom: [{ |
| // type: 'inside' |
| // }, { |
| // type: 'slider' |
| // }], |
| // series: [{ |
| // type: 'custom', |
| // renderItem: function (params, api) { |
| // var pos = api.coord([api.value(0), api.value(1)]); |
| // var rectClipBy = { |
| // x: params.coordSys.x - pos[0], |
| // y: params.coordSys.y - pos[1], |
| // width: params.coordSys.width, |
| // height: params.coordSys.height |
| // }; |
| // var points = echarts.graphic.clipPointsByRect([ |
| // [0, 0], |
| // [50, -50], |
| // [90, -50], |
| // [140, 0], |
| // [90, 50] |
| // ], rectClipBy); |
| |
| // return { |
| // type: 'polygon', |
| // position: pos, |
| // shape: {points: points}, |
| // style: { |
| // fill: 'green' |
| // } |
| // } |
| // }, |
| // data: [[100, 300]] |
| // }] |
| // }; |
| |
| // var chart = testHelper.create(echarts, 'main1', { |
| // title: [ |
| // 'Test clipPointsByRect: dataZoom clip should be normal, especially when all clipped', |
| // ], |
| // option: option |
| // }); |
| |
| // }); |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| // deprecated: this case would be wrong. |
| |
| var option = { |
| xAxis: { |
| min: 90, |
| max: 120, |
| scale: true |
| }, |
| yAxis: { |
| min: 50, |
| max: 500, |
| scale: true |
| }, |
| dataZoom: [{ |
| type: 'inside' |
| }, { |
| type: 'slider' |
| }], |
| series: [{ |
| type: 'custom', |
| renderItem: function (params, api) { |
| return { |
| type: 'polygon', |
| position: api.coord([api.value(0), api.value(1)]), |
| shape: { |
| points: [ |
| [0, 0], |
| [50, -50], |
| [90, -50], |
| [140, 0], |
| [90, 50] |
| ] |
| }, |
| clip: { |
| x: params.coordSys.x, |
| y: params.coordSys.y, |
| width: params.coordSys.width, |
| height: params.coordSys.height |
| }, |
| style: { |
| fill: 'green' |
| } |
| } |
| }, |
| data: [[100, 300]] |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main2', { |
| title: [ |
| 'Test clip shape', |
| ], |
| option: option |
| }); |
| |
| }); |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| // deprecated: this case would be wrong. |
| |
| var data = []; |
| var data0 = []; |
| for (var i = 0; i < 100; i++) { |
| data.push(i); |
| data0.push([i, 10]); |
| } |
| |
| var option = { |
| tooltip: { |
| }, |
| dataZoom: [{ |
| type: 'slider', |
| xAxisIndex: 0, |
| filterMode: 'weakFilter', |
| height: 20, |
| bottom: 0, |
| start: -26, |
| end: 26, |
| showDetail: false |
| }, { |
| type: 'inside', |
| xAxisIndex: 0, |
| filterMode: 'weakFilter', |
| start: -26, |
| end: 26, |
| zoomOnMouseWheel: false, |
| moveOnMouseMove: true |
| }, { |
| type: 'slider', |
| yAxisIndex: 0, |
| zoomLock: true, |
| width: 10, |
| right: 10, |
| top: 70, |
| bottom: 20, |
| start: 94, |
| end: 100, |
| handleSize: 0, |
| showDetail: false, |
| }, { |
| type: 'inside', |
| yAxisIndex: 0, |
| start: 94, |
| end: 100, |
| zoomOnMouseWheel: false, |
| moveOnMouseMove: true, |
| moveOnMouseWheel: true |
| }], |
| grid: { |
| show: true, |
| top: 70, |
| bottom: 20, |
| left: 100, |
| right: 20, |
| backgroundColor: '#fff', |
| borderWidth: 0 |
| }, |
| xAxis: { |
| type: 'time', |
| position: 'top', |
| splitLine: { |
| lineStyle: { |
| color: ['#E9EDFF'] |
| } |
| }, |
| axisLine: { |
| show: false |
| }, |
| axisTick: { |
| lineStyle: { |
| color: '#929ABA' |
| } |
| }, |
| axisLabel: { |
| color: '#929ABA', |
| inside: false, |
| align: 'center' |
| } |
| }, |
| yAxis: { |
| }, |
| series: [{ |
| type: 'scatter', |
| data: data0, |
| encode: {x: 1, y: 0} |
| }, { |
| type: 'custom', |
| renderItem: renderAxisLabelItem, |
| encode: { |
| x: -1, // Then this series will not controlled by x. |
| y: 0 |
| }, |
| data: data |
| }] |
| }; |
| |
| function renderAxisLabelItem(params, api) { |
| // Get the heigth corresponds to length 1 on y axis. |
| var x0 = 0; |
| var x1 = 30; |
| var x3 = 90; |
| var blockHeight = api.size([0, 1])[1] - 26; |
| |
| return { |
| type: 'group', |
| position: [ |
| 10, |
| api.coord([0, api.value(0)])[1] |
| // blockHeight |
| ], |
| children: [{ |
| type: 'path', |
| shape: { |
| d: 'M0,0 L0,-20 L30,-20 C40,-20 40,-1 50,-1 L90,-1 L90,0 Z', |
| x: 0, |
| y: -blockHeight, |
| width: 90, |
| height: blockHeight, |
| layout: 'cover' |
| }, |
| style: { |
| fill: '#03b292' |
| } |
| }, { |
| type: 'text', |
| style: { |
| x: (x0 + x1) / 2, |
| y: -blockHeight / 2, |
| text: api.value(1), |
| textFill: '#fff' |
| } |
| // }, { |
| // type: 'text', |
| // style: { |
| // x: x3 - 5, |
| // y: -blockHeight, |
| // textAlign: 'right', |
| // textVerticalAlign: 'bottom', |
| // text: api.value(0), |
| // textFill: '#000' |
| // } |
| }] |
| }; |
| } |
| |
| var chart = testHelper.create(echarts, 'main3', { |
| title: [ |
| 'Test SVG path data auto fit to rect: ', |
| 'the y axis label (made by custom series) should be align with axis tick', |
| ], |
| option: option |
| }); |
| |
| }); |
| |
| </script> |
| |
| |
| |
| |
| </body> |
| </html> |
