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