| <!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/simpleRequire.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> | |
| </style> | |
| <div id="main-eventful"></div> | |
| <div id="main-clip-by-system"></div> | |
| <div id="main-clip-by-self"></div> | |
| <div id="main-SVG-Path"></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, | |
| textFill: '#000', | |
| 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, 'main-eventful', { | |
| title: [ | |
| 'Eventful: ', | |
| 'Only this el trigger events: **red circle** and **red rect** of **dataIndex: 1**', | |
| ' Others not (green rect not)', | |
| '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) { | |
| var option = { | |
| xAxis: { | |
| min: 90, | |
| max: 120, | |
| scale: true | |
| }, | |
| yAxis: { | |
| min: 50, | |
| max: 500, | |
| scale: true | |
| }, | |
| dataZoom: [ | |
| {type: 'inside', filterMode: 'none'}, | |
| {type: 'slider', filterMode: 'none'}, | |
| {type: 'slider', filterMode: 'none', orient: 'vertical'}, | |
| ], | |
| 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] | |
| ] | |
| }, | |
| style: { | |
| fill: 'green' | |
| } | |
| } | |
| }, | |
| clip: true, | |
| data: [[100, 300]] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main-clip-by-system', { | |
| title: [ | |
| 'The shape should be **clipped** by the grid (by series.clip).', | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts'/*, 'map/js/china' */ | |
| ], function (echarts) { | |
| var option = { | |
| xAxis: { | |
| min: 90, | |
| max: 120, | |
| scale: true | |
| }, | |
| yAxis: { | |
| min: 50, | |
| max: 500, | |
| scale: true | |
| }, | |
| dataZoom: [ | |
| {type: 'inside', filterMode: 'none'}, | |
| {type: 'slider', filterMode: 'none'}, | |
| {type: 'slider', filterMode: 'none', orient: 'vertical'}, | |
| ], | |
| series: [{ | |
| type: 'custom', | |
| renderItem: function (params, api) { | |
| return { | |
| type: 'group', | |
| children: [{ | |
| type: 'polygon', | |
| position: api.coord([api.value(0), api.value(1)]), | |
| shape: { | |
| points: [ | |
| [0, 0], | |
| [50, -50], | |
| [90, -50], | |
| [140, 0], | |
| [90, 50] | |
| ] | |
| }, | |
| style: { | |
| fill: 'blue' | |
| } | |
| }], | |
| clipPath: { | |
| type: 'rect', | |
| shape: { | |
| x: params.coordSys.x, | |
| y: params.coordSys.y, | |
| width: params.coordSys.width, | |
| height: params.coordSys.height | |
| } | |
| } | |
| } | |
| }, | |
| data: [[100, 300]] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main-clip-by-self', { | |
| title: [ | |
| 'The shape should be **clipped** by the grid (by custom clipPath).', | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], 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', | |
| 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', | |
| textAlign: 'center', | |
| textVerticalAlign: 'middle' | |
| } | |
| }] | |
| }; | |
| } | |
| var chart = testHelper.create(echarts, 'main-SVG-Path', { | |
| title: [ | |
| 'Test SVG path data auto fit to rect: ', | |
| 'the y axis label (made by custom series) should be center', | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |