提交 f370474f 编写于 作者: L lang

Marker tooltip

上级 372600c2
...@@ -32,8 +32,9 @@ define(function (require) { ...@@ -32,8 +32,9 @@ define(function (require) {
else { else {
mlModel.mergeOption(markLineOpt, true); mlModel.mergeOption(markLineOpt, true);
} }
// Use the same series index // Use the same series index and name
mlModel.seriesIndex = seriesModel.seriesIndex; mlModel.seriesIndex = seriesModel.seriesIndex;
mlModel.name = seriesModel.name;
seriesModel.markLineModel = mlModel; seriesModel.markLineModel = mlModel;
} }
else { else {
...@@ -56,6 +57,9 @@ define(function (require) { ...@@ -56,6 +57,9 @@ define(function (require) {
//smooth: false, //smooth: false,
smoothness: 0.2, // 平滑度 smoothness: 0.2, // 平滑度
precision: 2, precision: 2,
tooltip: {
trigger: 'item'
},
effect: { effect: {
show: false, show: false,
loop: true, loop: true,
...@@ -65,11 +69,33 @@ define(function (require) { ...@@ -65,11 +69,33 @@ define(function (require) {
// shadowColor: 'rgba(255,215,0,0.8)', // shadowColor: 'rgba(255,215,0,0.8)',
// shadowBlur: lineWidth * 2 // 炫光模糊,默认等于scaleSize计算所得 // shadowBlur: lineWidth * 2 // 炫光模糊,默认等于scaleSize计算所得
}, },
// 边捆绑 label: {
bundling: { normal: {
enable: false, show: true,
// [0, 90] // 标签文本格式器,同Tooltip.formatter,不支持回调
maxTurningAngle: 45 // formatter: null,
// 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
position: 'end'
// 默认使用全局文本样式,详见TEXTSTYLE
// textStyle: null
}
},
lineStyle: {
normal: {
// 主色,线色,优先级高于borderColor和color
// color: 随borderColor,
// 优先于borderWidth
// width: 随borderWidth,
type: 'dashed'
//默认透明
// shadowColor: 'rgba(0,0,0,0)',
// shadowBlur: 0,
// shadowOffsetX: 0,
// shadowOffsetY: 0
},
emphasis: {
width: 3
}
}, },
itemStyle: { itemStyle: {
normal: { normal: {
...@@ -78,42 +104,9 @@ define(function (require) { ...@@ -78,42 +104,9 @@ define(function (require) {
// 标线symbol边框颜色,优先于color // 标线symbol边框颜色,优先于color
// borderColor: 随color, // borderColor: 随color,
// 标线symbol边框线宽,单位px,默认为2 // 标线symbol边框线宽,单位px,默认为2
borderWidth: 2, borderWidth: 2
label: {
show: true,
// 标签文本格式器,同Tooltip.formatter,不支持回调
// formatter: null,
// 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
position: 'end'
// 默认使用全局文本样式,详见TEXTSTYLE
// textStyle: null
},
lineStyle: {
// 主色,线色,优先级高于borderColor和color
// color: 随borderColor,
// 优先于borderWidth
// width: 随borderWidth,
type: 'dashed'
//默认透明
// shadowColor: 'rgba(0,0,0,0)',
// shadowBlur: 0,
// shadowOffsetX: 0,
// shadowOffsetY: 0
}
},
emphasis: {
// color: 各异
label: {
show: false
// 标签文本格式器,同Tooltip.formatter,不支持回调
// formatter: null,
// position: 'inside' // 'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
lineStyle: {
width: 3
}
} }
// emphasis: {}
} }
} }
}); });
......
define(function (require) { define(function (require) {
var SeriesModel = require('../../model/Series');
var zrUtil = require('zrender/core/util'); var zrUtil = require('zrender/core/util');
var List = require('../../data/List'); var List = require('../../data/List');
var formatUtil = require('../../util/format');
var retrieveValue = require('../../util/model').retrieveValue;
var addCommas = formatUtil.addCommas;
var encodeHTML = formatUtil.encodeHTML;
var markerHelper = require('./markerHelper'); var markerHelper = require('./markerHelper');
...@@ -35,14 +41,15 @@ define(function (require) { ...@@ -35,14 +41,15 @@ define(function (require) {
mlFrom[valueAxisKey] = mlTo[valueAxisKey] = value; mlFrom[valueAxisKey] = mlTo[valueAxisKey] = value;
item = [ item = [mlFrom, mlTo, { // Extra option for tooltip and label
mlFrom, __rawValue: value,
mlTo name: item.name
]; }];
}; }
return [ return [
markerHelper.dataTransform(data, baseAxis, valueAxis, item[0]), markerHelper.dataTransform(data, baseAxis, valueAxis, item[0]),
markerHelper.dataTransform(data, baseAxis, valueAxis, item[1]) markerHelper.dataTransform(data, baseAxis, valueAxis, item[1]),
item[2] || {}
]; ];
}; };
...@@ -51,6 +58,31 @@ define(function (require) { ...@@ -51,6 +58,31 @@ define(function (require) {
&& markerHelper.dataFilter(coordSys, dimensionInverse, item[1]); && markerHelper.dataFilter(coordSys, dimensionInverse, item[1]);
} }
var seriesModelProto = SeriesModel.prototype;
var markLineFormatMixin = {
getFormatParams: seriesModelProto.getFormatParams,
getFormattedLabel: seriesModelProto.getFormattedLabel,
formatTooltip: function (dataIndex) {
var data = this._data;
var value = data.getRawValue(dataIndex);
var formattedValue = zrUtil.isArray(value)
? zrUtil.map(value, addCommas).join(', ') : addCommas(value);
var name = data.getName(dataIndex);
return this.name + '<br />'
+ ((name ? encodeHTML(name) + ' : ' : '') + formattedValue);
},
getData: function () {
return this._data;
},
setData: function (data) {
this._data = data;
}
};
require('../../echarts').extendComponentView({ require('../../echarts').extendComponentView({
type: 'markLine', type: 'markLine',
...@@ -94,12 +126,21 @@ define(function (require) { ...@@ -94,12 +126,21 @@ define(function (require) {
} }
this.group.add(seriesMarkLine.group); this.group.add(seriesMarkLine.group);
var mlData = createList(coordSys, seriesData, mlModel) var mlData = createList(coordSys, seriesData, mlModel);
var dims = coordSys.dimensions; var dims = coordSys.dimensions;
var fromData = mlData.from; var fromData = mlData.from;
var toData = mlData.to; var toData = mlData.to;
// Line data for tooltip and formatter
var lineData = mlData.line;
lineData.getRawValue = function (idx) {
var option = this.getItemModel(idx).option;
return retrieveValue(option.__rawValue, option.value, '');
};
zrUtil.mixin(mlModel, markLineFormatMixin);
mlModel.setData(lineData);
var symbolType = mlModel.get('symbol'); var symbolType = mlModel.get('symbol');
var symbolSize = mlModel.get('symbolSize'); var symbolSize = mlModel.get('symbolSize');
if (!zrUtil.isArray(symbolType)) { if (!zrUtil.isArray(symbolType)) {
...@@ -116,6 +157,12 @@ define(function (require) { ...@@ -116,6 +157,12 @@ define(function (require) {
seriesMarkLine.update(fromData, toData); seriesMarkLine.update(fromData, toData);
// Set host model for tooltip
// FIXME
mlData.from.eachItemGraphicEl(function (el, idx) {
el.hostModel = mlModel;
});
function updateDataVisualAndLayout(data, idx, isFrom) { function updateDataVisualAndLayout(data, idx, isFrom) {
var itemModel = data.getItemModel(idx); var itemModel = data.getItemModel(idx);
...@@ -161,6 +208,8 @@ define(function (require) { ...@@ -161,6 +208,8 @@ define(function (require) {
); );
var fromData = new List(dimensionInfosMap, mlModel); var fromData = new List(dimensionInfosMap, mlModel);
var toData = new List(dimensionInfosMap, mlModel); var toData = new List(dimensionInfosMap, mlModel);
// No dimensions
var lineData = new List([], mlModel);
if (coordSys) { if (coordSys) {
var baseAxis = coordSys.getBaseAxis(); var baseAxis = coordSys.getBaseAxis();
...@@ -188,11 +237,15 @@ define(function (require) { ...@@ -188,11 +237,15 @@ define(function (require) {
toData.initData( toData.initData(
zrUtil.map(optData, function (item) { return item[1]; }) zrUtil.map(optData, function (item) { return item[1]; })
); );
lineData.initData(
zrUtil.map(optData, function (item) { return item[2]; })
);
} }
return { return {
from: fromData, from: fromData,
to: toData to: toData,
line: lineData
}; };
}; }
}); });
\ No newline at end of file
...@@ -31,8 +31,9 @@ define(function (require) { ...@@ -31,8 +31,9 @@ define(function (require) {
else { else {
mpModel.mergeOption(markPointOpt, true); mpModel.mergeOption(markPointOpt, true);
} }
// Use the same series index // Use the same series index and name
mpModel.seriesIndex = seriesModel.seriesIndex; mpModel.seriesIndex = seriesModel.seriesIndex;
mpModel.name = seriesModel.name;
seriesModel.markPointModel = mpModel; seriesModel.markPointModel = mpModel;
} }
else { else {
...@@ -50,6 +51,9 @@ define(function (require) { ...@@ -50,6 +51,9 @@ define(function (require) {
symbolSize: 50, // 标注大小 symbolSize: 50, // 标注大小
// symbolRotate: null, // 标注旋转控制 // symbolRotate: null, // 标注旋转控制
large: false, large: false,
tooltip: {
trigger: 'item'
},
effect: { effect: {
show: false, show: false,
loop: true, loop: true,
......
define(function (require) { define(function (require) {
var SeriesModel = require('../../model/Series');
var SymbolDraw = require('../../chart/helper/SymbolDraw'); var SymbolDraw = require('../../chart/helper/SymbolDraw');
var zrUtil = require('zrender/core/util'); var zrUtil = require('zrender/core/util');
var formatUtil = require('../../util/format');
var retrieveValue = require('../../util/model').retrieveValue;
var addCommas = formatUtil.addCommas;
var encodeHTML = formatUtil.encodeHTML;
var List = require('../../data/List'); var List = require('../../data/List');
var markerHelper = require('./markerHelper'); var markerHelper = require('./markerHelper');
// FIXME
var seriesModelProto = SeriesModel.prototype;
var markPointFormatMixin = {
getFormatParams: seriesModelProto.getFormatParams,
getFormattedLabel: seriesModelProto.getFormattedLabel,
formatTooltip: function (dataIndex) {
var data = this._data;
var value = data.getRawValue(dataIndex);
var formattedValue = zrUtil.isArray(value)
? zrUtil.map(value, addCommas).join(', ') : addCommas(value);
var name = data.getName(dataIndex);
return this.name + '<br />'
+ ((name ? encodeHTML(name) + ' : ' : '') + formattedValue);
},
getData: function () {
return this._data;
},
setData: function (data) {
this._data = data;
}
};
require('../../echarts').extendComponentView({ require('../../echarts').extendComponentView({
type: 'markPoint', type: 'markPoint',
...@@ -15,7 +47,7 @@ define(function (require) { ...@@ -15,7 +47,7 @@ define(function (require) {
this._symbolDrawMap = {}; this._symbolDrawMap = {};
}, },
render: function (markPointModel, ecModel) { render: function (markPointModel, ecModel, api) {
var symbolDrawMap = this._symbolDrawMap; var symbolDrawMap = this._symbolDrawMap;
for (var name in symbolDrawMap) { for (var name in symbolDrawMap) {
symbolDrawMap[name].__keep = false; symbolDrawMap[name].__keep = false;
...@@ -23,7 +55,7 @@ define(function (require) { ...@@ -23,7 +55,7 @@ define(function (require) {
ecModel.eachSeries(function (seriesModel) { ecModel.eachSeries(function (seriesModel) {
var mpModel = seriesModel.markPointModel; var mpModel = seriesModel.markPointModel;
mpModel && this._renderSeriesMP(seriesModel, mpModel); mpModel && this._renderSeriesMP(seriesModel, mpModel, api);
}, this); }, this);
for (var name in symbolDrawMap) { for (var name in symbolDrawMap) {
...@@ -34,7 +66,7 @@ define(function (require) { ...@@ -34,7 +66,7 @@ define(function (require) {
} }
}, },
_renderSeriesMP: function (seriesModel, mpModel) { _renderSeriesMP: function (seriesModel, mpModel, api) {
var coordSys = seriesModel.coordinateSystem; var coordSys = seriesModel.coordinateSystem;
var seriesName = seriesModel.name; var seriesName = seriesModel.name;
var seriesData = seriesModel.getData(); var seriesData = seriesModel.getData();
...@@ -48,6 +80,16 @@ define(function (require) { ...@@ -48,6 +80,16 @@ define(function (require) {
var mpData = createList(coordSys, seriesData, mpModel); var mpData = createList(coordSys, seriesData, mpModel);
var dims = coordSys.dimensions; var dims = coordSys.dimensions;
// Overwrite getRawValue
// FIXME
mpData.getRawValue = function (idx) {
var option = this.getItemModel(idx).option;
return retrieveValue(option.__rawValue, option.value, '');
};
// FIXME
zrUtil.mixin(mpModel, markPointFormatMixin);
mpModel.setData(mpData);
mpData.each(function (idx) { mpData.each(function (idx) {
var itemModel = mpData.getItemModel(idx); var itemModel = mpData.getItemModel(idx);
var point; var point;
...@@ -73,10 +115,17 @@ define(function (require) { ...@@ -73,10 +115,17 @@ define(function (require) {
}); });
// TODO Text are wrong // TODO Text are wrong
symbolDraw.updateData(mpData, seriesModel, true); symbolDraw.updateData(
mpData, mpModel, api, true
);
this.group.add(symbolDraw.group); this.group.add(symbolDraw.group);
// Set host model for tooltip
// FIXME
mpData.eachItemGraphicEl(function (el) {
el.hostModel = mpModel;
});
symbolDraw.__keep = true; symbolDraw.__keep = true;
} }
}); });
...@@ -119,5 +168,5 @@ define(function (require) { ...@@ -119,5 +168,5 @@ define(function (require) {
} }
return mpData; return mpData;
}; }
}); });
\ No newline at end of file
...@@ -167,18 +167,18 @@ define(function (require) { ...@@ -167,18 +167,18 @@ define(function (require) {
{ {
stroke: fromData.getItemVisual(idx, 'color') stroke: fromData.getItemVisual(idx, 'color')
}, },
itemModel.getModel('itemStyle.normal.lineStyle').getLineStyle() itemModel.getModel('lineStyle.normal').getLineStyle()
)); ));
graphic.setHoverStyle( graphic.setHoverStyle(
line, line,
itemModel.getModel('itemStyle.emphasis.lineStyle').getLineStyle() itemModel.getModel('lineStyle.emphasis').getLineStyle()
); );
}); });
this._fromData = fromData; this._fromData = fromData;
this._toData = toData; this._toData = toData;
} };
return SeriesMarkLine; return SeriesMarkLine;
}); });
\ No newline at end of file
...@@ -67,28 +67,33 @@ define(function (require) { ...@@ -67,28 +67,33 @@ define(function (require) {
// 1. If not specify the position with pixel directly // 1. If not specify the position with pixel directly
// 2. If value is not a data array. Which uses xAxis, yAxis to specify the value on each dimension // 2. If value is not a data array. Which uses xAxis, yAxis to specify the value on each dimension
if (isNaN(item.x) || isNaN(item.y) && !zrUtil.isArray(item.value)) { if (isNaN(item.x) || isNaN(item.y) && !zrUtil.isArray(item.value)) {
var valueAxisDim = valueAxis.dim;
var valueIndex = (valueAxisDim === 'angle' || valueAxisDim === 'x') ? 0 : 1;
// Clone the option // Clone the option
// Transform the properties xAxis, yAxis, radiusAxis, angleAxis, geoCoord to value // Transform the properties xAxis, yAxis, radiusAxis, angleAxis, geoCoord to value
// Competitable with 2.x
item = zrUtil.extend({}, item); item = zrUtil.extend({}, item);
// Special types, Compatible with 2.0
if (item.type && markerTypeCalculator[item.type] if (item.type && markerTypeCalculator[item.type]
&& baseAxis && valueAxis) { && baseAxis && valueAxis) {
var value = markerTypeCalculator[item.type]( var value = markerTypeCalculator[item.type](
data, baseAxis.dim, valueAxis.dim data, baseAxis.dim, valueAxisDim
); );
value.push(+item.value); if (item.value != null) {
value.push(+item.value);
}
item.value = value; item.value = value;
} }
else { else {
var originalValue = item.value;
// FIXME Only has one of xAxis and yAxis. // FIXME Only has one of xAxis and yAxis.
item.value = [ item.value = [
item.xAxis != null ? item.xAxis : item.radiusAxis, item.xAxis != null ? item.xAxis : item.radiusAxis,
item.yAxis != null ? item.yAxis : item.angleAxis, item.yAxis != null ? item.yAxis : item.angleAxis
+item.value
]; ];
if (originalValue != null) {
item.value.push(+originalValue);
}
} }
item.__rawValue = item.value[valueIndex];
} }
return item; return item;
}; };
......
...@@ -219,12 +219,14 @@ define(function (require) { ...@@ -219,12 +219,14 @@ define(function (require) {
// Always show item tooltip if mouse is on the element with dataIndex // Always show item tooltip if mouse is on the element with dataIndex
if (el && el.dataIndex != null) { if (el && el.dataIndex != null) {
// Use hostModel in element if possible
var seriesModel = ecModel.getSeriesByIndex( // Used when mouseover on a element like markPoint or edge
// In which case, the data is not main data in series.
var hostModel = el.hostModel || ecModel.getSeriesByIndex(
el.seriesIndex, true el.seriesIndex, true
); );
var dataIndex = el.dataIndex; var dataIndex = el.dataIndex;
var itemModel = seriesModel.getData().getItemModel(dataIndex); var itemModel = hostModel.getData().getItemModel(dataIndex);
// Series or single data may use item trigger when global is axis trigger // Series or single data may use item trigger when global is axis trigger
if ((itemModel.get('tooltip.trigger') || trigger) === 'axis') { if ((itemModel.get('tooltip.trigger') || trigger) === 'axis') {
this._showAxisTooltip(tooltipModel, ecModel, e); this._showAxisTooltip(tooltipModel, ecModel, e);
...@@ -232,9 +234,11 @@ define(function (require) { ...@@ -232,9 +234,11 @@ define(function (require) {
else { else {
// Reset ticket // Reset ticket
this._ticket = ''; this._ticket = '';
// Reset lastHoverData
this._lastHoverData = null;
// If either single data or series use item trigger // If either single data or series use item trigger
this._hideAxisPointer(); this._hideAxisPointer();
this._showItemTooltipContent(seriesModel, dataIndex, e); this._showItemTooltipContent(hostModel, dataIndex, e);
} }
} }
else { else {
...@@ -342,6 +346,7 @@ define(function (require) { ...@@ -342,6 +346,7 @@ define(function (require) {
var self = this; var self = this;
var axisPointerType = axisPointerModel.get('type'); var axisPointerType = axisPointerModel.get('type');
var moveAnimation = axisPointerType !== 'cross';
if (axisPointerType === 'cross') { if (axisPointerType === 'cross') {
moveGridLine('x', point, cartesian.getAxis('y').getExtent()); moveGridLine('x', point, cartesian.getAxis('y').getExtent());
...@@ -371,12 +376,13 @@ define(function (require) { ...@@ -371,12 +376,13 @@ define(function (require) {
var pointerEl = self._getPointerElement( var pointerEl = self._getPointerElement(
cartesian, axisPointerModel, axisType, targetShape cartesian, axisPointerModel, axisType, targetShape
); );
pointerEl.animateTo({ moveAnimation
shape: targetShape ? pointerEl.animateTo({
}, 200, 'cubicOut'); shape: targetShape
// pointerEl.attr({ }, 200, 'cubicOut')
// shape: targetShape : pointerEl.attr({
// }); shape: targetShape
});
} }
/** /**
...@@ -393,13 +399,13 @@ define(function (require) { ...@@ -393,13 +399,13 @@ define(function (require) {
var pointerEl = self._getPointerElement( var pointerEl = self._getPointerElement(
cartesian, axisPointerModel, axisType, targetShape cartesian, axisPointerModel, axisType, targetShape
); );
// FIXME 动画总是感觉不连贯 moveAnimation
pointerEl.animateTo({ ? pointerEl.animateTo({
shape: targetShape shape: targetShape
}, 200, 'cubicOut'); }, 200, 'cubicOut')
// pointerEl.attr({ : pointerEl.attr({
// shape: targetShape shape: targetShape
// }); });
} }
}, },
...@@ -418,6 +424,8 @@ define(function (require) { ...@@ -418,6 +424,8 @@ define(function (require) {
var angleAxis = polar.getAngleAxis(); var angleAxis = polar.getAngleAxis();
var radiusAxis = polar.getRadiusAxis(); var radiusAxis = polar.getRadiusAxis();
var moveAnimation = axisPointerType !== 'cross';
if (axisPointerType === 'cross') { if (axisPointerType === 'cross') {
movePolarLine('angle', point, radiusAxis.getExtent()); movePolarLine('angle', point, radiusAxis.getExtent());
movePolarLine('radius', point, angleAxis.getExtent()); movePolarLine('radius', point, angleAxis.getExtent());
...@@ -456,12 +464,14 @@ define(function (require) { ...@@ -456,12 +464,14 @@ define(function (require) {
var pointerEl = self._getPointerElement( var pointerEl = self._getPointerElement(
polar, axisPointerModel, axisType, targetShape polar, axisPointerModel, axisType, targetShape
); );
pointerEl.animateTo({
shape: targetShape moveAnimation
}, 200, 'cubicOut'); ? pointerEl.animateTo({
// pointerEl.attr({ shape: targetShape
// shape: targetShape }, 200, 'cubicOut')
// }); : pointerEl.attr({
shape: targetShape
});
} }
/** /**
...@@ -497,12 +507,13 @@ define(function (require) { ...@@ -497,12 +507,13 @@ define(function (require) {
var pointerEl = self._getPointerElement( var pointerEl = self._getPointerElement(
polar, axisPointerModel, axisType, targetShape polar, axisPointerModel, axisType, targetShape
); );
pointerEl.animateTo({ moveAnimation
shape: targetShape ? pointerEl.animateTo({
}, 200, 'cubicOut'); shape: targetShape
// pointerEl.attr({ }, 200, 'cubicOut')
// shape: targetShape : pointerEl.attr({
// }); shape: targetShape
});
} }
}, },
......
...@@ -43,7 +43,7 @@ define(function (require) { ...@@ -43,7 +43,7 @@ define(function (require) {
enterable: false, enterable: false,
// 提示背景颜色,默认为透明度为0.7的黑色 // 提示背景颜色,默认为透明度为0.7的黑色
backgroundColor: 'rgba(0,0,0,0.7)', backgroundColor: 'rgba(50,50,50,0.7)',
// 提示边框颜色 // 提示边框颜色
borderColor: '#333', borderColor: '#333',
......
...@@ -222,11 +222,12 @@ define(function (require) { ...@@ -222,11 +222,12 @@ define(function (require) {
); );
for (var idx = 0; idx < data.length; idx++) { for (var idx = 0; idx < data.length; idx++) {
var value = data[idx]; var value = data[idx];
// Each data item contains `value` and other option // Each data item is an option contains value or other properties
// { // {
// value: [] // value:
// itemStyle:
// } // }
if (data[idx] != null && data[idx].hasOwnProperty(valueProp)) { if (data[idx] != null && (typeof data[idx] === 'object') && !zrUtil.isArray(data[idx])) {
value = data[idx][valueProp]; value = data[idx][valueProp];
var model = new Model(data[idx], this.hostModel, this.hostModel.ecModel); var model = new Model(data[idx], this.hostModel, this.hostModel.ecModel);
...@@ -234,6 +235,9 @@ define(function (require) { ...@@ -234,6 +235,9 @@ define(function (require) {
optionModelIndices[idx] = modelIdx; optionModelIndices[idx] = modelIdx;
optionModels.push(model); optionModels.push(model);
} }
// Each data item is value
// [1, 2]
// 2
else { else {
// Reference to the undefined // Reference to the undefined
optionModelIndices[idx] = -1; optionModelIndices[idx] = -1;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册