提交 5d5de701 编写于 作者: K kener

【重要】动态addMarkX支持

上级 a66a772d
......@@ -45,6 +45,7 @@ define(function (require) {
_buildShape : function () {
var series = this.series;
this.selectedMap = {};
this.xMarkMap = {};
// series默认颜色索引,seriesIndex索引到color
this._sIndex2colorMap = {};
......@@ -81,7 +82,7 @@ define(function (require) {
for (var position in _position2sIndexMap) {
if (_position2sIndexMap[position].length > 0) {
this._buildSinglePosition(
position, _position2sIndexMap[position]
position, _position2sIndexMap[position], this.xMarkMap
);
}
}
......@@ -94,7 +95,7 @@ define(function (require) {
*
* @param {number} seriesIndex 系列索引
*/
_buildSinglePosition : function (position, seriesArray) {
_buildSinglePosition : function (position, seriesArray, xMarkMap) {
var mapData = this._mapData(seriesArray);
var locationMap = mapData.locationMap;
var maxDataLength = mapData.maxDataLength;
......@@ -106,11 +107,11 @@ define(function (require) {
switch (position) {
case 'bottom' :
case 'top' :
this._buildHorizontal(maxDataLength, locationMap, seriesArray);
this._buildHorizontal(maxDataLength, locationMap, seriesArray, xMarkMap);
break;
case 'left' :
case 'right' :
this._buildVertical(maxDataLength, locationMap, seriesArray);
this._buildVertical(maxDataLength, locationMap, seriesArray, xMarkMap);
break;
}
},
......@@ -206,7 +207,7 @@ define(function (require) {
/**
* 构建类目轴为水平方向的柱形图系列
*/
_buildHorizontal : function (maxDataLength, locationMap, seriesArray) {
_buildHorizontal : function (maxDataLength, locationMap, seriesArray, xMarkMap) {
var series = this.series;
// 确定类目轴和数值轴,同一方向随便找一个即可
var seriesIndex = locationMap[0][0];
......@@ -225,7 +226,6 @@ define(function (require) {
var barHeight;
var interval = size.interval;
var xMarkMap = {}; // 为标注记录一些参数
var x;
var y;
var lastYP; // 正向堆积处理
......@@ -403,16 +403,17 @@ define(function (require) {
[this.component.grid.getX(), xMarkMap[seriesIndex].maxY],
[this.component.grid.getXend(), xMarkMap[seriesIndex].maxY]
];
xMarkMap[seriesIndex].isHorizontal = true;
this.buildMark(seriesIndex);
}
}
this._buildMark(seriesArray, xMarkMap, true);
},
/**
* 构建类目轴为垂直方向的柱形图系列
*/
_buildVertical : function (maxDataLength, locationMap, seriesArray) {
_buildVertical : function (maxDataLength, locationMap, seriesArray, xMarkMap) {
var series = this.series;
// 确定类目轴和数值轴,同一方向随便找一个即可
var seriesIndex = locationMap[0][0];
......@@ -431,7 +432,6 @@ define(function (require) {
var barHeight;
var interval = size.interval;
var xMarkMap = {}; // 为标注记录一个横向偏移
var x;
var y;
var lastXP; // 正向堆积处理
......@@ -611,10 +611,11 @@ define(function (require) {
[xMarkMap[seriesIndex].maxX, this.component.grid.getYend()],
[xMarkMap[seriesIndex].maxX, this.component.grid.getY()]
];
xMarkMap[seriesIndex].isHorizontal = false;
this.buildMark(seriesIndex);
}
}
this._buildMark(seriesArray, xMarkMap, false);
},
/**
......@@ -896,24 +897,10 @@ define(function (require) {
return barShape;
},
// 添加标注
_buildMark : function (seriesArray, xMarkMap ,isHorizontal) {
var series = this.series;
for (var i = 0, l = seriesArray.length; i < l; i++) {
this.buildMark(
series[seriesArray[i]],
seriesArray[i],
this.component,
{
isHorizontal : isHorizontal,
xMarkMap : xMarkMap
}
);
}
},
// 位置转换
getMarkCoord : function (serie, seriesIndex, mpData, markCoordParams) {
getMarkCoord : function (seriesIndex, mpData) {
var serie = this.series[seriesIndex];
var xMarkMap = this.xMarkMap[seriesIndex];
var xAxis = this.component.xAxis.getAxis(serie.xAxisIndex);
var yAxis = this.component.yAxis.getAxis(serie.yAxisIndex);
var dataIndex;
......@@ -923,19 +910,19 @@ define(function (require) {
) {
// 特殊值内置支持
pos = [
markCoordParams.xMarkMap[seriesIndex][mpData.type + 'X'],
markCoordParams.xMarkMap[seriesIndex][mpData.type + 'Y'],
markCoordParams.xMarkMap[seriesIndex][mpData.type + 'Line'],
markCoordParams.xMarkMap[seriesIndex][mpData.type]
xMarkMap[mpData.type + 'X'],
xMarkMap[mpData.type + 'Y'],
xMarkMap[mpData.type + 'Line'],
xMarkMap[mpData.type]
];
}
else if (markCoordParams.isHorizontal) {
else if (xMarkMap.isHorizontal) {
// 横向
dataIndex = typeof mpData.xAxis == 'string' && xAxis.getIndexByName
? xAxis.getIndexByName(mpData.xAxis)
: (mpData.xAxis || 0);
var x = markCoordParams.xMarkMap[seriesIndex][dataIndex];
var x = xMarkMap[dataIndex];
x = typeof x != 'undefined'
? x
: typeof mpData.xAxis != 'string' && xAxis.getCoordByIndex
......@@ -950,7 +937,7 @@ define(function (require) {
? yAxis.getIndexByName(mpData.yAxis)
: (mpData.yAxis || 0);
var y = markCoordParams.xMarkMap[seriesIndex][dataIndex];
var y = xMarkMap[dataIndex];
y = typeof y != 'undefined'
? y
: typeof mpData.yAxis != 'string' && yAxis.getCoordByIndex
......
......@@ -264,27 +264,24 @@ define(function (require) {
}
},
buildMark : function (serie, seriesIndex, component, markCoordParams, attachStyle) {
buildMark : function (seriesIndex) {
var serie = this.series[seriesIndex];
if (this.selectedMap[serie.name]) {
serie.markPoint && this._buildMarkPoint(
serie, seriesIndex, component, markCoordParams, attachStyle
);
serie.markLine && this._buildMarkLine(
serie, seriesIndex, component, markCoordParams, attachStyle
);
serie.markPoint && this._buildMarkPoint(seriesIndex);
serie.markLine && this._buildMarkLine(seriesIndex);
}
},
_buildMarkPoint : function (serie, seriesIndex, component, markCoordParams, attachStyle) {
_buildMarkPoint : function (seriesIndex) {
var attachStyle = (this.markAttachStyle || {})[seriesIndex];
var serie = this.series[seriesIndex];
var _zlevelBase = this.getZlevelBase();
var mpData;
var pos;
var markPoint = zrUtil.clone(serie.markPoint);
for (var i = 0, l = markPoint.data.length; i < l; i++) {
mpData = markPoint.data[i];
pos = this.getMarkCoord(
serie, seriesIndex, mpData, markCoordParams
);
pos = this.getMarkCoord(seriesIndex, mpData);
markPoint.data[i].x = typeof mpData.x != 'undefined'
? mpData.x : pos[0];
markPoint.data[i].y = typeof mpData.y != 'undefined'
......@@ -300,7 +297,7 @@ define(function (require) {
}
}
var shapeList = this._markPoint(serie, seriesIndex, markPoint, component);
var shapeList = this._markPoint(seriesIndex, markPoint);
for (var i = 0, l = shapeList.length; i < l; i++) {
shapeList[i].zlevel = _zlevelBase + 1;
......@@ -326,7 +323,9 @@ define(function (require) {
}
},
_buildMarkLine : function (serie, seriesIndex, component, markCoordParams, attachStyle) {
_buildMarkLine : function (seriesIndex) {
var attachStyle = (this.markAttachStyle || {})[seriesIndex];
var serie = this.series[seriesIndex];
var _zlevelBase = this.getZlevelBase();
var mlData;
var pos;
......@@ -337,7 +336,7 @@ define(function (require) {
&& (mlData.type == 'max' || mlData.type == 'min' || mlData.type == 'average')
) {
// 特殊值内置支持
pos = this.getMarkCoord(serie, seriesIndex, mlData, markCoordParams);
pos = this.getMarkCoord(seriesIndex, mlData);
markLine.data[i] = [zrUtil.clone(mlData), {}];
markLine.data[i][0].name = mlData.name || mlData.type;
markLine.data[i][0].value = pos[3];
......@@ -346,12 +345,8 @@ define(function (require) {
}
else {
pos = [
this.getMarkCoord(
serie, seriesIndex, mlData[0], markCoordParams
),
this.getMarkCoord(
serie, seriesIndex, mlData[1], markCoordParams
)
this.getMarkCoord(seriesIndex, mlData[0]),
this.getMarkCoord(seriesIndex, mlData[1])
];
}
......@@ -365,9 +360,7 @@ define(function (require) {
? mlData[1].y : pos[1][1];
}
var shapeList = this._markLine(
serie, seriesIndex, markLine, component
);
var shapeList = this._markLine(seriesIndex, markLine);
for (var i = 0, l = shapeList.length; i < l; i++) {
shapeList[i].zlevel = _zlevelBase + 1;
......@@ -386,7 +379,9 @@ define(function (require) {
}
},
_markPoint : function (serie, seriesIndex, mpOption, component) {
_markPoint : function (seriesIndex, mpOption) {
var serie = this.series[seriesIndex];
var component = this.component;
zrUtil.merge(
mpOption,
this.ecTheme.markPoint
......@@ -478,13 +473,15 @@ define(function (require) {
}
else {
// 大规模MarkPoint
itemShape = this.getLargeMarkPoingShape(serie, seriesIndex, mpOption, component);
itemShape = this.getLargeMarkPoingShape(seriesIndex, mpOption);
itemShape && pList.push(itemShape);
}
return pList;
},
_markLine : function (serie, seriesIndex, mlOption, component) {
_markLine : function (seriesIndex, mlOption) {
var serie = this.series[seriesIndex];
var component = this.component;
zrUtil.merge(
mlOption,
this.ecTheme.markLine
......@@ -883,7 +880,9 @@ define(function (require) {
return itemShape;
},
getLargeMarkPoingShape : function(serie, seriesIndex, mpOption, component) {
getLargeMarkPoingShape : function(seriesIndex, mpOption) {
var serie = this.series[seriesIndex];
var component = this.component;
var data = mpOption.data;
var itemShape;
......@@ -1228,56 +1227,57 @@ define(function (require) {
}
},
animationMark : function (duration , easing) {
animationMark : function (duration , easing, addShapeList) {
shapeList = addShapeList || this.shapeList;
var x;
var y;
for (var i = 0, l = this.shapeList.length; i < l; i++) {
if (!this.shapeList[i]._mark) {
for (var i = 0, l = shapeList.length; i < l; i++) {
if (!shapeList[i]._mark) {
continue;
}
x = this.shapeList[i]._x || 0;
y = this.shapeList[i]._y || 0;
if (this.shapeList[i]._mark == 'point') {
x = shapeList[i]._x || 0;
y = shapeList[i]._y || 0;
if (shapeList[i]._mark == 'point') {
this.zr.modShape(
this.shapeList[i].id,
shapeList[i].id,
{
scale : [0, 0, x, y]
}
);
this.zr.animate(this.shapeList[i].id, '')
this.zr.animate(shapeList[i].id, '')
.when(
duration,
{scale : [1, 1, x, y]}
)
.start(easing || 'QuinticOut');
}
else if (this.shapeList[i]._mark == 'line') {
if (!this.shapeList[i].style.smooth) {
else if (shapeList[i]._mark == 'line') {
if (!shapeList[i].style.smooth) {
this.zr.modShape(
this.shapeList[i].id,
shapeList[i].id,
{
style : {
pointList : [
[
this.shapeList[i].style.xStart,
this.shapeList[i].style.yStart
shapeList[i].style.xStart,
shapeList[i].style.yStart
],
[
this.shapeList[i].style.xStart,
this.shapeList[i].style.yStart
shapeList[i].style.xStart,
shapeList[i].style.yStart
]
]
}
}
);
this.zr.animate(this.shapeList[i].id, 'style')
this.zr.animate(shapeList[i].id, 'style')
.when(
duration,
{
pointList : [
[
this.shapeList[i].style.xStart,
this.shapeList[i].style.yStart
shapeList[i].style.xStart,
shapeList[i].style.yStart
],
[
x, y
......@@ -1290,29 +1290,30 @@ define(function (require) {
else {
// 曲线动画
this.zr.modShape(
this.shapeList[i].id,
shapeList[i].id,
{
style : {
pointListLength : 1
}
}
);
this.zr.animate(this.shapeList[i].id, 'style')
this.zr.animate(shapeList[i].id, 'style')
.when(
duration,
{
pointListLength : this.shapeList[i].style.pointList.length
pointListLength : shapeList[i].style.pointList.length
}
)
.start(easing || 'QuinticOut');
}
}
}
this.animationEffect();
this.animationEffect(addShapeList);
},
animationEffect : function () {
this.clearAnimationShape();
animationEffect : function (addShapeList) {
!addShapeList && this.clearAnimationShape();
shapeList = addShapeList || this.shapeList;
var zlevel = EFFECT_ZLEVEL;
if (this.canvasSupported) {
this.zr.modLayer(
......@@ -1323,15 +1324,13 @@ define(function (require) {
}
);
}
var shape;
for (var i = 0, l = this.shapeList.length; i < l; i++) {
shape = this.shapeList[i];
for (var i = 0, l = shapeList.length; i < l; i++) {
shape = shapeList[i];
if (!(shape._mark && shape.effect && shape.effect.show && effectBase[shape._mark])
) {
continue;
}
//console.log(shape)
effectBase[shape._mark](this.zr, this.effectList, shape, zlevel);
}
},
......@@ -1345,6 +1344,36 @@ define(function (require) {
this.zr.delShape(this.effectList);
}
this.effectList = [];
},
/**
* 动态标线标注添加
* @param {number} seriesIndex 系列索引
* @param {Object} markData 标线标注对象,支持多个
* @param {string} markType 标线标注类型
*/
addMark : function (seriesIndex, markData, markType) {
var serie = this.series[seriesIndex];
if (this.selectedMap[serie.name]) {
var duration = 500;
var easing = this.query(this.option, 'animationEasing');
// 备份,复用_buildMarkX
var oriMarkData = serie[markType].data;
var lastLength = this.shapeList.length;
serie[markType].data = markData.data;
this['_build' + markType.replace('m', 'M')](seriesIndex);
for (var i = lastLength, l = this.shapeList.length; i < l; i++) {
this.zr.addShape(this.shapeList[i]);
}
this.zr.refresh();
if (this.option.animation && !this.option.renderAsImage) {
this.animationMark(duration, easing, this.shapeList.slice(lastLength));
}
// 还原,复用_buildMarkX
serie[markType].data = oriMarkData;
}
}
}
......
......@@ -61,11 +61,7 @@ define(function (require) {
continue;
}
this.chordSeries.push(series[i]);
this.buildMark(
series[i],
i,
this.component
);
this.buildMark(i);
matrix.push(series[i].matrix);
serieNumber++;
}
......
......@@ -130,11 +130,7 @@ define(function (require) {
if (!self.selectedMap[serieName]) {
continue;
}
self.buildMark(
series[i],
i,
component
);
self.buildMark(i);
forceSerie = serie;
......
......@@ -95,11 +95,7 @@ define(function (require) {
this._buildHorizontal(seriesArray, maxDataLength, locationMap);
for (var i = 0, l = seriesArray.length; i < l; i++) {
this.buildMark(
series[seriesArray[i]],
seriesArray[i],
this.component
);
this.buildMark(seriesArray[i]);
}
},
......@@ -420,7 +416,8 @@ define(function (require) {
},
// 位置转换
getMarkCoord : function (serie, seriesIndex, mpData) {
getMarkCoord : function (seriesIndex, mpData) {
var serie = this.series[seriesIndex];
var xAxis = this.component.xAxis.getAxis(serie.xAxisIndex);
var yAxis = this.component.yAxis.getAxis(serie.yAxisIndex);
......
......@@ -52,6 +52,7 @@ define(function (require) {
this._sIndex2ShapeMap = {}; // series拐点图形类型,seriesIndex索引到shape type
this.selectedMap = {};
this.xMarkMap = {};
// 水平垂直双向series索引 ,position索引到seriesIndex
var _position2sIndexMap = {
......@@ -106,27 +107,19 @@ define(function (require) {
if (maxDataLength === 0 || locationMap.length === 0) {
return;
}
var xMarkMap = {}; // 为标注记录一些参数
switch (position) {
case 'bottom' :
case 'top' :
this._buildHorizontal(seriesArray, maxDataLength, locationMap, xMarkMap);
this._buildHorizontal(seriesArray, maxDataLength, locationMap, this.xMarkMap);
break;
case 'left' :
case 'right' :
this._buildVertical(seriesArray, maxDataLength, locationMap, xMarkMap);
this._buildVertical(seriesArray, maxDataLength, locationMap, this.xMarkMap);
break;
}
for (var i = 0, l = seriesArray.length; i < l; i++) {
this.buildMark(
series[seriesArray[i]],
seriesArray[i],
this.component,
{
xMarkMap : xMarkMap
}
);
this.buildMark(seriesArray[i]);
}
},
......@@ -834,7 +827,9 @@ define(function (require) {
},
// 位置转换
getMarkCoord : function (serie, seriesIndex, mpData, markCoordParams) {
getMarkCoord : function (seriesIndex, mpData) {
var serie = this.series[seriesIndex];
var xMarkMap = this.xMarkMap[seriesIndex];
var xAxis = this.component.xAxis.getAxis(serie.xAxisIndex);
var yAxis = this.component.yAxis.getAxis(serie.yAxisIndex);
......@@ -843,10 +838,10 @@ define(function (require) {
) {
// 特殊值内置支持
return [
markCoordParams.xMarkMap[seriesIndex][mpData.type + 'X'],
markCoordParams.xMarkMap[seriesIndex][mpData.type + 'Y'],
markCoordParams.xMarkMap[seriesIndex][mpData.type + 'Line'],
markCoordParams.xMarkMap[seriesIndex][mpData.type]
xMarkMap[mpData.type + 'X'],
xMarkMap[mpData.type + 'Y'],
xMarkMap[mpData.type + 'Line'],
xMarkMap[mpData.type]
];
}
......
......@@ -850,33 +850,33 @@ define(function (require) {
// 添加标注
_buildMark : function (mapType, mapSeries) {
this._seriesIndexToMapType = this._seriesIndexToMapType || {};
this.markAttachStyle = this.markAttachStyle || {};
var series = this.series;
var position = [
this._mapDataMap[mapType].transform.left,
this._mapDataMap[mapType].transform.top
];
for (var sIdx in mapSeries) {
this.buildMark(
sIdx,
{
mapType : mapType
},
{
position : position,
_mapType : mapType
}
);
this._seriesIndexToMapType[sIdx] = mapType;
this.markAttachStyle[sIdx] = {
position : position,
_mapType : mapType
};
this.buildMark(sIdx);
}
},
// 位置转换
getMarkCoord : function (serie, seriesIndex, mpData, markCoordParams) {
getMarkCoord : function (seriesIndex, mpData) {
return (mpData.geoCoord || _geoCoord[mpData.name])
? this.geo2pos(
markCoordParams.mapType, mpData.geoCoord || _geoCoord[mpData.name]
this._seriesIndexToMapType[seriesIndex],
mpData.geoCoord || _geoCoord[mpData.name]
)
: [0, 0];
},
getMarkGeo : function(name) {
return _geoCoord[name];
},
......
......@@ -131,11 +131,7 @@ define(function (require) {
this.shapeList.push(pieCase);
}
this._buildSinglePie(i);
this.buildMark(
series[i],
i,
this.component
);
this.buildMark(i);
}
}
......
......@@ -67,11 +67,7 @@
this._addDropBox(i);
}
this._buildSingleRadar(i);
this.buildMark(
series[i],
i,
this.component
);
this.buildMark(i);
}
}
}
......
......@@ -49,6 +49,7 @@ define(function (require) {
this._sIndex2ShapeMap = {}; // series图形类型,seriesIndex索引到_symbol
this.selectedMap = {};
this.xMarkMap = {};
var legend = this.component.legend;
var seriesArray = [];
......@@ -168,14 +169,10 @@ define(function (require) {
]);
}
this.buildMark(
serie,
seriesIndex,
this.component,
{
xMarkMap : this._markMap(xAxis, yAxis, serie.data, pointList[seriesIndex])
}
);
this.xMarkMap[seriesIndex] = this._markMap(
xAxis, yAxis, serie.data, pointList[seriesIndex]
);
this.buildMark(seriesIndex);
}
// console.log(pointList)
......@@ -375,7 +372,9 @@ define(function (require) {
},
// 位置转换
getMarkCoord : function (serie, seriesIndex, mpData, markCoordParams) {
getMarkCoord : function (seriesIndex, mpData) {
var serie = this.series[seriesIndex];
var xMarkMap = this.xMarkMap[seriesIndex];
var xAxis = this.component.xAxis.getAxis(serie.xAxisIndex);
var yAxis = this.component.yAxis.getAxis(serie.yAxisIndex);
var pos;
......@@ -388,10 +387,10 @@ define(function (require) {
var valueIndex = typeof mpData.valueIndex != 'undefined'
? mpData.valueIndex : 1;
pos = [
markCoordParams.xMarkMap[mpData.type + 'X' + valueIndex],
markCoordParams.xMarkMap[mpData.type + 'Y' + valueIndex],
markCoordParams.xMarkMap[mpData.type + 'Line' + valueIndex],
markCoordParams.xMarkMap[mpData.type + valueIndex]
xMarkMap[mpData.type + 'X' + valueIndex],
xMarkMap[mpData.type + 'Y' + valueIndex],
xMarkMap[mpData.type + 'Line' + valueIndex],
xMarkMap[mpData.type + valueIndex]
];
}
else {
......
......@@ -181,6 +181,7 @@ define(function (require) {
resize : function () {
this.refresh && this.refresh();
this.animationEffect && this.animationEffect();
},
/**
......
......@@ -1112,6 +1112,59 @@ define(function (require) {
return this;
},
/**
* 动态[标注 | 标线]添加
* @param {number} seriesIdx 系列索引
* @param {Object} markData [标注 | 标线]对象,支持多个
*/
addMarkPoint : function (seriesIdx, markData) {
return this._addMark(seriesIdx, markData, 'markPoint');
},
addMarkLine : function (seriesIdx, markData) {
return this._addMark(seriesIdx, markData, 'markLine');
},
_addMark : function (seriesIdx, markData, markType) {
if (!(this._option.series && this._option.series[seriesIdx])) {
return this;
}
this._option.series[seriesIdx][markType]
= this._option.series[seriesIdx][markType] || {data: []};
this._optionRestore.series[seriesIdx][markType]
= this._optionRestore.series[seriesIdx][markType] || {data: []};
for (var key in markData) {
if (key == 'data') {
// 数据concat
this._option.series[seriesIdx][markType].data =
this._option.series[seriesIdx][markType].data.concat(markData.data);
this._optionRestore.series[seriesIdx][markType].data =
this._optionRestore.series[seriesIdx][markType].data.concat(markData.data);
}
else if (typeof markData[key] != 'object'
|| typeof this._option.series[seriesIdx][markType][key] == 'undefined'
) {
// 简单类型或新值直接赋值
this._option.series[seriesIdx][markType][key]
= this._optionRestore.series[seriesIdx][markType][key]
= markData[key];
}
else {
// 非数据的复杂对象merge
zrUtil.merge(
this._option.series[seriesIdx][markType][key], markData[key], true
);
zrUtil.merge(
this._optionRestore.series[seriesIdx][markType][key], markData[key], true
);
}
}
var chart = this.chart[this._option.series[seriesIdx].type];
chart && chart.addMark(seriesIdx, markData, markType);
return this;
},
/**
* 获取当前dom
*/
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册