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:36 UTC
[incubator-echarts] branch release updated (04c3d88 -> 55b4f10)
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a change to branch release
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
from 04c3d88 tweak: clip rect in custom series.
new d6d05bb tweak and add test.
new 8ccb69c enable graphic component event.
new 8a76ad5 add splitNumber case.
new 00dcf60 enable title trigger event.
new 55b4f10 Fix custom series event and graphic component event, enable info, and fix event filter rule.
The 5 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.eslintrc.yaml | 3 +-
src/chart/custom.js | 69 +++++++++++-------
src/component/graphic.js | 31 ++++++--
src/component/title.js | 12 ++-
src/echarts.js | 10 ++-
test/custom-feature.html | 166 ++++++++++++++++++++++++++++++++++++++++--
test/dynamic-splitNumber.html | 124 +++++++++++++++++++++++++++++++
test/ec-event.html | 150 ++++++++++++++++++++++++++++++++++++++
test/encode.html | 72 ++++++++++++++++++
test/lib/draggable.js | 9 ++-
10 files changed, 597 insertions(+), 49 deletions(-)
create mode 100644 test/dynamic-splitNumber.html
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 02/05: enable graphic component event.
Posted by su...@apache.org.
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 8ccb69cb2c923060d3a6c0dc3312ab816f5a304f
Author: sushuang <su...@gmail.com>
AuthorDate: Sun Sep 9 23:49:08 2018 +0800
enable graphic component event.
---
src/component/graphic.js | 34 +++++++++--
src/echarts.js | 2 +-
test/ec-event.html | 145 +++++++++++++++++++++++++++++++++++++++++++++++
test/lib/draggable.js | 9 ++-
4 files changed, 180 insertions(+), 10 deletions(-)
diff --git a/src/component/graphic.js b/src/component/graphic.js
index 22f014e..6402ea3 100644
--- a/src/component/graphic.js
+++ b/src/component/graphic.js
@@ -264,7 +264,7 @@ echarts.extendComponentView({
}
this._lastGraphicModel = graphicModel;
- this._updateElements(graphicModel, api);
+ this._updateElements(graphicModel);
this._relocate(graphicModel, api);
},
@@ -273,9 +273,8 @@ echarts.extendComponentView({
*
* @private
* @param {Object} graphicModel graphic model
- * @param {module:echarts/ExtensionAPI} api extension API
*/
- _updateElements: function (graphicModel, api) {
+ _updateElements: function (graphicModel) {
var elOptionsToUpdate = graphicModel.useElOptionsToUpdate();
if (!elOptionsToUpdate) {
@@ -293,9 +292,8 @@ echarts.extendComponentView({
var parentId = elOption.parentId;
var targetElParent = parentId != null ? elMap.get(parentId) : rootGroup;
- if (elOption.type === 'text') {
- var elOptionStyle = elOption.style;
-
+ var elOptionStyle = elOption.style;
+ if (elOption.type === 'text' && elOptionStyle) {
// In top/bottom mode, textVerticalAlign should not be used, which cause
// inaccurately locating.
if (elOption.hv && elOption.hv[1]) {
@@ -340,6 +338,7 @@ echarts.extendComponentView({
if (el) {
el.__ecGraphicWidth = elOption.width;
el.__ecGraphicHeight = elOption.height;
+ setEventData(el, graphicModel, elOption);
}
});
},
@@ -529,4 +528,27 @@ function setLayoutInfoToExist(existItem, newElOption) {
existItem.width == null && (existItem.width = newElOption.width = 0);
existItem.height == null && (existItem.height = newElOption.height = 0);
}
+}
+
+function setEventData(el, graphicModel, elOption) {
+ var eventData = el.eventData;
+ // Simple optimize for large amount of elements that no need event.
+ if (!el.silent && !el.ignore && !eventData) {
+ eventData = el.eventData = {
+ componentType: 'graphic',
+ graphicIndex: graphicModel.componentIndex,
+ data: el.__userData,
+ name: el.name
+ };
+ }
+
+ // `elOption.data` 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;
+ }
}
\ No newline at end of file
diff --git a/src/echarts.js b/src/echarts.js
index 0696f67..934102e 100644
--- a/src/echarts.js
+++ b/src/echarts.js
@@ -1706,7 +1706,7 @@ function createExtensionAPI(ecInstance) {
* `{seriesIndex: 2}`, `{seriesName: 'xx'}`, `{seriesId: 'some'}`,
* `{xAxisIndex: 2}`, `{xAxisName: 'xx'}`, `{xAxisId: 'some'}`.
* + The element query object, like:
- * `{targetName: 'some'}` (only available in custom series).
+ * `{name: '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.
diff --git a/test/ec-event.html b/test/ec-event.html
index 4951451..c18aecb 100644
--- a/test/ec-event.html
+++ b/test/ec-event.html
@@ -44,6 +44,8 @@ under the License.
<div id="main2"></div>
<h2><a href="./custom-feature.html">custom element event case.</a></h2>
<div id="main3"></div>
+ <div id="main4"></div>
+ <div id="main5"></div>
<script>
@@ -209,6 +211,149 @@ under the License.
+ <script>
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ option = {
+ graphic: [{
+ type: 'text',
+ left: 50,
+ top: 20,
+ style: {
+ textBackgroundColor: '#123456',
+ textPadding: 5,
+ fill: '#fff',
+ text: [
+ 'this is a text of graphic component',
+ 'my name is not "aaa", click me must NOT console.log("aaa")'
+ ].join('\n')
+ }
+ }, {
+ type: 'text',
+ name: 'aaa',
+ left: 50,
+ top: 60,
+ style: {
+ textBackgroundColor: '#654321',
+ textPadding: 5,
+ fill: '#ffffff',
+ text: [
+ 'this is a text of graphic component',
+ 'my name is "aaa", click me MUST console.log("aaa")'
+ ].join('\n')
+ }
+ }],
+ title: {
+ text: 'this is a text of title component',
+ subtext: 'this is a subtext of title component',
+ top: 100
+ }
+ };
+
+ chart = myChart = testHelper.create(echarts, 'main4', {
+ option: option,
+ title: 'click the text (graphic component), console.log the params'
+ });
+
+ chart.on('click', function (params) {
+ console.log(params);
+ })
+ chart.on('click', {name: 'aaa'}, function (params) {
+ console.log('aaa', params);
+ });
+ });
+ </script>
+
+
+
+
+
+
+ <script>
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ var option = {
+ graphic: [{
+ type: 'text',
+ left: 50,
+ top: 20,
+ data: {
+ x: 1
+ },
+ style: {
+ textBackgroundColor: '#123456',
+ textPadding: 5,
+ fill: '#fff',
+ text: 'click data is {x: 1}'
+ }
+ }, {
+ type: 'text',
+ left: 50,
+ top: 100,
+ data: 1234567,
+ style: {
+ textBackgroundColor: '#678901',
+ textPadding: 5,
+ fill: '#ff0',
+ text: 'click data is 1234567'
+ }
+ }, {
+ type: 'text',
+ left: 50,
+ top: 150,
+ data: ['a', 'b'],
+ style: {
+ textBackgroundColor: '#678901',
+ textPadding: 5,
+ fill: '#ff2',
+ text: 'click data is ["a", "b"]'
+ }
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main5', {
+ option: option,
+ title: [
+ 'user data check',
+ 'click text see console.log',
+ 'then click the button, and click text see console.log'
+ ],
+ button: {
+ text: 'setOption to merge user data',
+ onclick: function () {
+ chart.setOption({
+ graphic: [{
+ data: {b: 2},
+ style: {
+ text: 'click data is {b: 2}'
+ }
+ }, {
+ data: void 0,
+ style: {
+ text: 'click data is undefined'
+ }
+ }]
+ });
+ }
+ }
+ });
+
+ chart.on('click', function (params) {
+ console.log(params.data);
+ })
+ });
+ </script>
+
+
+
+
+
</body>
</html>
\ No newline at end of file
diff --git a/test/lib/draggable.js b/test/lib/draggable.js
index c6a228b..2eb3b78 100644
--- a/test/lib/draggable.js
+++ b/test/lib/draggable.js
@@ -39,14 +39,17 @@
* @param {boolean} [opt.lockY=false]
* @param {number} [opt.throttle=false]
* @param {boolean} [opt.addPlaceholder=false]
+ * @param {Function} [opt.onDrag]
* @return {type} description
*/
init: function (mainEl, chart, opt) {
opt = opt || {};
- var chartResize = chart ? $.proxy(chart.resize, chart) : function () {};
+ var onDrag = opt.onDrag || $.proxy(chart.resize, chart);
+
+ var onDragThrottled = chart ? onDrag : function () {};
if (opt.throttle) {
- chartResize = throttle(chartResize, opt.throttle, true, false);
+ onDragThrottled = throttle(onDragThrottled, opt.throttle, true, false);
}
var mainEl = $(mainEl);
@@ -184,7 +187,7 @@
label.text(Math.round(mainContentWidth) + ' x ' + Math.round(mainContentHeight));
- chartResize();
+ onDragThrottled();
}
}
};
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 05/05: Fix custom series event and graphic
component event, enable info, and fix event filter rule.
Posted by su...@apache.org.
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
[incubator-echarts] 04/05: enable title trigger event.
Posted by su...@apache.org.
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 00dcf609d91f37e0e86f78a0a5656ed6ac2691fa
Author: sushuang <su...@gmail.com>
AuthorDate: Sun Sep 9 23:59:21 2018 +0800
enable title trigger event.
---
src/component/graphic.js | 2 ++
src/component/title.js | 12 ++++++++++--
test/ec-event.html | 15 ++++++++++-----
3 files changed, 22 insertions(+), 7 deletions(-)
diff --git a/src/component/graphic.js b/src/component/graphic.js
index 6402ea3..7436c2d 100644
--- a/src/component/graphic.js
+++ b/src/component/graphic.js
@@ -86,6 +86,8 @@ 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
+ // in event handlers. Update them only when user specified, otherwise, remain.
// Note: elements is always behind its ancestors in this elements array.
elements: [],
diff --git a/src/component/title.js b/src/component/title.js
index 600f437..7580df1 100644
--- a/src/component/title.js
+++ b/src/component/title.js
@@ -132,9 +132,10 @@ echarts.extendComponentView({
var link = titleModel.get('link');
var sublink = titleModel.get('sublink');
+ var triggerEvent = titleModel.get('triggerEvent', true);
- textEl.silent = !link;
- subTextEl.silent = !sublink;
+ textEl.silent = !link && !triggerEvent;
+ subTextEl.silent = !sublink && !triggerEvent;
if (link) {
textEl.on('click', function () {
@@ -147,6 +148,13 @@ echarts.extendComponentView({
});
}
+ textEl.eventData = subTextEl.eventData = triggerEvent
+ ? {
+ componentType: 'title',
+ titleIndex: titleModel.componentIndex
+ }
+ : null;
+
group.add(textEl);
subText && group.add(subTextEl);
// If no subText, but add subTextEl, there will be an empty line.
diff --git a/test/ec-event.html b/test/ec-event.html
index c18aecb..3a93ece 100644
--- a/test/ec-event.html
+++ b/test/ec-event.html
@@ -246,11 +246,16 @@ under the License.
].join('\n')
}
}],
- title: {
- text: 'this is a text of title component',
- subtext: 'this is a subtext of title component',
- top: 100
- }
+ title: [{
+ text: 'this is a text of title component, triggerEvent: true',
+ subtext: 'this is a subtext of title component, triggerEvent: true',
+ triggerEvent: true,
+ top: 120
+ }, {
+ text: 'this is a text of title component, triggerEvent: default(false)',
+ subtext: 'this is a subtext of title component, triggerEvent: default(false)',
+ top: 180
+ }]
};
chart = myChart = testHelper.create(echarts, 'main4', {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 01/05: tweak and add test.
Posted by su...@apache.org.
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 d6d05bb54cd5034c22316f9ac3e2e273d98981bf
Author: sushuang <su...@gmail.com>
AuthorDate: Fri Sep 7 17:21:45 2018 +0800
tweak and add test.
---
.eslintrc.yaml | 3 +--
test/encode.html | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 73 insertions(+), 2 deletions(-)
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
index 698128c..2124f62 100644
--- a/.eslintrc.yaml
+++ b/.eslintrc.yaml
@@ -95,10 +95,9 @@ rules:
no-multi-spaces:
- 2
-
+ ignoreEOLComments: true
exceptions:
Property: true
- BinaryExpression: true
- VariableDeclarator: true
no-new-object: 2
no-spaced-func: 2
no-trailing-spaces: 2
diff --git a/test/encode.html b/test/encode.html
index 661be69..13af96d 100644
--- a/test/encode.html
+++ b/test/encode.html
@@ -50,6 +50,8 @@ under the License.
<h1>define which dim on x or y. encode: {x: 2, y: 1, label: 4}</h1>
<div class="chart" id="dimXY"></div>
+ <div class="chart" id="ignoreX"></div>
+
@@ -378,5 +380,75 @@ under the License.
+ <script>
+
+ var chart;
+ var myChart;
+ var option;
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ var option = {
+ xAxis: {},
+ yAxis: {},
+ dataZoom: [{
+ type: 'inside',
+ xAxisIndex: 0
+ }, {
+ type: 'slider',
+ xAxisIndex: 0
+ }, {
+ type: 'inside',
+ yAxisIndex: 0
+ }, {
+ type: 'slider',
+ yAxisIndex: 0
+ }],
+ series: [{
+ type: 'custom',
+ renderItem: function (params, api) {
+ var y = api.coord([0, api.value(0)])[1];
+ var x = 100;
+ return {
+ type: 'circle',
+ shape: {
+ cx: x,
+ cy: y,
+ r: 30
+ },
+ style: {
+ fill: 'blue'
+ }
+ };
+ },
+ encode: {
+ x: null,
+ y: 0
+ },
+ data: [
+ [122, null],
+ [333, null]
+ ]
+ }, {
+ type: 'scatter',
+ data: [[21, 43], [55, 66]]
+ }]
+ };
+
+ chart = myChart = testHelper.create(echarts, 'ignoreX', {
+ option: option,
+ title: [
+ 'series not controlled by xAxis but only by yAxis',
+ 'x axis can not filter blue circle, but y axis can do'
+ ],
+ info: option.series[0].encode
+ });
+ });
+
+ </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
[incubator-echarts] 03/05: add splitNumber case.
Posted by su...@apache.org.
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 8a76ad599209f12667eb27b6ef336710597c3900
Author: sushuang <su...@gmail.com>
AuthorDate: Sun Sep 9 23:49:47 2018 +0800
add splitNumber case.
---
test/dynamic-splitNumber.html | 124 ++++++++++++++++++++++++++++++++++++++++++
1 file changed, 124 insertions(+)
diff --git a/test/dynamic-splitNumber.html b/test/dynamic-splitNumber.html
new file mode 100644
index 0000000..759c6ee
--- /dev/null
+++ b/test/dynamic-splitNumber.html
@@ -0,0 +1,124 @@
+<!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>
+ <script src="lib/draggable.js"></script>
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ .test-title {
+ background: #146402;
+ color: #fff;
+ }
+ </style>
+
+
+ <div id="main0"></div>
+
+
+ <script>
+
+ var chart;
+ var myChart;
+ var option;
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ var option = {
+ xAxis: [{
+ type: 'category',
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: {
+ rotate: 45,
+ margin: 12,
+ },
+ data: ['asd','bb','cc'],
+ }],
+
+ yAxis: {
+ nameTextStyle: {
+ color: '#aaa',
+ },
+ nameGap: 35,
+ type: 'value',
+ axisTick: { show: false },
+ axisLine: { show: false }
+ },
+
+ grid: {
+ left: 40,
+ right: 10,
+ bottom: 50,
+ top: 10,
+ containLabel: true,
+ show: true,
+ borderWidth: 0,
+ },
+
+ series: [{
+ type: 'bar',
+ data: [
+ 12, 44, 53
+ ]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: 'drag and minimize y, check dynamic splitNumber',
+ option: option
+ });
+
+ draggable.init(
+ document.querySelector('#main0 .test-chart'),
+ chart,
+ {throttle: 70, onDrag: onDrag}
+ );
+
+ function onDrag() {
+ var height = chart.getHeight();
+ var splitNumber = height < 200
+ ? 2
+ : height < 300
+ ? 4
+ : null;
+ console.log(height, splitNumber);
+ chart.setOption({
+ yAxis: {splitNumber: splitNumber}
+ });
+ chart.resize();
+ }
+ });
+
+ </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