You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2018/09/09 18:44:41 UTC
[incubator-echarts] 05/05: Fix custom series event and graphic
component event, enable info, and fix event filter rule.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch release
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 55b4f102d8eb2f1b6047b4d9daf8f7549f27aa27
Author: sushuang <su...@gmail.com>
AuthorDate: Mon Sep 10 02:17:21 2018 +0800
Fix custom series event and graphic component event, enable info, and fix event filter rule.
---
src/chart/custom.js | 69 ++++++++++++--------
src/component/graphic.js | 11 +---
src/echarts.js | 10 +--
test/custom-feature.html | 166 +++++++++++++++++++++++++++++++++++++++++++++--
test/ec-event.html | 26 ++++----
5 files changed, 225 insertions(+), 57 deletions(-)
diff --git a/src/chart/custom.js b/src/chart/custom.js
index 056ae8a..32863c8 100644
--- a/src/chart/custom.js
+++ b/src/chart/custom.js
@@ -18,13 +18,14 @@
*/
import {__DEV__} from '../config';
-import * as echarts from '../echarts';
import * as zrUtil from 'zrender/src/core/util';
import * as graphicUtil from '../util/graphic';
import {getDefaultLabel} from './helper/labelHelper';
import createListFromArray from './helper/createListFromArray';
-import { getLayoutOnAxis } from '../layout/barGrid';
+import {getLayoutOnAxis} from '../layout/barGrid';
import DataDiffer from '../data/DataDiffer';
+import SeriesModel from '../model/Series';
+import ChartView from '../view/Chart';
import prepareCartesian2d from '../coord/cartesian/prepareCustom';
import prepareGeo from '../coord/geo/prepareCustom';
@@ -60,11 +61,12 @@ var prepareCustoms = {
calendar: prepareCalendar
};
+
// ------
// Model
// ------
-echarts.extendSeriesModel({
+SeriesModel.extend({
type: 'series.custom',
@@ -92,8 +94,20 @@ echarts.extendSeriesModel({
// itemStyle: {}
},
+ /**
+ * @override
+ */
getInitialData: function (option, ecModel) {
return createListFromArray(this.getSource(), this);
+ },
+
+ /**
+ * @override
+ */
+ getDataParams: function (dataIndex, dataType, el) {
+ var params = SeriesModel.prototype.getDataParams.apply(this, arguments);
+ el && (params.info = el.info);
+ return params;
}
});
@@ -101,7 +115,7 @@ echarts.extendSeriesModel({
// View
// -----
-echarts.extendChartView({
+ChartView.extend({
type: 'custom',
@@ -175,15 +189,15 @@ echarts.extendChartView({
* @override
*/
filterForExposedEvent: function (eventType, query, targetEl, packedEvent) {
- var targetName = query.target;
- if (targetName == null || targetEl.name === targetName) {
+ var elementName = query.element;
+ if (elementName == null || targetEl.name === elementName) {
return true;
}
// 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) {
- if (targetEl.name === targetName) {
+ if (targetEl.name === elementName) {
return true;
}
}
@@ -213,13 +227,11 @@ function createEl(elOption) {
el.__customPathData = elOption.pathData;
}
else if (graphicType === 'image') {
- el = new graphicUtil.Image({
- });
+ el = new graphicUtil.Image({});
el.__customImagePath = elOption.style.image;
}
else if (graphicType === 'text') {
- el = new graphicUtil.Text({
- });
+ el = new graphicUtil.Text({});
el.__customText = elOption.style.text;
}
else {
@@ -239,24 +251,24 @@ function createEl(elOption) {
}
function updateEl(el, dataIndex, elOption, animatableModel, data, isInit, isRoot) {
- var targetProps = {};
+ var transitionProps = {};
var elOptionStyle = elOption.style || {};
- elOption.shape && (targetProps.shape = zrUtil.clone(elOption.shape));
- elOption.position && (targetProps.position = elOption.position.slice());
- elOption.scale && (targetProps.scale = elOption.scale.slice());
- elOption.origin && (targetProps.origin = elOption.origin.slice());
- elOption.rotation && (targetProps.rotation = elOption.rotation);
+ elOption.shape && (transitionProps.shape = zrUtil.clone(elOption.shape));
+ elOption.position && (transitionProps.position = elOption.position.slice());
+ elOption.scale && (transitionProps.scale = elOption.scale.slice());
+ elOption.origin && (transitionProps.origin = elOption.origin.slice());
+ elOption.rotation && (transitionProps.rotation = elOption.rotation);
if (el.type === 'image' && elOption.style) {
- var targetStyle = targetProps.style = {};
+ var targetStyle = transitionProps.style = {};
zrUtil.each(['x', 'y', 'width', 'height'], function (prop) {
prepareStyleTransition(prop, targetStyle, elOptionStyle, el.style, isInit);
});
}
if (el.type === 'text' && elOption.style) {
- var targetStyle = targetProps.style = {};
+ var targetStyle = transitionProps.style = {};
zrUtil.each(['x', 'y'], function (prop) {
prepareStyleTransition(prop, targetStyle, elOptionStyle, el.style, isInit);
});
@@ -283,19 +295,22 @@ function updateEl(el, dataIndex, elOption, animatableModel, data, isInit, isRoot
}
if (isInit) {
- el.attr(targetProps);
+ el.attr(transitionProps);
}
else {
- graphicUtil.updateProps(el, targetProps, animatableModel, dataIndex);
+ graphicUtil.updateProps(el, transitionProps, animatableModel, dataIndex);
}
+ // Merge by default.
// z2 must not be null/undefined, otherwise sort error may occur.
- el.attr({
- z2: elOption.z2 || 0,
- silent: elOption.silent,
- invisible: elOption.invisible,
- ignore: elOption.ignore
- });
+ elOption.hasOwnProperty('z2') && el.attr('z2', elOption.z2 || 0);
+ elOption.hasOwnProperty('silent') && el.attr('silent', elOption.silent);
+ elOption.hasOwnProperty('invisible') && el.attr('invisible', elOption.invisible);
+ elOption.hasOwnProperty('ignore') && el.attr('ignore', elOption.ignore);
+ // `elOption.info` enables user to mount some info on
+ // elements and use them in event handlers.
+ // Update them only when user specified, otherwise, remain.
+ elOption.hasOwnProperty('info') && el.attr('info', elOption.info);
// If `elOption.styleEmphasis` is `false`, remove hover style. The
// logic is ensured by `graphicUtil.setElementHoverStyle`.
diff --git a/src/component/graphic.js b/src/component/graphic.js
index 7436c2d..8b6d5f8 100644
--- a/src/component/graphic.js
+++ b/src/component/graphic.js
@@ -86,7 +86,7 @@ var GraphicModel = echarts.extendComponentModel({
// This mode is similar to css behavior, which is useful when you
// want an element to be able to overflow its container. (Consider
// a rotated circle needs to be located in a corner.)
- // data: custom data. enables user to mount some info on elements and use them
+ // info: custom info. enables user to mount some info on elements and use them
// in event handlers. Update them only when user specified, otherwise, remain.
// Note: elements is always behind its ancestors in this elements array.
@@ -539,18 +539,13 @@ function setEventData(el, graphicModel, elOption) {
eventData = el.eventData = {
componentType: 'graphic',
graphicIndex: graphicModel.componentIndex,
- data: el.__userData,
name: el.name
};
}
- // `elOption.data` enables user to mount some info on
+ // `elOption.info` enables user to mount some info on
// elements and use them in event handlers.
- // Update them only when user specified, otherwise, remain.
- if (elOption.hasOwnProperty('data')) {
- el.__userData = elOption.data;
- }
if (eventData) {
- eventData.data = el.__userData;
+ eventData.info = el.info;
}
}
\ No newline at end of file
diff --git a/src/echarts.js b/src/echarts.js
index 934102e..c4ea08d 100644
--- a/src/echarts.js
+++ b/src/echarts.js
@@ -1518,7 +1518,7 @@ echartsProto._initEvents = function () {
}
else if (el && el.dataIndex != null) {
var dataModel = el.dataModel || ecModel.getSeriesByIndex(el.seriesIndex);
- params = dataModel && dataModel.getDataParams(el.dataIndex, el.dataType) || {};
+ params = dataModel && dataModel.getDataParams(el.dataIndex, el.dataType, el) || {};
}
// If element has custom eventData of components
else if (el && el.eventData) {
@@ -1705,8 +1705,10 @@ function createExtensionAPI(ecInstance) {
* + The component query object, like:
* `{seriesIndex: 2}`, `{seriesName: 'xx'}`, `{seriesId: 'some'}`,
* `{xAxisIndex: 2}`, `{xAxisName: 'xx'}`, `{xAxisId: 'some'}`.
- * + The element query object, like:
- * `{name: 'some'}` (only available in custom series).
+ * + The data query object, like:
+ * `{dataIndex: 123}`, `{dataType: 'link'}`, `{name: 'some'}`.
+ * + The other query object (cmponent customized query), like:
+ * `{element: 'some'}` (only available in custom series).
*
* Caveat: If a prop in the `query` object is `null/undefined`, it is the
* same as there is no such prop in the `query` object.
@@ -1737,7 +1739,7 @@ EventProcessor.prototype = {
var suffixes = ['Index', 'Name', 'Id'];
var dataKeys = {name: 1, dataIndex: 1, dataType: 1};
zrUtil.each(query, function (val, key) {
- var reserved;
+ var reserved = false;
for (var i = 0; i < suffixes.length; i++) {
var propSuffix = suffixes[i];
var suffixPos = key.lastIndexOf(propSuffix);
diff --git a/test/custom-feature.html b/test/custom-feature.html
index fe979db..ed6dba5 100644
--- a/test/custom-feature.html
+++ b/test/custom-feature.html
@@ -40,6 +40,8 @@ under the License.
<div id="main0"></div>
+ <div id="main2"></div>
+ <!-- <div id="main1"></div> -->
<script>
@@ -82,6 +84,7 @@ under the License.
cx: 0,
cy: 0
},
+ info: 0,
style: {
fill: 'red',
text: 'dataIndex: ' + params.dataIndex,
@@ -110,20 +113,173 @@ under the License.
var chart = testHelper.create(echarts, 'main0', {
title: [
'Eventful: ',
- '+ red shapes trigger events, but green shapes not. ',
+ '+ 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.'
+ '+ events (click, mousedown, mousemove, mouseup) are printed in console log.',
+ '+ red circle: params.info = 0, red rect: params.info = undefined'
],
option: option
});
- echarts.util.each(['click', 'mousedown', 'mousemove', 'mouseup'], function (eventName) {
- chart.on(eventName, {dataIndex: 1, target: 'innerGroup'}, function (e) {
- console.log(e.type, e);
+ 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>
+
+
+
+
</body>
</html>
\ No newline at end of file
diff --git a/test/ec-event.html b/test/ec-event.html
index 3a93ece..3cfbebb 100644
--- a/test/ec-event.html
+++ b/test/ec-event.html
@@ -288,36 +288,36 @@ under the License.
type: 'text',
left: 50,
top: 20,
- data: {
+ info: {
x: 1
},
style: {
textBackgroundColor: '#123456',
textPadding: 5,
fill: '#fff',
- text: 'click data is {x: 1}'
+ text: 'click info is {x: 1}'
}
}, {
type: 'text',
left: 50,
top: 100,
- data: 1234567,
+ info: 1234567,
style: {
textBackgroundColor: '#678901',
textPadding: 5,
fill: '#ff0',
- text: 'click data is 1234567'
+ text: 'click info is 1234567'
}
}, {
type: 'text',
left: 50,
top: 150,
- data: ['a', 'b'],
+ info: ['a', 'b'],
style: {
textBackgroundColor: '#678901',
textPadding: 5,
fill: '#ff2',
- text: 'click data is ["a", "b"]'
+ text: 'click info is ["a", "b"]'
}
}]
};
@@ -325,23 +325,23 @@ under the License.
var chart = testHelper.create(echarts, 'main5', {
option: option,
title: [
- 'user data check',
+ 'user info check',
'click text see console.log',
'then click the button, and click text see console.log'
],
button: {
- text: 'setOption to merge user data',
+ text: 'setOption to merge user info',
onclick: function () {
chart.setOption({
graphic: [{
- data: {b: 2},
+ info: {b: 2},
style: {
- text: 'click data is {b: 2}'
+ text: 'click info is {b: 2}'
}
}, {
- data: void 0,
+ info: void 0,
style: {
- text: 'click data is undefined'
+ text: 'click info is undefined'
}
}]
});
@@ -350,7 +350,7 @@ under the License.
});
chart.on('click', function (params) {
- console.log(params.data);
+ console.log(params.info);
})
});
</script>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org