提交 351d0629 编写于 作者: P pah100

Merge branch 'master' of https://github.com/pissang/echarts-next

Conflicts:
	test/dataZoom-cartesian-h.html
define(function (require) {
var zrUtil = require('zrender/core/util');
var Group = require('zrender/container/Group');
var symbolUtil = require('../../util/symbol');
var graphic = require('../../util/graphic');
......@@ -61,7 +60,7 @@ define(function (require) {
}
function DataSymbol() {
this.group = new Group();
this.group = new graphic.Group();
}
DataSymbol.prototype = {
......
......@@ -46,33 +46,33 @@ define(function(require) {
* @param {Array.<Array.<number>>} points
* @private
*/
function getStackedOnPoints(coordSys, data, points) {
function getStackedOnPoints(coordSys, data) {
var baseAxis = coordSys.getBaseAxis();
var valueAxis = coordSys.getOtherAxis(baseAxis);
var valueAxisStart = baseAxis.onZero
? valueAxis.dataToCoord(0) : valueAxis.getExtent()[0];
var valueStart = baseAxis.onZero
? 0 : valueAxis.scale.getExtent()[0];
var valueDim = valueAxis.dim;
var baseCoordOffset = valueDim === 'x' || valueDim === 'radius' ? 1 : 0;
// var dims = coordSys.type === 'cartesian2d' ? ['x', 'y'] : ['radius', 'angle'];
var baseDataOffset = valueDim === 'x' || valueDim === 'radius' ? 1 : 0;
return data.map([valueDim], function (val, idx) {
var stackedOnSameSign;
var stackedOn = data.stackedOn;
if (val > 0) {
// Find first stacked value with same sign
while (stackedOn &&
sign(stackedOn.get(valueDim, idx)) === sign(val)
) {
stackedOnSameSign = stackedOn;
break;
}
// Find first stacked value with same sign
while (stackedOn &&
sign(stackedOn.get(valueDim, idx)) === sign(val)
) {
stackedOnSameSign = stackedOn;
break;
}
var pt = [];
pt[baseCoordOffset] = points[idx][baseCoordOffset];
pt[1 - baseCoordOffset] = stackedOnSameSign
? stackedOnSameSign.getItemLayout(idx)[1 - baseCoordOffset]
: valueAxisStart;
return pt;
var stackedData = [];
stackedData[baseDataOffset] = data.get(baseAxis.dim, idx);
stackedData[1 - baseDataOffset] = stackedOnSameSign
? stackedOnSameSign.get(valueDim, idx, true) : valueStart;
return coordSys.dataToPoint(stackedData);
}, true);
}
......@@ -105,9 +105,7 @@ define(function(require) {
var hasAnimation = ecModel.get('animation');
var isAreaChart = !areaStyleModel.isEmpty();
var stackedOnPoints = getStackedOnPoints(
coordSys, data, points
);
var stackedOnPoints = getStackedOnPoints(coordSys, data);
// Initialization animation or coordinate system changed
if (
......@@ -141,11 +139,13 @@ define(function(require) {
// In the case data zoom triggerred refreshing frequently
// Data may not change if line has a category axis. So it should animate nothing
// if (!isDataSame(this._data, data)) {
if (!isPointsSame(this._stackedOnPoints, stackedOnPoints)
|| !isPointsSame(this._points, points)
) {
this._updateAnimation(
data, stackedOnPoints, coordSys
);
// }
}
// Add back
group.add(polyline);
group.add(polygon);
......@@ -174,6 +174,7 @@ define(function(require) {
// Save the coordinate system for transition animation when data changed
this._coordSys = coordSys;
this._stackedOnPoints = stackedOnPoints;
this._points = points;
!isCoordSysPolar && !seriesModel.get('showAllSymbol')
&& this._updateSymbolDisplay(data, coordSys);
......
......@@ -13,30 +13,28 @@ define(function (require) {
function getStackedOnPoint(coordSys, data, idx) {
var baseAxis = coordSys.getBaseAxis();
var valueAxis = coordSys.getOtherAxis(baseAxis);
var valueAxisStart = baseAxis.onZero
? valueAxis.dataToCoord(0) : valueAxis.getExtent()[0];
var valueStart = baseAxis.onZero
? 0 : valueAxis.scale.getExtent()[0];
var valueDim = valueAxis.dim;
var baseCoordOffset = valueDim === 'x' || valueDim === 'radius' ? 1 : 0;
var baseDataOffset = valueDim === 'x' || valueDim === 'radius' ? 1 : 0;
var stackedOnSameSign;
var stackedOn = data.stackedOn;
var val = data.get(valueDim, idx);
if (val > 0) {
// Find first stacked value with same sign
while (stackedOn &&
sign(stackedOn.get(valueDim, idx)) === sign(val)
) {
stackedOnSameSign = stackedOn;
break;
}
// Find first stacked value with same sign
while (stackedOn &&
sign(stackedOn.get(valueDim, idx)) === sign(val)
) {
stackedOnSameSign = stackedOn;
break;
}
var pt = [];
pt[baseCoordOffset] = data.getItemLayout(idx)[baseCoordOffset];
pt[1 - baseCoordOffset] = stackedOnSameSign
? stackedOnSameSign.getItemLayout(idx)[1 - baseCoordOffset]
: valueAxisStart;
return pt;
var stackedData = [];
stackedData[baseDataOffset] = data.get(baseAxis.dim, idx);
stackedData[1 - baseDataOffset] = stackedOnSameSign
? stackedOnSameSign.get(valueDim, idx, true) : valueStart;
return coordSys.dataToPoint(stackedData);
}
return function (
......@@ -82,11 +80,11 @@ define(function (require) {
var idx = diffItem.idx;
currPoints.push(
oldCoordSys.dataToPoint([
newData.get(dims[0], idx), newData.get(dims[1], idx)
newData.get(dims[0], idx, true), newData.get(dims[1], idx, true)
])
);
nextPoints.push(newData.getItemLayout(idx));
nextPoints.push(newData.getItemLayout(idx).slice());
currStackedPoints.push(
getStackedOnPoint(oldCoordSys, newData, idx)
......@@ -103,7 +101,7 @@ define(function (require) {
if (rawIndex !== idx) {
currPoints.push(oldData.getItemLayout(idx));
nextPoints.push(newCoordSys.dataToPoint([
oldData.get(dims[0], idx), oldData.get(dims[1], idx)
oldData.get(dims[0], idx, true), oldData.get(dims[1], idx, true)
]));
currStackedPoints.push(oldStackedOnPoints[idx]);
......
......@@ -50,7 +50,7 @@ define(function (require) {
// 标线起始和结束的symbol介绍类型,如果都一样,可以直接传string
symbol: ['circle', 'arrow'],
// 标线起始和结束的symbol大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
symbolSize: [2, 4],
symbolSize: [8, 16],
// 标线起始和结束的symbol旋转控制
//symbolRotate: null,
//smooth: false,
......@@ -73,22 +73,29 @@ define(function (require) {
},
itemStyle: {
normal: {
// color: 各异, // 标线主色,线色,symbol主色
// borderColor: 随color, // 标线symbol边框颜色,优先于color
borderWidth: 1.5, // 标线symbol边框线宽,单位px,默认为2
// 标线主色,线色,symbol主色
// color: 各异,
// 标线symbol边框颜色,优先于color
// borderColor: 随color,
// 标线symbol边框线宽,单位px,默认为2
borderWidth: 2,
label: {
show: true,
// 标签文本格式器,同Tooltip.formatter,不支持回调
// formatter: null,
// 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
position: 'end'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
// 默认使用全局文本样式,详见TEXTSTYLE
// textStyle: null
},
lineStyle: {
// color: 随borderColor, // 主色,线色,优先级高于borderColor和color
// width: 随borderWidth, // 优先于borderWidth
// 主色,线色,优先级高于borderColor和color
// color: 随borderColor,
// 优先于borderWidth
// width: 随borderWidth,
type: 'dashed'
// shadowColor: 'rgba(0,0,0,0)', //默认透明
//默认透明
// shadowColor: 'rgba(0,0,0,0)',
// shadowBlur: 0,
// shadowOffsetX: 0,
// shadowOffsetY: 0
......@@ -103,7 +110,9 @@ define(function (require) {
// position: 'inside' // 'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
lineStyle: {}
lineStyle: {
width: 3
}
}
}
}
......
......@@ -12,7 +12,7 @@ define(function (require) {
var mlType = item.type;
if (!zrUtil.isArray(item)
&& mlType === 'min' || mlType === 'max' || mlType === 'average'
) {
) {
var baseAxisKey = baseAxis.dim + 'Axis';
var valueAxisKey = valueAxis.dim + 'Axis';
var baseScaleExtent = baseAxis.scale.getExtent();
......@@ -96,19 +96,31 @@ define(function (require) {
var mlData = createList(coordSys, seriesData, mlModel)
var dims = mlData.from.dimensions.slice(0, 2);
var fromData = mlData.from;
var toData = mlData.to;
var symbolType = mlModel.get('symbol');
var symbolSize = mlModel.get('symbolSize');
if (!zrUtil.isArray(symbolType)) {
symbolType = [symbolType, symbolType];
}
if (typeof (+symbolSize) === 'number') {
symbolSize = [symbolSize, symbolSize];
}
mlData.from.each(function (idx) {
updateDataVisualAndLayout(mlData.from, idx);
updateDataVisualAndLayout(mlData.to, idx);
updateDataVisualAndLayout(fromData, idx, true);
updateDataVisualAndLayout(toData, idx);
});
seriesMarkLine.update(mlData.from, mlData.to);
seriesMarkLine.update(fromData, toData);
function updateDataVisualAndLayout(data, idx) {
function updateDataVisualAndLayout(data, idx, isFrom) {
var itemModel = data.getItemModel(idx);
var point;
var xPx = itemModel.getShallow('x');
var yPx = itemModel.getShallow('y');
var xPx = itemModel.get('x');
var yPx = itemModel.get('y');
if (xPx != null && yPx != null) {
point = [xPx, yPx];
}
......@@ -121,8 +133,10 @@ define(function (require) {
data.setItemLayout(idx, point);
data.setItemVisual(idx, {
// symbolSize: itemModel.getShallow('symbolSize'),
// symbol: itemModel.getShallow('symbol'),
symbolSize: itemModel.get('symbolSize')
|| symbolSize[isFrom ? 0 : 1],
symbol: itemModel.get('symbol', true)
|| symbolType[isFrom ? 0 : 1],
color: itemModel.get('itemStyle.normal.color')
|| seriesData.getVisual('color')
});
......@@ -138,7 +152,7 @@ define(function (require) {
* @param {module:echarts/data/List} seriesData
* @param {module:echarts/model/Model} mpModel
*/
function createList (coordSys, seriesData, mlModel) {
function createList(coordSys, seriesData, mlModel) {
var baseAxis = coordSys && coordSys.getBaseAxis();
var valueAxis = coordSys && coordSys.getOtherAxis(baseAxis);
var dimensions = seriesData.dimensions.slice();
......@@ -150,24 +164,24 @@ define(function (require) {
var dimensionInfosMap = zrUtil.map(
dimensions, seriesData.getDimensionInfo, seriesData
);
);
var fromData = new List(dimensionInfosMap, mlModel);
var toData = new List(dimensionInfosMap, mlModel);
var optData = zrUtil.filter(
zrUtil.map(mlModel.get('data'), zrUtil.curry(
markLineTransform, seriesData, baseAxis, valueAxis
)),
)),
zrUtil.curry(
markLineFilter, coordSys, dimensionInverse
)
);
)
);
fromData.initData(
zrUtil.map(optData, function (item) { return item[0]; })
);
);
toData.initData(
zrUtil.map(optData, function (item) { return item[1]; })
);
);
return {
from: fromData,
......
......@@ -47,7 +47,7 @@ define(function (require) {
z: 5,
clickable: true,
symbol: 'pin', // 标注类型
symbolSize: [30, 50], // 标注大小
symbolSize: 50, // 标注大小
// symbolRotate: null, // 标注旋转控制
large: false,
effect: {
......
/**
* @module echarts/component/marker/SeriesMarkLine
*/
define(function (require) {
var graphic = require('../../util/graphic');
var zrUtil = require('zrender/core/util');
var symbolUtil = require('../../util/symbol');
function tangentRotation(p1, p2) {
return -Math.PI / 2 - Math.atan2(
p2[1] - p1[1], p2[0] - p1[0]
);
}
/**
* @inner
*/
function createSymbol(data, idx, p1, p2, hasAnimation) {
var color = data.getItemVisual(idx, 'color');
var symbolType = data.getItemVisual(idx, 'symbol');
var symbolSize = data.getItemVisual(idx, 'symbolSize');
if (symbolType === 'none') {
return;
}
if (!zrUtil.isArray(symbolSize)) {
symbolSize = [symbolSize, symbolSize];
}
var symbolPath = symbolUtil.createSymbol(
symbolType, -symbolSize[0] / 2, -symbolSize[1] / 2,
symbolSize[0], symbolSize[1], color
);
if (hasAnimation) {
symbolPath.position = p1.slice();
symbolPath.animateTo({
position: p2
}, 1000);
}
else {
symbolPath.position = p2.slice();
}
// Rotate the arrow
// FIXME Hard coded ?
if (symbolType === 'arrow') {
symbolPath.rotation = tangentRotation(p1, p2);
}
return symbolPath;
}
/**
* @alias module:echarts/component/marker/SeriesMarkLine
* @constructor
*/
function SeriesMarkLine() {
this.group = new graphic.Group();
......@@ -10,9 +62,14 @@ define(function (require) {
var seriesMarkLineProto = SeriesMarkLine.prototype;
/**
* @param {module:echarts/data/List} fromData
* @param {module:echarts/data/List} toData
*/
seriesMarkLineProto.update = function (fromData, toData) {
var oldFromData = this._fromData;
var oldToData = this._toData;
var group = this.group;
fromData.diff(oldFromData)
......@@ -36,7 +93,15 @@ define(function (require) {
}
}, 1000);
var symbolFrom = createSymbol(fromData, idx, p2, p1);
var symbolTo = createSymbol(toData, idx, p1, p2, true);
group.add(line);
group.add(symbolFrom);
group.add(symbolTo);
line.__symbolFrom = symbolFrom;
line.__symbolTo = symbolTo;
fromData.setItemGraphicEl(idx, line);
})
......@@ -46,6 +111,9 @@ define(function (require) {
var p1 = fromData.getItemLayout(newIdx);
var p2 = toData.getItemLayout(newIdx);
var fromSymbolType = fromData.getItemVisual(newIdx, 'symbol');
var toSymbolType = toData.getItemVisual(newIdx, 'symbol');
line.animateTo({
shape: {
x1: p1[0],
......@@ -55,6 +123,32 @@ define(function (require) {
}
}, 300, 'cubicOut');
var rotation = tangentRotation(p1, p2);
var symbolFrom = line.__symbolFrom;
var symbolTo = line.__symbolTo;
// Symbol changed
if (fromSymbolType !== oldFromData.getItemVisual(oldIdx, 'symbol')) {
symbolFrom = line.__symbolFrom = createSymbol(fromData, newIdx, p2, p1);
}
else {
symbolFrom && symbolFrom.animateTo({
position: p1,
rotation: rotation
}, 300, 'cubicOut');
}
// Symbol changed
if (toSymbolType !== oldToData.getItemVisual(oldIdx, 'symbol')) {
symbolTo = line.__symbolTo = createSymbol(toData, newIdx, p1, p2);
}
else {
symbolTo && symbolTo.animateTo({
position: p2,
rotation: rotation
}, 300, 'cubicOut');
}
fromData.setItemGraphicEl(newIdx, line);
group.add(line);
......@@ -80,11 +174,10 @@ define(function (require) {
line,
itemModel.getModel('itemStyle.emphasis.lineStyle').getLineStyle()
);
});
this._fromData = fromData;
// this._toData = toData;
this._toData = toData;
}
return SeriesMarkLine;
......
......@@ -40,6 +40,25 @@ define(function(require, factory) {
return ecModel.getComponent('grid', axisModel.get('gridIndex')) === gridModel;
}
/**
* Check if the axis corss 0
* @inner
*/
function ifAxisCrossZero (axis) {
var dataExtent = axis.scale.getExtent();
return (dataExtent[0] > 0 && dataExtent[1] > 0)
|| (dataExtent[0] < 0 && dataExtent[1] < 0)
|| ifAxisNeedsCrossZero(axis);
}
/**
* Check if the axis scale needs include data 0
* @inner
*/
function ifAxisNeedsCrossZero(axis) {
return !axis.model.get('scale')
&& axis.type !== CATEGORY_AXIS_TYPE
}
function Grid(gridModel, ecModel, api) {
/**
......@@ -207,19 +226,24 @@ define(function(require, factory) {
this._coordsMap[key] = cartesian;
this._coordsList.push(cartesian);
// On zero can not be used when other axis is a category axis
if (xAxis.type === CATEGORY_AXIS_TYPE) {
// onZero can not be used in these two situations
// 1. When other axis is a category axis
// 2. When other axis not across 0 point
if (xAxis.type === CATEGORY_AXIS_TYPE
|| !ifAxisCrossZero(xAxis)
) {
yAxis.onZero = false;
}
if (yAxis.type === CATEGORY_AXIS_TYPE) {
if (yAxis.type === CATEGORY_AXIS_TYPE
|| !ifAxisCrossZero(yAxis)
) {
xAxis.onZero = false;
}
// Force scale to be true so the axis can contain `0`
if (xAxis.onZero || yAxis.model.get('scale')) {
if (ifAxisNeedsCrossZero(yAxis, xAxis)) {
yAxis.scale.unionExtent([0, 0]);
}
if (yAxis.onZero || xAxis.model.get('scale')) {
if (ifAxisNeedsCrossZero(xAxis, yAxis)) {
xAxis.scale.unionExtent([0, 0]);
}
......
......@@ -272,8 +272,12 @@ define(function (require) {
var dataIndex = this.indices[idx];
var value = storage[dim] && storage[dim][dataIndex];
var dimensionInfo = this._dimensionInfos[dim];
// FIXME ordinal data type is not stackable
if (stack && this.stackedOn) {
if (
stack && this.stackedOn
&& dimensionInfo && dimensionInfo.stackable
) {
var stackedValue = this.stackedOn.get(dim, idx, stack);
// Considering positive stack, negative stack and empty data
if ((value >= 0 && stackedValue > 0) // Positive stack
......@@ -440,19 +444,6 @@ define(function (require) {
return dimensions;
}
/**
* @private
*/
listProto._getStackDimMap = function (dimensions) {
var stackDimMap = {};
var dimensionsInfoMap = this._dimensionInfos;
// Avoid get the undefined value
for (var i = 0; i < dimensions.length; i++) {
var dim = dimensions[i]
stackDimMap[dim] = !!dimensionsInfoMap[dim].stackable;
}
return stackDimMap;
}
/**
* Data iteration
* @param {string|Array.<string>}
......@@ -479,11 +470,6 @@ define(function (require) {
var dimSize = dimensions.length;
var indices = this.indices;
// Only stacked on the value axis
var stackDimMap = this._getStackDimMap(dimensions);
// Optimizing for 1 dim case
var firstDimStack = stack && stackDimMap[dimensions[0]];
context = context || this;
for (var i = 0; i < indices.length; i++) {
......@@ -493,11 +479,11 @@ define(function (require) {
}
// Simple optimization
else if (dimSize === 1) {
cb.call(context, this.get(dimensions[0], i, firstDimStack), i);
cb.call(context, this.get(dimensions[0], i, stack), i);
}
else {
for (var k = 0; k < dimSize; k++) {
value[k] = this.get(dimensions[k], i, stack && stackDimMap[dimensions[k]]);
value[k] = this.get(dimensions[k], i, stack);
}
// Index
value[k] = i;
......@@ -528,11 +514,6 @@ define(function (require) {
var dimSize = dimensions.length;
var indices = this.indices;
// Only stacked on the value axis
var stackDimMap = this._getStackDimMap(dimensions);
// Optimizing for 1 dim case
var firstDimStack = stack && stackDimMap[dimensions[0]];
context = context || this;
for (var i = 0; i < indices.length; i++) {
......@@ -540,12 +521,12 @@ define(function (require) {
// Simple optimization
if (dimSize === 1) {
keep = cb.call(
context, this.get(dimensions[0], i, firstDimStack), i
context, this.get(dimensions[0], i, stack), i
);
}
else {
for (var k = 0; k < dimSize; k++) {
value[k] = this.get(dimensions[k], i, stack && stackDimMap[dimensions[k]]);
value[k] = this.get(dimensions[k], i, stack);
}
value[k] = i;
keep = cb.apply(context, value);
......
......@@ -13,14 +13,15 @@ define(function (require) {
return {
getLineStyle: function () {
var style = getLineStyle.call(this);
style.lineDash = this.getLineDash();
var lineDash = this.getLineDash();
lineDash && (style.lineDash = lineDash);
return style;
},
getLineDash: function () {
var type = this.get('type');
return (type === 'solid' || type == null) ? null
: (type === 'dashed' ? [5, 5] : [1, 1]);
var lineType = this.get('type');
return (lineType === 'solid' || lineType == null) ? null
: (lineType === 'dashed' ? [5, 5] : [1, 1]);
}
};
});
\ No newline at end of file
......@@ -5,7 +5,6 @@ define(function(require) {
var graphic = require('./graphic');
var BoundingRect = require('zrender/core/BoundingRect');
var zrUtil = require('zrender/core/util');
/**
* Diamond shape
......@@ -45,7 +44,7 @@ define(function(require) {
buildPath: function (path, shape) {
var x = shape.x;
var y = shape.y;
var w = shape.width;
var w = shape.width / 5 * 3;
// Height must be larger than width
var h = Math.max(w, shape.height);
var r = w / 2;
......@@ -83,19 +82,56 @@ define(function(require) {
}
});
/**
* Arrow shape
*/
var Arrow = graphic.extendShape({
type: 'arrow',
shape: {
x: 0,
y: 0,
width: 0,
height: 0
},
buildPath: function (ctx, shape) {
var height = shape.height;
var width = shape.width;
var x = shape.x;
var y = shape.y;
var dx = width / 3 * 2;
ctx.moveTo(x, y);
ctx.lineTo(x + dx, y + height);
ctx.lineTo(x, y + height / 4 * 3);
ctx.lineTo(x - dx, y + height);
ctx.lineTo(x, y);
}
});
var symbolCtors = {
line: graphic.Line,
rect: graphic.Rect,
roundRect: graphic.Rect,
square: graphic.Rect,
circle: graphic.Circle,
diamond: Diamond,
pin: Pin
pin: Pin,
arrow: Arrow
};
var symbolShapeMakers = {
line: function (x, y, w, h) {
// FIXME
return {
x1: x,
y1: y + h / 2,
......@@ -159,8 +195,16 @@ define(function(require) {
width: w,
height: h
};
}
},
arrow: function (x, y, w, h) {
return {
x: x + w / 2,
y: y + h / 2,
width: w,
height: h
}
}
};
// Provide setColor helper method to avoid determine if set the fill or stroke outside
......
......@@ -10,6 +10,9 @@
width: 100%;
height: 100%;
}
body {
margin: 0;
}
</style>
<div id="main"></div>
<script>
......@@ -37,9 +40,9 @@
for (var i = 0; i < 200; i++) {
xAxisData.push('类目' + i);
data1.push((1 + Math.random() - 0.2).toFixed(2));
data2.push((1 + Math.random()).toFixed(2));
data3.push(( 1 + Math.random()).toFixed(2));
data1.push((Math.random() + 0.1).toFixed(2));
data2.push(Math.random().toFixed(2));
data3.push(Math.random().toFixed(2));
}
chart.setOption({
......@@ -86,9 +89,13 @@
}]
},
markLine: {
data: [{
type: 'average'
}]
data: [
[{
type: 'average'
}, {
type: 'max'
}]
]
}
}
],
......
......@@ -111,7 +111,7 @@
});
setInterval(function () {
for (var i = 0; i < 1; i++) {
for (var i = 0; i < 5; i++) {
xAxisData.shift();
xAxisData.push('类目' + count);
data1.shift();
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册