| <!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> |
| <div id="main-tooltip-trigger-axis"></div> |
| <div id="main-tooltip-trigger-item"></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 height 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> |
| |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var chart = testHelper.create(echarts, 'main-tooltip-trigger-axis', { |
| title: [ |
| 'Test tooltip trigger: axis', |
| 'It should bahave as if tooltipDisabled is not set', |
| ], |
| option: { |
| legend: { |
| show: true |
| }, |
| tooltip: { |
| trigger: 'axis' |
| }, |
| xAxis: { |
| type: 'value' |
| }, |
| yAxis: { |
| type: 'value' |
| }, |
| series: [{ |
| type: 'custom', |
| name: 'Custom series', |
| data: [[100, 23], [25, 41], [52, 12]], |
| renderItem: function (params, api) { |
| const coord = api.coord([api.value(0), api.value(1)]); |
| const size = 50; |
| return { |
| type: 'rect', |
| tooltipDisabled: true, |
| shape: { |
| x: coord[0] - size / 2, |
| y: coord[1] - size / 2, |
| width: size, |
| height: size |
| }, |
| style: api.style() |
| } |
| } |
| }, { |
| type: 'custom', |
| name: 'Custom series with group', |
| data: [[80, 20]], |
| renderItem: function (params, api) { |
| const coord = api.coord([api.value(0), api.value(1)]); |
| const size = 50; |
| return { |
| type: 'group', |
| children: [{ |
| type: 'rect', |
| shape: { |
| x: coord[0] - size / 2, |
| y: coord[1] - size / 2, |
| width: size, |
| height: size |
| }, |
| style: api.style() |
| }, { |
| type: 'group', |
| tooltipDisabled: true, |
| children: [{ |
| type: 'rect', |
| shape: { |
| x: coord[0] - size / 2 - 20, |
| y: coord[1] + 20, |
| width: size + 40, |
| height: 40 |
| }, |
| style: { |
| fill: '#888' |
| } |
| }] |
| }] |
| }; |
| } |
| }, { |
| type: 'scatter', |
| name: 'Scatter series', |
| data: [[83, 43], [19, 32], [74, 41]], |
| symbolSize: 50, |
| }] |
| } |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var chart = testHelper.create(echarts, 'main-tooltip-trigger-item', { |
| title: [ |
| 'Test tooltip trigger: item', |
| 'Hovering on blue/gray rects should not trigger tooltip but should have emphasis style.', |
| 'Hovering on the green rect should trigger tooltip.' |
| ], |
| option: { |
| legend: { |
| show: true |
| }, |
| tooltip: { |
| trigger: 'item' |
| }, |
| xAxis: { |
| type: 'value' |
| }, |
| yAxis: { |
| type: 'value' |
| }, |
| series: [{ |
| type: 'custom', |
| name: 'Custom series', |
| data: [[100, 23], [25, 41], [52, 12]], |
| renderItem: function (params, api) { |
| const coord = api.coord([api.value(0), api.value(1)]); |
| const size = 50; |
| return { |
| type: 'rect', |
| tooltipDisabled: true, |
| shape: { |
| x: coord[0] - size / 2, |
| y: coord[1] - size / 2, |
| width: size, |
| height: size |
| }, |
| style: api.style() |
| } |
| } |
| }, { |
| type: 'custom', |
| name: 'Custom series with group', |
| data: [[80, 20]], |
| renderItem: function (params, api) { |
| const coord = api.coord([api.value(0), api.value(1)]); |
| const size = 50; |
| return { |
| type: 'group', |
| children: [{ |
| type: 'rect', |
| shape: { |
| x: coord[0] - size / 2, |
| y: coord[1] - size / 2, |
| width: size, |
| height: size |
| }, |
| style: api.style() |
| }, { |
| type: 'group', |
| tooltipDisabled: true, |
| children: [{ |
| type: 'rect', |
| shape: { |
| x: coord[0] - size / 2 - 20, |
| y: coord[1] + 20, |
| width: size + 40, |
| height: 40 |
| }, |
| style: { |
| fill: '#888' |
| } |
| }] |
| }] |
| }; |
| } |
| }, { |
| type: 'scatter', |
| name: 'Scatter series', |
| data: [[83, 43], [19, 32], [74, 41]], |
| symbolSize: 50, |
| }] |
| } |
| }); |
| }); |
| </script> |
| |
| </body> |
| </html> |
