Skip to content

I
incubator-echarts

missman / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 3ad80d1e 编写于 作者: P pah100
浏览文件
操作

enhance axisPointer

上级 39a47bed
隐藏空白更改
内联 并排
Showing with 387 addition and 180 deletion
src/component/axis/AxisView.js
浏览文件 @ 3ad80d1e
...@@ -20,6 +20,13 @@ define(function (require) { ...@@ -20,6 +20,13 @@ define(function (require) {
* @override * @override
*/ */
render: function (axisModel, ecModel, api, payload) { render: function (axisModel, ecModel, api, payload) {
// FIXME
// This process should proformed after coordinate systems updated
// (axis scale updated), and should be performed each time update.
// So put it here temporarily, although it is not appropriate to
// put a model-writing procedure in `view`.
axisPointerModelHelper.fixValue(axisModel);
AxisView.superApply(this, 'render', arguments); AxisView.superApply(this, 'render', arguments);
updateAxisPointer(this, axisModel, ecModel, api, payload, true); updateAxisPointer(this, axisModel, ecModel, api, payload, true);
}, },
...@@ -59,7 +66,7 @@ define(function (require) { ...@@ -59,7 +66,7 @@ define(function (require) {
if (!axisView.axisPointerClass) { if (!axisView.axisPointerClass) {
return; return;
} }
var axisPointerModel = axisPointerModelHelper.getAxisPointerModel(axisModel, ecModel); var axisPointerModel = axisPointerModelHelper.getAxisPointerModel(axisModel);
axisPointerModel axisPointerModel
? (axisView._axisPointer || (axisView._axisPointer = new axisView.axisPointerClass())) ? (axisView._axisPointer || (axisView._axisPointer = new axisView.axisPointerClass()))
.render(axisModel, axisPointerModel, api, forceRender) .render(axisModel, axisPointerModel, api, forceRender)
......
src/component/axisPointer.js
浏览文件 @ 3ad80d1e
...@@ -15,14 +15,13 @@ define(function (require) { ...@@ -15,14 +15,13 @@ define(function (require) {
&& (option.axisPointer = {}); && (option.axisPointer = {});
}); });
// This process should proformed after coordinate systems created. // This process should proformed after coordinate systems created
// So put it on processor stage // and series data processed. So put it on statistic processing stage.
echarts.registerProcessor(function (ecModel, api) { echarts.registerProcessor(echarts.PRIORITY.PROCESSOR.STATISTIC, function (ecModel, api) {
// Build axisPointerModel, mergin tooltip.axisPointer model for each axis. // Build axisPointerModel, mergin tooltip.axisPointer model for each axis.
// allAxesInfo should be updated when setOption performed. // allAxesInfo should be updated when setOption performed.
var coordSysAxesInfo = axisPointerModelHelper.collect(ecModel, api); ecModel.getComponent('axisPointer').coordSysAxesInfo
axisPointerModelHelper.initializeValue(coordSysAxesInfo); = axisPointerModelHelper.collect(ecModel, api);
ecModel.getComponent('axisPointer').coordSysAxesInfo = coordSysAxesInfo;
}); });
// Broadcast to all views. // Broadcast to all views.
...@@ -37,7 +36,8 @@ define(function (require) { ...@@ -37,7 +36,8 @@ define(function (require) {
payload, payload,
payload.dispatchAction || zrUtil.bind(api.dispatchAction, api), payload.dispatchAction || zrUtil.bind(api.dispatchAction, api),
api, api,
payload.tooltipOption payload.tooltipOption,
payload.highDownKey
); );
}); });
......
src/component/axisPointer/AxisPointerModel.js
浏览文件 @ 3ad80d1e
...@@ -19,7 +19,6 @@ define(function(require) { ...@@ -19,7 +19,6 @@ define(function(require) {
type: 'line', type: 'line',
snap: false, snap: false,
animation: 'auto',
triggerTooltip: true, triggerTooltip: true,
value: null, value: null,
...@@ -27,6 +26,7 @@ define(function(require) { ...@@ -27,6 +26,7 @@ define(function(require) {
links: [], links: [],
animation: 'auto', // Animate if snap and not to tight.
animationDurationUpdate: 200, animationDurationUpdate: 200,
lineStyle: { lineStyle: {
......
src/component/axisPointer/BaseAxisPointer.js
浏览文件 @ 3ad80d1e
...@@ -5,6 +5,7 @@ define(function(require) { ...@@ -5,6 +5,7 @@ define(function(require) {
var clazzUtil = require('../../util/clazz'); var clazzUtil = require('../../util/clazz');
var graphic = require('../../util/graphic'); var graphic = require('../../util/graphic');
var get = require('../../util/model').makeGetter(); var get = require('../../util/model').makeGetter();
var axisPointerModelHelper = require('./modelHelper');
var extend = zrUtil.extend; var extend = zrUtil.extend;
var clone = zrUtil.clone; var clone = zrUtil.clone;
...@@ -48,6 +49,12 @@ define(function(require) { ...@@ -48,6 +49,12 @@ define(function(require) {
*/ */
_lastStatus: null, _lastStatus: null,
/**
* 10px, arbitrary value.
* @protected
*/
animationThreshold: 10,
/** /**
* @implement * @implement
*/ */
...@@ -67,10 +74,17 @@ define(function(require) { ...@@ -67,10 +74,17 @@ define(function(require) {
this._lastValue = value; this._lastValue = value;
this._lastStatus = status; this._lastStatus = status;
var group = this._group;
var handle = this._handle;
if (!status || status === 'hide') { if (!status || status === 'hide') {
this.clear(api); // Do not clear here, for animation better.
group && group.hide();
handle && handle.hide();
return; return;
} }
group && group.show();
handle && handle.show();
// Otherwise status is 'show' // Otherwise status is 'show'
var elOption = {}; var elOption = {};
...@@ -83,19 +97,14 @@ define(function(require) { ...@@ -83,19 +97,14 @@ define(function(require) {
} }
this._lastGraphicKey = graphicKey; this._lastGraphicKey = graphicKey;
if (!this._group) { if (!group) {
var group = this._group = new graphic.Group(); group = this._group = new graphic.Group();
this.createEl(group, elOption, axisModel, axisPointerModel); this.createEl(group, elOption, axisModel, axisPointerModel);
api.getZr().add(group); api.getZr().add(group);
} }
else { else {
var animation = axisPointerModel.get('animation'); var moveAnimation = this.determineAnimation(axisModel, axisPointerModel);
var moveAnimation = animation === true || animation === 1 this.updateEl(group, moveAnimation, elOption, axisModel, axisPointerModel);
|| (
(animation === 'auto' || animation == null)
&& this.useAnimation(axisModel, axisPointerModel)
);
this.updateEl(this._group, moveAnimation, elOption, axisModel, axisPointerModel);
} }
this._renderHandle(value, axisModel, axisPointerModel, api); this._renderHandle(value, axisModel, axisPointerModel, api);
...@@ -118,11 +127,35 @@ define(function(require) { ...@@ -118,11 +127,35 @@ define(function(require) {
/** /**
* @protected * @protected
*/ */
useAnimation: function (enableAnimation, axisPointerModel, axisModel) { determineAnimation: function (axisModel, axisPointerModel) {
return enableAnimation; var animation = axisPointerModel.get('animation');
if (animation === 'auto' || animation == null) {
var axis = axisModel.axis;
var animationThreshold = this.animationThreshold;
if (axis.type === 'category' && axis.getBandWidth() > animationThreshold) {
return true;
}
// It is important to auto animation when snap used. Consider if there is
// a dataZoom, animation will be disabled when too many points exist, while
// it will be enabled for better visual effect when little points exist.
if (axisPointerModel.get('snap')) {
var seriesDataCount = axisPointerModelHelper.getAxisInfo(axisModel).seriesDataCount;
var axisExtent = axis.getExtent();
// Approximate band width
return Math.abs(axisExtent[0] - axisExtent[1]) / seriesDataCount > animationThreshold;
}
return false;
}
return animation === true || animation === 1;
}, },
/** /**
* add {pointer, label, graphicKey} to elOption
* @protected * @protected
*/ */
makeElOption: function (elOption, value, axisModel, axisPointerModel) { makeElOption: function (elOption, value, axisModel, axisPointerModel) {
...@@ -310,7 +343,8 @@ define(function(require) { ...@@ -310,7 +343,8 @@ define(function(require) {
y: trans.cursorPoint[1], y: trans.cursorPoint[1],
tooltipOption: { tooltipOption: {
verticalAlign: 'middle' verticalAlign: 'middle'
} },
highDownKey: 'axisPointerHandle'
}; };
var axis = axisModel.axis; var axis = axisModel.axis;
payload[axis.dim + 'AxisId'] = axisModel.id; payload[axis.dim + 'AxisId'] = axisModel.id;
...@@ -358,7 +392,7 @@ define(function(require) { ...@@ -358,7 +392,7 @@ define(function(require) {
}, },
/** /**
* @protected * @private
*/ */
clear: function (api) { clear: function (api) {
this._lastValue = null; this._lastValue = null;
...@@ -376,6 +410,13 @@ define(function(require) { ...@@ -376,6 +410,13 @@ define(function(require) {
} }
}, },
/**
* @protected
*/
doClear: function () {
// Implemented by sub-class if necessary.
},
/** /**
* @protected * @protected
* @param {Array.<number>} xy * @param {Array.<number>} xy
...@@ -396,13 +437,13 @@ define(function(require) { ...@@ -396,13 +437,13 @@ define(function(require) {
BaseAxisPointer.prototype.constructor = BaseAxisPointer; BaseAxisPointer.prototype.constructor = BaseAxisPointer;
function updateProps(axisPointerModel, moveAnimation, el, props) { function updateProps(animationModel, moveAnimation, el, props) {
// Animation optimize. // Animation optimize.
if (!propsEqual(get(el).lastProp, props)) { if (!propsEqual(get(el).lastProp, props)) {
get(el).lastProp = props; get(el).lastProp = props;
moveAnimation moveAnimation
? graphic.updateProps(el, props, axisPointerModel) ? graphic.updateProps(el, props, animationModel)
: el.attr(props); : (el.stopAnimation(), el.attr(props));
} }
} }
......
src/component/axisPointer/CartesianAxisPointer.js
浏览文件 @ 3ad80d1e
...@@ -11,15 +11,6 @@ define(function(require) { ...@@ -11,15 +11,6 @@ define(function(require) {
var CartesianAxisPointer = BaseAxisPointer.extend({ var CartesianAxisPointer = BaseAxisPointer.extend({
/**
* @override
*/
useAnimation: function (axisModel, axisPointerModel) {
var axis = axisModel.axis;
return (axis.type === 'category' && axis.getBandWidth() > 20)
|| axisPointerModel.get('snap');
},
/** /**
* @override * @override
*/ */
......
src/component/axisPointer/PolarAxisPointer.js
浏览文件 @ 3ad80d1e
...@@ -10,19 +10,16 @@ define(function(require) { ...@@ -10,19 +10,16 @@ define(function(require) {
var PolarAxisPointer = BaseAxisPointer.extend({ var PolarAxisPointer = BaseAxisPointer.extend({
/**
* @override
*/
useAnimation: function (axisModel, axisPointerModel) {
return axisModel.axis.type === 'category'
|| axisPointerModel.get('snap');
},
/** /**
* @override * @override
*/ */
makeElOption: function (elOption, value, axisModel, axisPointerModel) { makeElOption: function (elOption, value, axisModel, axisPointerModel) {
var axis = axisModel.axis; var axis = axisModel.axis;
if (axis.dim === 'angle') {
this.animationThreshold = Math.PI / 18;
}
var polar = axis.polar; var polar = axis.polar;
var otherAxis = polar.getOtherAxis(axis); var otherAxis = polar.getOtherAxis(axis);
var otherExtent = otherAxis.getExtent(); var otherExtent = otherAxis.getExtent();
...@@ -50,6 +47,7 @@ define(function(require) { ...@@ -50,6 +47,7 @@ define(function(require) {
var axis = axisModel.axis; var axis = axisModel.axis;
var coord = axis.dataToCoord(value); var coord = axis.dataToCoord(value);
var axisAngle = polar.getAngleAxis().getExtent()[0]; var axisAngle = polar.getAngleAxis().getExtent()[0];
axisAngle = axisAngle / 180 * Math.PI;
var radiusExtent = polar.getRadiusAxis().getExtent(); var radiusExtent = polar.getRadiusAxis().getExtent();
var position; var position;
var align; var align;
...@@ -57,19 +55,16 @@ define(function(require) { ...@@ -57,19 +55,16 @@ define(function(require) {
if (axis.dim === 'radius') { if (axis.dim === 'radius') {
var transform = matrix.create(); var transform = matrix.create();
matrix.rotate(transform, transform, axisAngle / 180 * Math.PI); matrix.rotate(transform, transform, axisAngle);
matrix.translate(transform, transform, [polar.cx, polar.cy]); matrix.translate(transform, transform, [polar.cx, polar.cy]);
position = graphic.applyTransform([coord, labelMargin], transform); position = graphic.applyTransform([coord, -labelMargin], transform);
// ???
// label verticalalign
var labelRotation = axisModel.getModel('axisLabel').get('rotate'); var labelRotation = axisModel.getModel('axisLabel').get('rotate');
var labelLayout = AxisBuilder.innerTextLayout( var labelLayout = AxisBuilder.innerTextLayout(
labelRotation * Math.PI / 180, axisAngle, -1 axisAngle, labelRotation * Math.PI / 180, -1
); );
align = labelLayout.align; align = labelLayout.textAlign;
verticalAlign = labelLayout.verticalAlign; verticalAlign = labelLayout.textVerticalAlign;
} }
else { // angle axis else { // angle axis
var r = radiusExtent[1]; var r = radiusExtent[1];
...@@ -102,7 +97,7 @@ define(function(require) { ...@@ -102,7 +97,7 @@ define(function(require) {
) )
} }
: { : {
type: 'Sector', type: 'Circle',
shape: { shape: {
cx: polar.cx, cx: polar.cx,
cy: polar.cy, cy: polar.cy,
......
src/component/axisPointer/SingleAxisPointer.js
浏览文件 @ 3ad80d1e
...@@ -14,15 +14,6 @@ define(function(require) { ...@@ -14,15 +14,6 @@ define(function(require) {
var SingleAxisPointer = BaseAxisPointer.extend({ var SingleAxisPointer = BaseAxisPointer.extend({
/**
* @override
*/
useAnimation: function (axisModel, axisPointerModel) {
var axis = axisModel.axis;
return (axis.type === 'category' && axis.getBandWidth() > 20)
|| axisPointerModel.get('snap');
},
/** /**
* @override * @override
*/ */
...@@ -32,10 +23,12 @@ define(function(require) { ...@@ -32,10 +23,12 @@ define(function(require) {
var rect = coordSys.getRect(); var rect = coordSys.getRect();
var otherDimIndex = 1 - getPointDimIndex(axis); var otherDimIndex = 1 - getPointDimIndex(axis);
var otherExtent = [rect[XY[otherDimIndex]], rect[XY[otherDimIndex]] + rect[WH[otherDimIndex]]]; var otherExtent = [rect[XY[otherDimIndex]], rect[XY[otherDimIndex]] + rect[WH[otherDimIndex]]];
var pixelValue = coordSys.dataToPoint(value); var pixelValue = coordSys.dataToPoint(value)[0];
var elStyle = viewHelper.buildElStyle(axisPointerModel); var elStyle = viewHelper.buildElStyle(axisPointerModel);
var pointerOption = pointerShapeBuilder[axisPointerModel.get('type')](axis, pixelValue, otherExtent, elStyle); var pointerOption = pointerShapeBuilder[axisPointerModel.get('type')](
axis, pixelValue, otherExtent, elStyle
);
pointerOption.style = elStyle; pointerOption.style = elStyle;
elOption.graphicKey = pointerOption.type; elOption.graphicKey = pointerOption.type;
......
src/component/axisPointer/axisTrigger.js
浏览文件 @ 3ad80d1e
...@@ -16,18 +16,20 @@ define(function(require) { ...@@ -16,18 +16,20 @@ define(function(require) {
* @param {Function} dispatchAction * @param {Function} dispatchAction
* @param {module:echarts/ExtensionAPI} api * @param {module:echarts/ExtensionAPI} api
* @param {Object} tooltipOption * @param {Object} tooltipOption
* @param {string} [highDownKey]
*/ */
function axisTrigger(coordSysAxesInfo, currTrigger, finder, dispatchAction, api, tooltipOption) { function axisTrigger(coordSysAxesInfo, currTrigger, finder, dispatchAction, api, tooltipOption, highDownKey) {
var point = [finder.x, finder.y]; var point = [finder.x, finder.y];
var linksNewValueMap = {};
var shouldHide = currTrigger === 'leave' || illegalPoint(point); var shouldHide = currTrigger === 'leave' || illegalPoint(point);
var tooltipInfo = {axesInfo: []}; var tooltipInfo = {axesInfo: []};
var doDispatchTooltip = curry(dispatchTooltip, point, tooltipInfo, tooltipOption); var doDispatchTooltip = curry(dispatchTooltip, point, tooltipInfo, tooltipOption);
// highDownInfo.batch array should not be initialized util it is used, because in
// dispatchHighDownActually, null highDownInfo.batch represents no high/down should // If nothing highlighted, should downplay all highlighted items.
// be performe, while empty highDownInfo.batch represents dowplay all existent high items. // This case will occur when mouse leave coordSys.
var highDownInfo = {}; var highDownInfo = {batch: []};
var doDispatchHighDown = curry(dispatchHighDown, highDownInfo); var doDispatchHighDown = curry(dispatchHighDown, highDownInfo);
var linksNewValueMap = {};
// Process for triggered axes. // Process for triggered axes.
each(coordSysAxesInfo.coordSysMap, function (coordSys, coordSysKey) { each(coordSysAxesInfo.coordSysMap, function (coordSys, coordSysKey) {
...@@ -70,7 +72,7 @@ define(function(require) { ...@@ -70,7 +72,7 @@ define(function(require) {
// Perform dispatch actions. // Perform dispatch actions.
dispatchTooltipActually(tooltipInfo, dispatchAction); dispatchTooltipActually(tooltipInfo, dispatchAction);
dispatchHighDownActually(highDownInfo, dispatchAction, api); dispatchHighDownActually(highDownInfo, dispatchAction, api, highDownKey);
} }
// return: newValue indicates whether axis triggered. // return: newValue indicates whether axis triggered.
...@@ -80,7 +82,6 @@ define(function(require) { ...@@ -80,7 +82,6 @@ define(function(require) {
) { ) {
axisInfo.processed = true; axisInfo.processed = true;
var axis = axisInfo.axis; var axis = axisInfo.axis;
var seriesModels = axisInfo.seriesModels;
var alwaysShow = axisInfo.alwaysShow; var alwaysShow = axisInfo.alwaysShow;
var axisPointerModel = axisInfo.axisPointerModel; var axisPointerModel = axisInfo.axisPointerModel;
var axisPointerOption = axisPointerModel.option; var axisPointerOption = axisPointerModel.option;
...@@ -110,7 +111,7 @@ define(function(require) { ...@@ -110,7 +111,7 @@ define(function(require) {
} }
// Heavy calculation. So put it after axis.containData checking. // Heavy calculation. So put it after axis.containData checking.
var payloadInfo = buildPayloadsByNearest(newValue, axisInfo, seriesModels); var payloadInfo = buildPayloadsBySeries(newValue, axisInfo);
var payloadBatch = payloadInfo.payloadBatch; var payloadBatch = payloadInfo.payloadBatch;
if (!dontSnap && axisInfo.snap) { if (!dontSnap && axisInfo.snap) {
...@@ -135,7 +136,7 @@ define(function(require) { ...@@ -135,7 +136,7 @@ define(function(require) {
} }
} }
function buildPayloadsByNearest(value, axisInfo, seriesModels) { function buildPayloadsBySeries(value, axisInfo) {
var axis = axisInfo.axis; var axis = axisInfo.axis;
var dim = axis.dim; var dim = axis.dim;
// Compatibale with legend action payload definition, remain them. // Compatibale with legend action payload definition, remain them.
...@@ -145,16 +146,14 @@ define(function(require) { ...@@ -145,16 +146,14 @@ define(function(require) {
var sampleDataIndex; var sampleDataIndex;
var minDist = Infinity; var minDist = Infinity;
var snapToValue = value; var snapToValue = value;
var payloadBatch = []; var payloadBatch = [];
each(seriesModels, function (series, idx) { each(axisInfo.seriesModels, function (series, idx) {
var dataDim = series.coordDimToDataDim(dim);
var dataIndex = series.getAxisTooltipDataIndex var dataIndex = series.getAxisTooltipDataIndex
? series.getAxisTooltipDataIndex( ? series.getAxisTooltipDataIndex(dataDim, value, axis)
series.coordDimToDataDim(dim), value, axis
)
: series.getData().indexOfNearest( : series.getData().indexOfNearest(
series.coordDimToDataDim(dim)[0], dataDim[0],
value, value,
// Add a threshold to avoid find the wrong dataIndex // Add a threshold to avoid find the wrong dataIndex
// when data length is not same. // when data length is not same.
...@@ -248,22 +247,23 @@ define(function(require) { ...@@ -248,22 +247,23 @@ define(function(require) {
} }
function dispatchHighDown(highDownInfo, actionType, batch) { function dispatchHighDown(highDownInfo, actionType, batch) {
highDownInfo.batch = (highDownInfo.batch || []).concat(batch); highDownInfo.batch = highDownInfo.batch.concat(batch);
} }
function dispatchHighDownActually(highDownInfo, dispatchAction, api) { function dispatchHighDownActually(highDownInfo, dispatchAction, api, highDownKey) {
if (!highDownInfo.batch) {
return;
}
// FIXME // FIXME
// (1) highlight status shoule be managemented in series.getData()? // (1) highlight status shoule be managemented in series.getData()?
// (2) If axisPointer A triggerOn 'handle' and axisPointer B triggerOn // (2) If axisPointer A triggerOn 'handle' and axisPointer B triggerOn
// 'mousemove', items highlighted by A will be downplayed by B. // 'mousemove', items highlighted by A will be downplayed by B.
// It will not be fixed until someone requires this scenario. // It will not be fixed until someone requires this scenario.
// Consider items area hightlighted by 'handle', and globalListener may
// downplay all items (including just highlighted ones) when mousemove.
// So we use a highDownKey to separate them as a temporary solution.
var zr = api.getZr(); var zr = api.getZr();
var lastHighlights = get(zr).lastHighlights || {list: [], map: {}}; highDownKey = 'lastHighlights' + (highDownKey || '');
var newHighlights = get(zr).lastHighlights = {list: [], map: {}}; var lastHighlights = get(zr)[highDownKey] || {list: [], map: {}};
var newHighlights = get(zr)[highDownKey] = {list: [], map: {}};
zrUtil.each(highDownInfo.batch, function (batchItem) { zrUtil.each(highDownInfo.batch, function (batchItem) {
// FIXME vulnerable code // FIXME vulnerable code
......
src/component/axisPointer/modelHelper.js
浏览文件 @ 3ad80d1e
...@@ -7,6 +7,8 @@ define(function(require) { ...@@ -7,6 +7,8 @@ define(function(require) {
var helper = {}; var helper = {};
// Build axisPointerModel, mergin tooltip.axisPointer model for each axis.
// allAxesInfo should be updated when setOption performed.
helper.collect = function (ecModel, api) { helper.collect = function (ecModel, api) {
var result = { var result = {
/** /**
...@@ -18,7 +20,8 @@ define(function(require) { ...@@ -18,7 +20,8 @@ define(function(require) {
* triggerTooltip, * triggerTooltip,
* involveSeries, * involveSeries,
* snap, * snap,
* seriesModels * seriesModels,
* seriesDataCount
* } * }
*/ */
axesInfo: {}, axesInfo: {},
...@@ -193,6 +196,8 @@ define(function(require) { ...@@ -193,6 +196,8 @@ define(function(require) {
var axis = axisInfo.axis; var axis = axisInfo.axis;
if (coordSys.getAxis(axis.dim) === axis) { if (coordSys.getAxis(axis.dim) === axis) {
axisInfo.seriesModels.push(seriesModel); axisInfo.seriesModels.push(seriesModel);
axisInfo.seriesDataCount == null && (axisInfo.seriesDataCount = 0);
axisInfo.seriesDataCount += seriesModel.getData().count();
} }
}); });
...@@ -233,30 +238,55 @@ define(function(require) { ...@@ -233,30 +238,55 @@ define(function(require) {
|| linkPropValue === axisPropValue; || linkPropValue === axisPropValue;
} }
// If handle used, axisPointer will always be displayed, so value helper.fixValue = function (axisModel) {
// and status should be initialized. var axisInfo = helper.getAxisInfo(axisModel);
helper.initializeValue = function (coordSysAxesInfo) { if (!axisInfo) {
each(coordSysAxesInfo.axesInfo, function (axisInfo) { return;
var axisPointerModel = axisInfo.axisPointerModel; }
var status = axisPointerModel.get('status');
var value = axisPointerModel.get('value'); var axisPointerModel = axisInfo.axisPointerModel;
var option = axisPointerModel.option; var scale = axisInfo.axis.scale;
var option = axisPointerModel.option;
if (status == null) { var status = axisPointerModel.get('status');
option.status = isHandleTrigger(axisPointerModel) ? 'show' : 'hide'; var value = axisPointerModel.get('value');
}
// Pick a value on axis. // Parse init value for category and time axis.
if (value == null) { if (value != null) {
value = axisInfo.axis.getExtent()[0]; value = scale.parse(value);
} }
// Parse init value for category and time axis.
option.value = axisInfo.axis.scale.parse(value); // If `handle` used, `axisPointer` will always be displayed, so value
}); // and status should be initialized.
if (status == null) {
option.status = isHandleTrigger(axisPointerModel) ? 'show' : 'hide';
}
var extent = scale.getExtent().slice();
extent[0] > extent[1] && extent.reverse();
if (// Pick a value on axis when initializing.
value == null
// If both `handle` and `dataZoom` are used, value may be out of axis extent,
// where we should re-pick a value to keep `handle` displaying normally.
|| value > extent[1]
) {
// Make handle displayed on the end of the axis when init, which looks better.
value = extent[1];
}
if (value < extent[0]) {
value = extent[0];
}
option.value = value;
};
helper.getAxisInfo = function (axisModel) {
var coordSysAxesInfo = axisModel.ecModel.getComponent('axisPointer').coordSysAxesInfo;
return coordSysAxesInfo && coordSysAxesInfo.axesInfo[makeKey(axisModel)];
}; };
helper.getAxisPointerModel = function (axisModel, ecModel) { helper.getAxisPointerModel = function (axisModel) {
var coordSysAxesInfo = ecModel.getComponent('axisPointer').coordSysAxesInfo; var axisInfo = helper.getAxisInfo(axisModel);
var axisInfo = coordSysAxesInfo && coordSysAxesInfo.axesInfo[makeKey(axisModel)];
return axisInfo && axisInfo.axisPointerModel; return axisInfo && axisInfo.axisPointerModel;
}; };
......
src/coord/single/AxisModel.js
浏览文件 @ 3ad80d1e
...@@ -50,6 +50,13 @@ define(function (require) { ...@@ -50,6 +50,13 @@ define(function (require) {
} }
}, },
// Single coordinate system and single axis is the,
// which is used as the parent tooltip model.
// same model, so we set default tooltip show as true.
tooltip: {
show: true
},
axisTick: { axisTick: {
show: true, show: true,
length: 6, length: 6,
......
test/singleAxisScales.html
浏览文件 @ 3ad80d1e
...@@ -91,14 +91,23 @@ ...@@ -91,14 +91,23 @@
height: height height: height
}, { }, {
type: 'category', type: 'category',
id: 'b', id: 'b',
data: xAxisData, data: xAxisData,
height: height, height: height,
axisPointer: {
type: 'shadow'
},
top: '27%' top: '27%'
}, { }, {
type: 'log', type: 'log',
id: 'c', id: 'c',
height: height, height: height,
axisPointer: {
snap: false,
label: {
show: true
}
},
top: '55%' top: '55%'
}, { }, {
type: 'time', type: 'time',
......
test/tooltip-axisPointer.html
浏览文件 @ 3ad80d1e
...@@ -24,9 +24,13 @@ ...@@ -24,9 +24,13 @@
</style> </style>
<h1>time axis default | data zoom | animation auto: zoom in has animation, zoom out no animation</h1>
<div class="chart" id="time-animation"></div>
<h1>category axis default | data zoom | animation auto: zoom in has animation, zoom out no animation</h1>
<div class="chart" id="category-animation"></div>
<h1>time axis cross | x snap | label show | tooltip show</h1> <h1>time axis cross | x snap | label show | tooltip show</h1>
<div class="chart" id="time-cross"></div> <div class="chart" id="time-cross"></div>
<h1>two value axes | snap | grid.tooltip setting </h1> <h1>two value axes | snap | grid.tooltip setting | snap has animation </h1>
<div class="chart" id="two-value-axes"></div> <div class="chart" id="two-value-axes"></div>
<h1>label style</h1> <h1>label style</h1>
<div class="chart" id="label-style"></div> <div class="chart" id="label-style"></div>
...@@ -43,6 +47,7 @@ ...@@ -43,6 +47,7 @@
<h1>no tooltip</h1> <h1>no tooltip</h1>
<div class="chart" id="no-tooltip"></div> <div class="chart" id="no-tooltip"></div>
label 位置 when inverse.
link link
log轴 log轴
时间轴 时间轴
...@@ -58,6 +63,101 @@ absorb ...@@ -58,6 +63,101 @@ absorb
<script>
require([
'echarts',
'echarts/chart/scatter',
'echarts/chart/line',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip',
'echarts/component/dataZoom',
'zrender/vml/vml'
], function (echarts) {
var option = {
tooltip: {
trigger: 'axis'
},
dataZoom: [{
type: 'inside'
}, {
type: 'slider'
}]
};
var baseTop = 90;
var height = 250;
var gap = 30;
makeTimeGrid(option, {
grid: {left: 100, top: baseTop, height: height}
});
baseTop += height + gap;
createChart('time-animation', echarts, option, baseTop + 40);
})
</script>
<script>
require([
'echarts',
'echarts/chart/scatter',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip',
'echarts/component/dataZoom',
'zrender/vml/vml'
], function (echarts) {
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
dataZoom: [{
type: 'inside',
start: 40,
end: 60
}, {
type: 'slider',
start: 40,
end: 60
}]
};
var baseTop = 90;
var height = 250;
var gap = 30;
makeCategoryGrid(option, {
grid: {left: 100, top: baseTop, height: height}
}, false, 100, 'bar');
baseTop += height + gap;
createChart('category-animation', echarts, option, baseTop + 40);
})
</script>
<script> <script>
require([ require([
...@@ -529,16 +629,41 @@ absorb ...@@ -529,16 +629,41 @@ absorb
var height = 250; var height = 250;
var gap = 50; var gap = 50;
makeCategoryPolar(option, { makeCategoryPolar(option, {
polar: {top: baseTop, height: height} polar: {
// yAxis: { center: ['25%', baseTop + height / 2],
// axisPointer: { radius: 120
// show: true, }
// triggerTooltip: false, }, true);
// animation: true makeCategoryPolar(option, {
// } polar: {
// } center: ['75%', baseTop + height / 2],
radius: 120
},
angleAxis: {
axisPointer: {
type: 'shadow'
}
}
}, true); }, true);
baseTop += height + gap; baseTop += height + gap;
makeCategoryPolar(option, {
polar: {
center: ['25%', baseTop + height / 2],
radius: 120
}
});
makeCategoryPolar(option, {
polar: {
center: ['75%', baseTop + height / 2],
radius: 120
},
radiusAxis: {
axisPointer: {
type: 'shadow'
}
}
});
baseTop += height + gap;
createChart('polar-category', echarts, option, baseTop); createChart('polar-category', echarts, option, baseTop);
}) })
......
test/tooltip-touch.html
浏览文件 @ 3ad80d1e
...@@ -24,12 +24,17 @@ ...@@ -24,12 +24,17 @@
</style> </style>
<h1>handle | time axis | x snap | init value: '2017-04-12' | tooltip not show | inside data zoom | animation auto</h1>
<div class="chart" id="handle-time-init"></div>
<h1>handle | category | check resize | should trigger hightlight</h1> <h1>handle | category | check resize | should trigger hightlight</h1>
<div class="chart" id="handle-category"></div> <div class="chart" id="handle-category"></div>
<h1>handle | value axis | x snap, y not-snap | has init handle value | tooltip.alwaysShowContent</h1> <h1>handle | value axis | x snap, y not-snap | has init handle value | tooltip.alwaysShowContent</h1>
<div class="chart" id="handle-value-init"></div> <div class="chart" id="handle-value-init"></div>
<h1>handle | time axis | x snap | init value: '2017-04-12' | tooltip not show | inside data zoom</h1>
<div class="chart" id="handle-time-init"></div>
...@@ -39,45 +44,42 @@ ...@@ -39,45 +44,42 @@
require([ require([
'echarts', 'echarts',
'echarts/chart/scatter',
'echarts/chart/line', 'echarts/chart/line',
'echarts/component/legend', 'echarts/component/legend',
'echarts/component/grid', 'echarts/component/grid',
'echarts/component/tooltip', 'echarts/component/tooltip',
'echarts/component/dataZoom',
'zrender/vml/vml' 'zrender/vml/vml'
], function (echarts) { ], function (echarts) {
var option = { var option = {
tooltip: { dataZoom: {
triggerOn: 'none' type: 'inside',
start: 20,
end: 50
} }
}; };
var baseTop = 90; var baseTop = 90;
var height = 150; var height = 250;
var gap = 100; var gap = 50;
makeCategoryGrid(option, { makeTimeGrid(option, {
grid: {top: baseTop, height: height}, grid: {left: 100, top: baseTop, height: height},
xAxis: {
axisPointer: {
triggerOn: 'handle'
}
},
yAxis: {name: 'no init handle value'}
});
baseTop += height + gap;
makeCategoryGrid(option, {
grid: {top: baseTop, height: height},
xAxis: { xAxis: {
axisPointer: { axisPointer: {
triggerOn: 'handle', triggerOn: 'handle',
value: 'category3' snap: true,
handle: {
margin: 60
},
value: '2017-04-12' // init value
} }
}, }
yAxis: {name: 'init handle value: "category3"'}
}); });
baseTop += height + gap; baseTop += height + gap;
createChart('handle-category', echarts, option, baseTop + 100); createChart('handle-time-init', echarts, option, baseTop + 100);
}); })
</script> </script>
...@@ -93,7 +95,7 @@ ...@@ -93,7 +95,7 @@
require([ require([
'echarts', 'echarts',
'echarts/chart/scatter', 'echarts/chart/line',
'echarts/component/legend', 'echarts/component/legend',
'echarts/component/grid', 'echarts/component/grid',
'echarts/component/tooltip', 'echarts/component/tooltip',
...@@ -102,34 +104,36 @@ ...@@ -102,34 +104,36 @@
var option = { var option = {
tooltip: { tooltip: {
alwaysShowContent: true triggerOn: 'none'
} }
}; };
var baseTop = 90; var baseTop = 90;
var height = 150; var height = 150;
var gap = 50; var gap = 100;
makeValueGrid(option, { makeCategoryGrid(option, {
grid: {left: 100, top: baseTop, height: height}, grid: {top: baseTop, height: height},
xAxis: { xAxis: {
axisPointer: { axisPointer: {
triggerOn: 'handle', triggerOn: 'handle'
snap: true,
value: 600 // init value
} }
}, },
yAxis: { yAxis: {name: 'no init handle value'}
});
baseTop += height + gap;
makeCategoryGrid(option, {
grid: {top: baseTop, height: height},
xAxis: {
axisPointer: { axisPointer: {
triggerOn: 'handle', triggerOn: 'handle',
handle: { value: 'category3'
margin: 70
}
} }
} },
yAxis: {name: 'init handle value: "category3"'}
}); });
baseTop += height + gap; baseTop += height + gap;
createChart('handle-value-init', echarts, option, baseTop + 100); createChart('handle-category', echarts, option, baseTop + 100);
}) });
</script> </script>
...@@ -141,47 +145,46 @@ ...@@ -141,47 +145,46 @@
<script> <script>
require([ require([
'echarts', 'echarts',
'echarts/chart/scatter', 'echarts/chart/scatter',
'echarts/chart/line',
'echarts/component/legend', 'echarts/component/legend',
'echarts/component/grid', 'echarts/component/grid',
'echarts/component/tooltip', 'echarts/component/tooltip',
'echarts/component/dataZoom',
'zrender/vml/vml' 'zrender/vml/vml'
], function (echarts) { ], function (echarts) {
var option = { var option = {
dataZoom: { tooltip: {
type: 'inside', alwaysShowContent: true
start: 20,
end: 50
} }
}; };
var baseTop = 90; var baseTop = 90;
var height = 250; var height = 150;
var gap = 50; var gap = 50;
makeTimeGrid(option, { makeValueGrid(option, {
grid: {left: 100, top: baseTop, height: height}, grid: {left: 100, top: baseTop, height: height},
xAxis: { xAxis: {
axisPointer: { axisPointer: {
triggerOn: 'handle', triggerOn: 'handle',
animation: false,
snap: true, snap: true,
value: 600 // init value
}
},
yAxis: {
axisPointer: {
triggerOn: 'handle',
handle: { handle: {
margin: 60 margin: 70
}, }
value: '2017-04-12' // init value
} }
} }
}); });
baseTop += height + gap; baseTop += height + gap;
createChart('handle-time-init', echarts, option, baseTop + 100); createChart('handle-value-init', echarts, option, baseTop + 100);
}) })
</script> </script>
...@@ -192,5 +195,7 @@ ...@@ -192,5 +195,7 @@
</body> </body>
</html> </html>
\ No newline at end of file
test/tooltip.html
浏览文件 @ 3ad80d1e
...@@ -38,7 +38,9 @@ ...@@ -38,7 +38,9 @@
<h1>main</h1> <h1>main</h1>
<div class="chart" id="main"></div> <div class="chart" id="main"></div>
snap on empty value
blank axis.
legend tooltip axisname tooltip
tooltip 动态回调 tooltip 动态回调
tooltip 固定位置 tooltip 固定位置
tooltip enterable tooltip enterable
......
test/tooltipTestHelper.js
浏览文件 @ 3ad80d1e
...@@ -27,13 +27,14 @@ function extend(target, source) { ...@@ -27,13 +27,14 @@ function extend(target, source) {
return target; return target;
} }
function makeCategoryData(scale, catePrefix) { function makeCategoryData(scale, catePrefix, dataCount) {
var categoryData = []; var categoryData = [];
var data1 = []; var data1 = [];
var data2 = []; var data2 = [];
var data3 = []; var data3 = [];
scale = scale || 1; scale = scale || 1;
catePrefix = catePrefix || 'category'; catePrefix = catePrefix || 'category';
dataCount = dataCount || 10;
categoryData.push(catePrefix + -1); categoryData.push(catePrefix + -1);
data1.push('-'); data1.push('-');
...@@ -52,7 +53,7 @@ function makeCategoryData(scale, catePrefix) { ...@@ -52,7 +53,7 @@ function makeCategoryData(scale, catePrefix) {
data2.push('-'); data2.push('-');
data3.push('-'); data3.push('-');
for (; i < 10; i++) { for (; i < dataCount - 1; i++) {
categoryData.push(catePrefix + i); categoryData.push(catePrefix + i);
data1.push(((-Math.random() - 0.2) * scale).toFixed(3)); data1.push(((-Math.random() - 0.2) * scale).toFixed(3));
data2.push(((Math.random() + 0.3) * scale).toFixed(3)); data2.push(((Math.random() + 0.3) * scale).toFixed(3));
...@@ -205,9 +206,10 @@ function makeCategoryPolar(option, patterns, inV) { ...@@ -205,9 +206,10 @@ function makeCategoryPolar(option, patterns, inV) {
); );
} }
function makeCategoryGrid(option, patterns, inV) { function makeCategoryGrid(option, patterns, inV, dataCount, seriesType) {
var data = makeCategoryData(); var data = makeCategoryData(null, null, dataCount);
var key = Math.random().toFixed(5); var key = Math.random().toFixed(5);
seriesType = seriesType || 'line';
option.legend = option.legend || { option.legend = option.legend || {
tooltip: {show: true} tooltip: {show: true}
...@@ -246,7 +248,7 @@ function makeCategoryGrid(option, patterns, inV) { ...@@ -246,7 +248,7 @@ function makeCategoryGrid(option, patterns, inV) {
name: 'line1' + key, name: 'line1' + key,
xAxisId: 'xAxis' + key, xAxisId: 'xAxis' + key,
yAxisId: 'yAxis' + key, yAxisId: 'yAxis' + key,
type: 'line', type: seriesType,
symbolSize: 10, symbolSize: 10,
data: data.data1, data: data.data1,
smooth: true, smooth: true,
...@@ -257,7 +259,7 @@ function makeCategoryGrid(option, patterns, inV) { ...@@ -257,7 +259,7 @@ function makeCategoryGrid(option, patterns, inV) {
name: 'line2' + key, name: 'line2' + key,
xAxisId: 'xAxis' + key, xAxisId: 'xAxis' + key,
yAxisId: 'yAxis' + key, yAxisId: 'yAxis' + key,
type: 'line', type: seriesType,
symbolSize: 10, symbolSize: 10,
data: data.data2, data: data.data2,
connectNulls: true, connectNulls: true,
...@@ -268,7 +270,7 @@ function makeCategoryGrid(option, patterns, inV) { ...@@ -268,7 +270,7 @@ function makeCategoryGrid(option, patterns, inV) {
name: 'line3' + key, name: 'line3' + key,
xAxisId: 'xAxis' + key, xAxisId: 'xAxis' + key,
yAxisId: 'yAxis' + key, yAxisId: 'yAxis' + key,
type: 'line', type: seriesType,
symbolSize: 10, symbolSize: 10,
symbol: 'circle', symbol: 'circle',
data: data.data3, data: data.data3,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或