You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/10/14 04:54:25 UTC
[incubator-echarts] branch next updated: fix(event): support label
trigger mouse event.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/next by this push:
new 99e8019 fix(event): support label trigger mouse event.
99e8019 is described below
commit 99e8019b8f7c043edef3905a0a9002c0a7bd88f4
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Oct 14 12:54:05 2020 +0800
fix(event): support label trigger mouse event.
---
src/chart/custom.ts | 2 +-
src/echarts.ts | 28 +++--
src/util/event.ts | 18 +--
test/line-animation.html | 282 ++++++++++++++++++++++-------------------------
4 files changed, 162 insertions(+), 168 deletions(-)
diff --git a/src/chart/custom.ts b/src/chart/custom.ts
index 0c645f8..001f684 100644
--- a/src/chart/custom.ts
+++ b/src/chart/custom.ts
@@ -531,7 +531,7 @@ class CustomSeriesView extends ChartView {
// Enable to give a name on a group made by `renderItem`, and listen
// events that triggerd by its descendents.
- while ((targetEl = targetEl.parent) && targetEl !== this.group) {
+ while ((targetEl = (targetEl.__hostTarget || targetEl.parent)) && targetEl !== this.group) {
if (targetEl.name === elementName) {
return true;
}
diff --git a/src/echarts.ts b/src/echarts.ts
index 388c5c5..bf0c9bb 100644
--- a/src/echarts.ts
+++ b/src/echarts.ts
@@ -903,20 +903,26 @@ class ECharts extends Eventful {
const el = e.target;
let params: ECEvent;
const isGlobalOut = eveName === 'globalout';
- const ecData = el && getECData(el);
// no e.target when 'globalout'.
if (isGlobalOut) {
params = {} as ECEvent;
}
- else if (ecData && ecData.dataIndex != null) {
- const dataModel = ecData.dataModel || ecModel.getSeriesByIndex(ecData.seriesIndex);
- params = (
- dataModel && dataModel.getDataParams(ecData.dataIndex, ecData.dataType) || {}
- ) as ECEvent;
- }
- // If element has custom eventData of components
- else if (el && ecData.eventData) {
- params = zrUtil.extend({}, ecData.eventData) as ECEvent;
+ else {
+ el && findEventDispatcher(el, (parent) => {
+ const ecData = getECData(parent);
+ if (ecData && ecData.dataIndex != null) {
+ const dataModel = ecData.dataModel || ecModel.getSeriesByIndex(ecData.seriesIndex);
+ params = (
+ dataModel && dataModel.getDataParams(ecData.dataIndex, ecData.dataType) || {}
+ ) as ECEvent;
+ return true;
+ }
+ // If element has custom eventData of components
+ else if (ecData.eventData) {
+ params = zrUtil.extend({}, ecData.eventData) as ECEvent;
+ return true;
+ }
+ }, true);
}
// Contract: if params prepared in mouse event,
@@ -1829,7 +1835,7 @@ class ECharts extends Eventful {
}).on('click', function (e) {
const el = e.target;
const dispatcher = findEventDispatcher(
- el, (target) => getECData(target).dataIndex != null
+ el, (target) => getECData(target).dataIndex != null, true
);
if (dispatcher) {
const actionType = (dispatcher as ECElement).selected ? 'unselect' : 'select';
diff --git a/src/util/event.ts b/src/util/event.ts
index b1aac38..498662c 100644
--- a/src/util/event.ts
+++ b/src/util/event.ts
@@ -19,19 +19,21 @@
import Element from 'zrender/src/Element';
-// Find a dispatcher that's on the most top.
-export function findEventDispatcher(target: Element, det: (target: Element) => boolean) {
+export function findEventDispatcher(
+ target: Element,
+ det: (target: Element) => boolean,
+ returnFirstMatch?: boolean
+) {
let found;
while (target) {
if (det(target)) {
found = target;
+ if (returnFirstMatch) {
+ break;
+ }
}
- if (target.__hostTarget) {
- target = target.__hostTarget;
- }
- else {
- target = target.parent;
- }
+
+ target = target.__hostTarget || target.parent;
}
return found;
}
\ No newline at end of file
diff --git a/test/line-animation.html b/test/line-animation.html
index 9e725a7..5b87f07 100644
--- a/test/line-animation.html
+++ b/test/line-animation.html
@@ -49,6 +49,9 @@ under the License.
}
</style>
+ <button onclick="change()">CHANGE</button>
+ <div class="chart" id="main2"></div>
+
<h2>Default Label Animation</h2>
<div class="chart" id="main0"></div>
@@ -57,22 +60,143 @@ under the License.
<div class="chart" id="main1"></div>
- <h2>dataZoom Animation</h2>
- <button onclick="change()">CHANGE</button>
- <div class="chart" id="main2"></div>
<script>
- var echarts;
- var chart;
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var groupCategories = [];
+ var groupColors = [];
+ var chart = echarts.init(document.getElementById('main2'));
+
+ var base = +new Date(1968, 9, 3);
+ var oneDay = 24 * 3600 * 1000;
+ var date = [];
+ var data = [];
+
+ for (var i = 0; i < 10; i++) {
+ var now = new Date(base += oneDay);
+ date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
+ // data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+ data.push(i * i - 15);
+ }
+
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ position: function (pt) {
+ return [pt[0], '10%'];
+ }
+ },
+ legend: {
+ data: ['large area']
+ },
+ toolbox: {
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none'
+ },
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ grid: {
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: date,
+ axisTick: {
+ interval: 0
+ },
+ axisLabel: {
+ interval: 0
+ }
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: [0, '100%']
+ },
+ dataZoom: [{
+ type: 'inside',
+ // start: 0,
+ // end: 10
+ }, {
+ start: 0,
+ end: 10,
+ handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+ handleSize: '80%',
+ handleStyle: {
+ color: '#fff',
+ shadowBlur: 3,
+ shadowColor: 'rgba(0, 0, 0, 0.6)',
+ shadowOffsetX: 2,
+ shadowOffsetY: 2
+ }
+ }],
+ series: [
+ {
+ name:'large area',
+ type:'line',
+ symbol: 'none',
+ // type:'scatter',
+ // smooth:true,
+ // symbol: 'none',
+ sampling: 'average',
+ itemStyle: {
+ normal: {
+ color: 'rgb(255, 70, 131)'
+ }
+ },
+ lineStyle: {
+ normal: {
+ shadowBlur: 6,
+ shadowColor: '#999',
+ shadowOffsetX: 10,
+ shadowOffsetY: 10
+ }
+ },
+ areaStyle: {
+ // origin: 'end',
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgb(255, 158, 68)'
+ }, {
+ offset: 1,
+ color: 'rgb(255, 70, 131)'
+ }])
+ },
+ data: data
+ }
+ ],
+ animationDurationUpdate: 2000
+ };
+
+
+ chart.setOption(option);
+
+ window.change = function () {
+ chart.dispatchAction({
+ type: 'dataZoom',
+ end: 20
+ });
+ }
+
+ });
+
+
+ </script>
+
+ <script>
require([
'echarts'
- ], function (ec) {
- echarts = ec;
- chart = myChart = echarts.init(document.getElementById('main0'));
+ ], function (echarts) {
+ var chart = echarts.init(document.getElementById('main0'));
var xData = [];
var data = [];
@@ -220,15 +344,10 @@ under the License.
<script>
-
- var echarts;
- var chart;
-
require([
'echarts'
- ], function (ec) {
- echarts = ec;
- chart = myChart = echarts.init(document.getElementById('main1'));
+ ], function (echarts) {
+ var chart = echarts.init(document.getElementById('main1'));
var xData = [];
var data = [];
@@ -282,138 +401,5 @@ under the License.
-
- <script>
-
- var echarts;
- var chart;
- var myChart;
- var groupCategories = [];
- var groupColors = [];
-
- require([
- 'echarts'
- ], function (ec) {
- echarts = ec;
- chart = myChart = echarts.init(document.getElementById('main2'));
-
- var base = +new Date(1968, 9, 3);
- var oneDay = 24 * 3600 * 1000;
- var date = [];
- var data = [];
-
- for (var i = 0; i < 10; i++) {
- var now = new Date(base += oneDay);
- date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
- // data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
- data.push(i * i - 15);
- }
-
- option = {
- tooltip: {
- trigger: 'axis',
- position: function (pt) {
- return [pt[0], '10%'];
- }
- },
- legend: {
- data: ['large area']
- },
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
- },
- restore: {},
- saveAsImage: {}
- }
- },
- grid: {
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: date,
- axisTick: {
- interval: 0
- },
- axisLabel: {
- interval: 0
- }
- },
- yAxis: {
- type: 'value',
- boundaryGap: [0, '100%']
- },
- dataZoom: [{
- type: 'inside',
- // start: 0,
- // end: 10
- }, {
- start: 0,
- end: 10,
- handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
- handleSize: '80%',
- handleStyle: {
- color: '#fff',
- shadowBlur: 3,
- shadowColor: 'rgba(0, 0, 0, 0.6)',
- shadowOffsetX: 2,
- shadowOffsetY: 2
- }
- }],
- series: [
- {
- name:'large area',
- type:'line',
- symbol: 'none',
- // type:'scatter',
- // smooth:true,
- // symbol: 'none',
- sampling: 'average',
- itemStyle: {
- normal: {
- color: 'rgb(255, 70, 131)'
- }
- },
- lineStyle: {
- normal: {
- shadowBlur: 6,
- shadowColor: '#999',
- shadowOffsetX: 10,
- shadowOffsetY: 10
- }
- },
- areaStyle: {
- // origin: 'end',
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgb(255, 158, 68)'
- }, {
- offset: 1,
- color: 'rgb(255, 70, 131)'
- }])
- },
- data: data
- }
- ],
- animationDurationUpdate: 2000
- };
-
-
- chart.setOption(option);
-
-
- });
-
- function change() {
- chart.dispatchAction({
- type: 'dataZoom',
- end: 20
- });
- }
-
- </script>
</body>
</html>
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org