Skip to content

E
echarts

alon@wen / echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 1
Fork 0
E
echarts

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

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

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

上级 47456544 ee13dc90
隐藏空白更改
内联 并排
Showing with 433 addition and 290 deletion
src/CoordinateSystem.js
浏览文件 @ a54f73c1
......@@ -2,7 +2,7 @@ define(function(require) {
'use strict';
var zrUtil = require('zrender/core/util');
// var zrUtil = require('zrender/core/util');
var coordinateSystemCreators = {};
function CoordinateSystemManager() {
......
src/ExtensionAPI.js
浏览文件 @ a54f73c1
......@@ -15,11 +15,11 @@ define(function(require) {
};
// Mix graphic api
zrUtil.merge(ExtensionAPI.prototype, require('./util/graphic'));
// zrUtil.merge(ExtensionAPI.prototype, require('./util/graphic'));
zrUtil.merge(ExtensionAPI.prototype, require('./util/symbol'));
// zrUtil.merge(ExtensionAPI.prototype, require('./util/symbol'));
ExtensionAPI.prototype.log = require('zrender/core/log');
// ExtensionAPI.prototype.log = require('zrender/core/log');
return ExtensionAPI;
});
\ No newline at end of file
src/chart/bar/BarView.js
浏览文件 @ a54f73c1
......@@ -3,6 +3,7 @@ define(function (require) {
'use strict';
var zrUtil = require('zrender/core/util');
var graphic = require('../../util/graphic');
zrUtil.extend(require('../../model/Model').prototype, require('./barItemStyle'));
......@@ -10,17 +11,17 @@ define(function (require) {
type: 'bar',
render: function (seriesModel, ecModel, api) {
render: function (seriesModel, ecModel) {
var coordinateSystemType = seriesModel.get('coordinateSystem');
if (coordinateSystemType === 'cartesian2d') {
this._renderCartesian(seriesModel, ecModel, api);
this._renderCartesian(seriesModel, ecModel);
}
return this.group;
},
_renderCartesian: function (seriesModel, ecModel, api) {
_renderCartesian: function (seriesModel, ecModel) {
var group = this.group;
var data = seriesModel.getData();
var oldData = this._data;
......@@ -28,30 +29,19 @@ define(function (require) {
data.diff(oldData)
.add(function (dataIndex) {
// 空数据
if (! data.hasValue(dataIndex)) {
if (!data.hasValue(dataIndex)) {
return;
}
var layout = data.getItemLayout(dataIndex);
var itemModel = data.getItemModel(dataIndex);
var rect = new api.Rect({
var rect = new graphic.Rect({
shape: {
x: layout.x,
y: layout.y + layout.height,
width: layout.width
},
style: zrUtil.extend(
itemModel.getModel('itemStyle.normal').getBarItemStyle(),
{
fill: data.getItemVisual(dataIndex, 'color')
}
)
}
});
api.setHoverStyle(
rect, itemModel.getModel('itemStyle.emphasis').getBarItemStyle()
);
data.setItemGraphicEl(dataIndex, rect);
group.add(rect);
......@@ -64,10 +54,11 @@ define(function (require) {
.update(function (newIndex, oldIndex) {
var rect = oldData.getItemGraphicEl(oldIndex);
// 空数据
if (! data.hasValue(newIndex)) {
if (!data.hasValue(newIndex)) {
group.remove(rect);
return;
}
rect.animateTo({
shape: data.getItemLayout(newIndex)
}, 500, 'cubicOut');
......@@ -90,6 +81,19 @@ define(function (require) {
})
.execute();
data.eachItemGraphicEl(function (rect, idx) {
var itemModel = data.getItemModel(idx);
rect.setStyle(zrUtil.defaults(
{
fill: data.getItemVisual(idx, 'color')
},
itemModel.getModel('itemStyle.normal').getBarItemStyle()
));
graphic.setHoverStyle(
rect, itemModel.getModel('itemStyle.emphasis').getBarItemStyle()
);
});
this._data = data;
},
......
src/chart/helper/DataSymbol.js
浏览文件 @ a54f73c1
......@@ -50,8 +50,6 @@ define(function (require) {
this.group = new Group();
this.z = 0;
this.zlevel = 0;
}
DataSymbol.prototype = {
......@@ -73,7 +71,9 @@ define(function (require) {
return;
}
var symbolEl = createSymbol(data, newIdx, enableAnimation);
var symbolEl = createSymbol(
data, newIdx, enableAnimation
);
data.setItemGraphicEl(newIdx, symbolEl);
......@@ -84,12 +84,19 @@ define(function (require) {
var point = data.getItemLayout(newIdx);
var el = oldData.getItemGraphicEl(oldIdx);
// 空数据
// TODO
// Empty data
if (!data.hasValue(newIdx)) {
group.remove(el);
return;
}
// Symbol changed
if (oldData.getItemVisual(newIdx, 'symbol') !== data.getItemVisual(oldIdx, 'symbol')) {
// Remove the old one
group.remove(el);
el = createSymbol(data, newIdx, enableAnimation);
}
// TODO Merge animateTo and attr methods into one
if (enableAnimation) {
el.animateTo({
......@@ -119,6 +126,7 @@ define(function (require) {
});
}
else {
// console.log(oldIdx);
group.remove(el);
}
})
......
src/chart/line/LineSeries.js
浏览文件 @ a54f73c1
......@@ -58,10 +58,14 @@ define(function(require) {
}
},
// smooth: false,
symbol: 'emptyCircle', // 拐点图形类型
symbolSize: 4, // 拐点图形大小
// symbolRotate: null, // 拐点图形旋转控制
showAllSymbol: false // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
// 拐点图形类型
symbol: 'emptyCircle',
// 拐点图形大小
symbolSize: 4,
// 拐点图形旋转控制
// symbolRotate: null,
// 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
showAllSymbol: false
}
});
});
\ No newline at end of file
src/chart/line/LineView.js
浏览文件 @ a54f73c1
......@@ -8,6 +8,7 @@ define(function(require) {
var vector = require('zrender/core/vector');
var DataSymbol = require('../helper/DataSymbol');
var lineAnimationDiff = require('./lineAnimationDiff');
var graphic = require('../../util/graphic');
function isPointsSame(points1, points2) {
if (points1.length !== points2.length) {
......@@ -41,10 +42,9 @@ define(function(require) {
init: function () {
this._dataSymbol = new DataSymbol();
this.group.add(this._dataSymbol.group);
},
render: function (seriesModel, ecModel, api) {
render: function (seriesModel, ecModel) {
var group = this.group;
var data = seriesModel.getData();
var lineStyleNormalModel = seriesModel.getModel('itemStyle.normal.lineStyle');
......@@ -61,7 +61,7 @@ define(function(require) {
};
});
var prevCoordSys = this._coordSys
var prevCoordSys = this._coordSys;
var coordSys = seriesModel.coordinateSystem;
var isCoordSysPolar = coordSys.type === 'polar';
......@@ -80,17 +80,20 @@ define(function(require) {
var polyline = this._polyline;
var enableAnimation = ecModel.get('animation');
dataSymbol.z = seriesModel.get('z') + 1;
// Initialization animation or coordinate system changed
if (
!(polyline
&& prevCoordSys.type === coordSys.type
&& enableAnimation)
) {
// Remove previous created polyline
if (polyline) {
group.remove(polyline);
}
dataSymbol.updateData(data, false);
polyline = new api.Polyline({
polyline = new graphic.Polyline({
shape: {
points: points
},
......@@ -106,8 +109,8 @@ define(function(require) {
// var removeClipPath = zrUtil.bind(polyline.removeClipPath, polyline);
var categoryAxis = coordSys.getAxesByScale('ordinal')[0];
var clipPath = isCoordSysPolar
? this._createPolarClipShape(coordSys, api, enableAnimation, categoryAxis)
: this._createGridClipShape(coordSys, api, enableAnimation, categoryAxis);
? this._createPolarClipShape(coordSys, enableAnimation, categoryAxis)
: this._createGridClipShape(coordSys, enableAnimation, categoryAxis);
polyline.setClipPath(clipPath);
......@@ -118,8 +121,8 @@ define(function(require) {
else {
// Update clipPath
var clipPath = isCoordSysPolar
? this._createPolarClipShape(coordSys, api)
: this._createGridClipShape(coordSys, api);
? this._createPolarClipShape(coordSys)
: this._createGridClipShape(coordSys);
polyline.setClipPath(clipPath);
dataSymbol.updateData(data, false);
......@@ -134,6 +137,10 @@ define(function(require) {
group.add(polyline);
}
// Make sure symbols is on top of line
group.remove(dataSymbol.group);
group.add(dataSymbol.group);
this._data = data;
// Save the coordinate system and data for transition animation when data changed
......@@ -193,11 +200,11 @@ define(function(require) {
}
},
_createGridClipShape: function (cartesian, api, animation, categoryAxis) {
_createGridClipShape: function (cartesian, animation, categoryAxis) {
var xExtent = getAxisExtentWithGap(cartesian.getAxis('x'));
var yExtent = getAxisExtentWithGap(cartesian.getAxis('y'));
var clipPath = new api.Rect({
var clipPath = new graphic.Rect({
shape: {
x: xExtent[0],
y: yExtent[0],
......@@ -207,7 +214,7 @@ define(function(require) {
});
if (animation) {
clipPath.shape[categoryAxis.isHorizontal() ? 'width' : 'height'] = 0;
clipPath.shape[categoryAxis.isHorizontal() ? 'width' : 'height'] = 0;
clipPath.animateTo({
shape: {
width: xExtent[1] - xExtent[0],
......@@ -219,28 +226,31 @@ define(function(require) {
return clipPath;
},
_createPolarClipShape: function (polar, api, animation) {
_createPolarClipShape: function (polar, animation) {
// var angleAxis = polar.getAngleAxis();
var radiusAxis = polar.getRadiusAxis();
var radiusExtent = radiusAxis.getExtent();
var clipPath = new api.Sector({
var clipPath = new graphic.Sector({
shape: {
cx: polar.cx,
cy: polar.cy,
r0: radiusExtent[0],
r: radiusExtent[1],
startAngle: 0,
endAngle: 0
endAngle: Math.PI * 2
}
});
clipPath.animateTo({
shape: {
endAngle: Math.PI * 2
}
}, 1500, animation);
if (animation) {
clipPath.shape.endAngle = 0;
clipPath.animateTo({
shape: {
endAngle: Math.PI * 2
}
}, 1500, animation);
}
return clipPath;
},
......
src/chart/scatter/ScatterSeries.js
浏览文件 @ a54f73c1
......@@ -15,7 +15,7 @@ define(function (require) {
var list = List.fromArray(option.data, this, ecModel);
// Not holding the data anymore so it can be removed in momory
// PENDING
// option.data = null;
option.data = null;
return list;
},
......
src/chart/scatter/ScatterView.js
浏览文件 @ a54f73c1
......@@ -11,7 +11,7 @@ define(function (require) {
this.group.add(this._dataSymbol.group);
},
render: function (seriesModel, ecModel, api) {
render: function (seriesModel, ecModel) {
this._dataSymbol.updateData(
seriesModel.getData(), ecModel.get('animation')
);
......
src/component/angleAxis.js
浏览文件 @ a54f73c1
......@@ -2,6 +2,7 @@ define(function(require) {
'use strict';
var zrUtil = require('zrender/core/util');
var graphic = require('../util/graphic');
var elementList = ['axisLine', 'axisLabel', 'axisTick', 'splitLine', 'splitArea'];
......@@ -24,7 +25,7 @@ define(function(require) {
type: 'angleAxis',
render: function (angleAxisModel, ecModel, api) {
render: function (angleAxisModel, ecModel) {
this.group.removeAll();
var polarModel = ecModel.getComponent('polar', angleAxisModel.get('polarIndex'));
......@@ -40,7 +41,7 @@ define(function(require) {
zrUtil.each(elementList, function (name) {
if (angleAxisModel.get(name +'.show')) {
this['_' + name](angleAxisModel, polar, ticksAngles, radiusExtent, api);
this['_' + name](angleAxisModel, polar, ticksAngles, radiusExtent);
}
}, this);
},
......@@ -48,10 +49,10 @@ define(function(require) {
/**
* @private
*/
_axisLine: function (angleAxisModel, polar, ticksAngles, radiusExtent, api) {
_axisLine: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
var lineStyleModel = angleAxisModel.getModel('axisLine.lineStyle');
var circle = new api.Circle({
var circle = new graphic.Circle({
shape: {
cx: polar.cx,
cy: polar.cy,
......@@ -67,17 +68,17 @@ define(function(require) {
/**
* @private
*/
_axisTick: function (angleAxisModel, polar, ticksAngles, radiusExtent, api) {
_axisTick: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
var tickModel = angleAxisModel.getModel('axisTick');
var tickLen = (tickModel.get('inside') ? -1 : 1) * tickModel.get('length');
var lines = zrUtil.map(ticksAngles, function (tickAngle) {
return new api.Line({
return new graphic.Line({
shape: getAxisLineShape(polar, radiusExtent[1], radiusExtent[1] + tickLen, tickAngle)
});
});
this.group.add(api.mergePath(
this.group.add(graphic.mergePath(
lines, {
style: tickModel.getModel('lineStyle').getLineStyle()
}
......@@ -87,7 +88,7 @@ define(function(require) {
/**
* @private
*/
_axisLabel: function (angleAxisModel, polar, ticksAngles, radiusExtent, api) {
_axisLabel: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
var axis = angleAxisModel.axis;
var labelModel = angleAxisModel.getModel('axisLabel');
......@@ -110,7 +111,7 @@ define(function(require) {
var labelTextBaseline = Math.abs(p[1] - cy) / r < 0.3
? 'middle' : (p[1] > cy ? 'top' : 'bottom');
this.group.add(new api.Text({
this.group.add(new graphic.Text({
style: {
x: p[0],
y: p[1],
......@@ -127,7 +128,7 @@ define(function(require) {
/**
* @private
*/
_splitLine: function (angleAxisModel, polar, ticksAngles, radiusExtent, api) {
_splitLine: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
var splitLineModel = angleAxisModel.getModel('splitLine');
var lineStyleModel = splitLineModel.getModel('lineStyle');
var lineColors = lineStyleModel.get('color');
......@@ -141,7 +142,7 @@ define(function(require) {
for (var i = 0; i < ticksAngles.length; i++) {
var colorIndex = (lineCount++) % lineColors.length;
splitLines[colorIndex] = splitLines[colorIndex] || [];
splitLines[colorIndex].push(new api.Line({
splitLines[colorIndex].push(new graphic.Line({
shape: getAxisLineShape(polar, radiusExtent[0], radiusExtent[1], ticksAngles[i])
}))
}
......@@ -149,7 +150,7 @@ define(function(require) {
// Simple optimization
// Batching the lines if color are the same
for (var i = 0; i < splitLines.length; i++) {
this.group.add(api.mergePath(splitLines[i], {
this.group.add(graphic.mergePath(splitLines[i], {
style: {
stroke: lineColors[i % lineColors.length],
lineType: lineStyleModel.getLineDash(),
......@@ -164,7 +165,7 @@ define(function(require) {
/**
* @private
*/
_splitArea: function (angleAxisModel, polar, ticksAngles, radiusExtent, api) {
_splitArea: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
}
});
......
src/component/axis.js
浏览文件 @ a54f73c1
......@@ -7,6 +7,8 @@ define(function(require) {
'use strict';
var zrUtil = require('zrender/core/util');
var graphic = require('../util/graphic');
var elementList = ['axisLine', 'axisTick', 'splitLine', 'splitArea'];
require('../coord/cartesian/AxisModel');
......@@ -74,7 +76,7 @@ define(function(require) {
*/
_axisLinePosition: 0,
render: function (axisModel, ecModel, api) {
render: function (axisModel, ecModel) {
this.group.removeAll();
......@@ -84,11 +86,11 @@ define(function(require) {
this._axisLinePosition = getAxisLinePosition(axisModel, gridModel);
if (axisModel.get('axisLabel.show')) {
labelInterval = this._axisLabel(axisModel, gridModel, api);
labelInterval = this._axisLabel(axisModel, gridModel);
}
zrUtil.each(elementList, function (name) {
if (axisModel.get(name +'.show')) {
this['_' + name](axisModel, gridModel, api, labelInterval);
this['_' + name](axisModel, gridModel, labelInterval);
}
}, this);
},
......@@ -96,10 +98,9 @@ define(function(require) {
/**
* @param {module:echarts/coord/cartesian/AxisModel} axisModel
* @param {module:echarts/coord/cartesian/GridModel} gridModel
* @param {module:echarts/ExtensionAPI} api
* @private
*/
_axisLabel: function (axisModel, gridModel, api) {
_axisLabel: function (axisModel, gridModel) {
var axis = axisModel.axis;
var labelModel = axisModel.getModel('axisLabel');
......@@ -169,7 +170,7 @@ define(function(require) {
labelTextAlign = labelRotate > 0 ? 'left' : 'right';
}
var textEl = new api.Text({
var textEl = new graphic.Text({
style: {
x: x,
y: y,
......@@ -222,10 +223,9 @@ define(function(require) {
/**
* @param {module:echarts/coord/cartesian/AxisModel} axisModel
* @param {module:echarts/coord/cartesian/GridModel} gridModel
* @param {module:echarts/ExtensionAPI} api
* @private
*/
_axisLine: function (axisModel, gridModel, api) {
_axisLine: function (axisModel, gridModel) {
var axis = axisModel.axis;
var p1 = [];
var p2 = [];
......@@ -244,7 +244,7 @@ define(function(require) {
p1[0] = p2[0] = this._axisLinePosition;
}
this.group.add(new api.Line(api.subPixelOptimizeLine({
this.group.add(new graphic.Line(graphic.subPixelOptimizeLine({
shape: {
x1: p1[0],
y1: p1[1],
......@@ -262,11 +262,10 @@ define(function(require) {
/**
* @param {module:echarts/coord/cartesian/AxisModel} axisModel
* @param {module:echarts/coord/cartesian/GridModel} gridModel
* @param {module:echarts/ExtensionAPI} api
* @param {number|Function} labelInterval
* @private
*/
_axisTick: function (axisModel, gridModel, api, labelInterval) {
_axisTick: function (axisModel, gridModel, labelInterval) {
var axis = axisModel.axis;
var tickModel = axisModel.getModel('axisTick');
......@@ -314,7 +313,7 @@ define(function(require) {
var p2 = [x + offX, y + offY];
// Tick line
tickLines.push(new api.Line(api.subPixelOptimizeLine({
tickLines.push(new graphic.Line(graphic.subPixelOptimizeLine({
shape: {
x1: p1[0],
y1: p1[1],
......@@ -327,7 +326,7 @@ define(function(require) {
silent: true
})));
}
var tickEl = api.mergePath(tickLines, {
var tickEl = graphic.mergePath(tickLines, {
style: lineStyleModel.getLineStyle(),
silent: true,
z: axisModel.get('z')
......@@ -338,11 +337,10 @@ define(function(require) {
/**
* @param {module:echarts/coord/cartesian/AxisModel} axisModel
* @param {module:echarts/coord/cartesian/GridModel} gridModel
* @param {module:echarts/ExtensionAPI} api
* @param {number|Function} labelInterval
* @private
*/
_splitLine: function (axisModel, gridModel, api, labelInterval) {
_splitLine: function (axisModel, gridModel, labelInterval) {
var axis = axisModel.axis;
var splitLineModel = axisModel.getModel('splitLine');
......@@ -386,7 +384,7 @@ define(function(require) {
var colorIndex = (lineCount++) % lineColors.length;
splitLines[colorIndex] = splitLines[colorIndex] || [];
splitLines[colorIndex].push(new api.Line(api.subPixelOptimizeLine({
splitLines[colorIndex].push(new graphic.Line(graphic.subPixelOptimizeLine({
shape: {
x1: p1[0],
y1: p1[1],
......@@ -403,7 +401,7 @@ define(function(require) {
// Simple optimization
// Batching the lines if color are the same
for (var i = 0; i < splitLines.length; i++) {
this.group.add(api.mergePath(splitLines[i], {
this.group.add(graphic.mergePath(splitLines[i], {
style: {
stroke: lineColors[i % lineColors.length],
lineDash: lineStyleModel.getLineDash(),
......@@ -418,11 +416,10 @@ define(function(require) {
/**
* @param {module:echarts/coord/cartesian/AxisModel} axisModel
* @param {module:echarts/coord/cartesian/GridModel} gridModel
* @param {module:echarts/ExtensionAPI} api
* @param {number|Function} labelInterval
* @private
*/
_splitArea: function (axisModel, gridModel, api, labelInterval) {
_splitArea: function (axisModel, gridModel, labelInterval) {
var axis = axisModel.axis;
var splitAreaModel = axisModel.getModel('splitArea');
......@@ -467,7 +464,7 @@ define(function(require) {
var colorIndex = (count++) % areaColors.length;
splitAreaRects[colorIndex] = splitAreaRects[colorIndex] || [];
splitAreaRects[colorIndex].push(new api.Rect({
splitAreaRects[colorIndex].push(new graphic.Rect({
shape: {
x: x,
y: y,
......@@ -484,7 +481,7 @@ define(function(require) {
// Simple optimization
// Batching the rects if color are the same
for (var i = 0; i < splitAreaRects.length; i++) {
this.group.add(api.mergePath(splitAreaRects[i], {
this.group.add(graphic.mergePath(splitAreaRects[i], {
style: {
fill: areaColors[i % areaColors.length]
},
......
src/component/dataZoom/DataZoomView.js
浏览文件 @ a54f73c1
......@@ -13,7 +13,7 @@ define(function (require) {
type: 'dataZoom',
init: function () {
init: function (ecModel, api) {
/**
* @private
* @type {Object}
......@@ -31,6 +31,8 @@ define(function (require) {
* @type {string}
*/
this._orient;
this.api = api;
},
render: function (dataZoomModel, ecModel, api, event) {
......@@ -40,7 +42,6 @@ define(function (require) {
this.dataZoomModel = dataZoomModel;
this.ecModel = ecModel;
this.api = api;
this._orient = dataZoomModel.get('orient');
......@@ -73,7 +74,7 @@ define(function (require) {
var dataZoomModel = this.dataZoomModel;
var layout = this._layout.layout;
this.group.add(new this.api.Rect({
this.group.add(new graphic.Rect({
// FIXME
// zlevel: this.getZlevelBase(),
// z: this.getZBase(),
......@@ -106,7 +107,7 @@ define(function (require) {
};
cfg = zrUtil.merge(cfg, this._layout.layout[name]);
this.group.add(this._updatableShapes[name] = new this.api.Rect(cfg));
this.group.add(this._updatableShapes[name] = new graphic.Rect(cfg));
}, this);
},
......@@ -138,7 +139,7 @@ define(function (require) {
};
cfg = zrUtil.merge(cfg, this._layout.layout.filler);
this.group.add(this._updatableShapes.filler = new this.api.Rect(cfg));
this.group.add(this._updatableShapes.filler = new graphic.Rect(cfg));
},
_renderHandle: function () {
......@@ -161,7 +162,7 @@ define(function (require) {
};
cfg = zrUtil.merge(cfg, this._layout.layout[name]);
this.group.add(this._updatableShapes[name] = new this.api.Rect(cfg));
this.group.add(this._updatableShapes[name] = new graphic.Rect(cfg));
}, this);
},
......
src/component/grid.js
浏览文件 @ a54f73c1
define(function(require) {
'use strict';
var graphic = require('../util/graphic');
require('../coord/cartesian/Grid');
require('./axis');
......@@ -10,10 +12,10 @@ define(function(require) {
type: 'grid',
render: function (gridModel, ecModel, api) {
render: function (gridModel, ecModel) {
this.group.removeAll();
if (gridModel.get('show')) {
this.group.add(new api.Rect({
this.group.add(new graphic.Rect({
shape:gridModel.coordinateSystem.getRect(),
style: {
stroke: gridModel.get('borderColor'),
......
src/component/radiusAxis.js
浏览文件 @ a54f73c1
......@@ -3,6 +3,7 @@ define(function(require) {
var zrUtil = require('zrender/core/util');
var vector = require('zrender/core/vector');
var graphic = require('../util/graphic');
var elementList = ['splitLine', 'splitArea', 'axisLine', 'axisTick', 'axisLabel'];
......@@ -12,7 +13,7 @@ define(function(require) {
type: 'radiusAxis',
render: function (radiusAxisModel, ecModel, api) {
render: function (radiusAxisModel, ecModel) {
this.group.removeAll();
var polarModel = ecModel.getComponent('polar', radiusAxisModel.get('polarIndex'));
......@@ -23,23 +24,18 @@ define(function(require) {
var radiusExtent = radiusAxis.getExtent();
zrUtil.each(elementList, function (name) {
if (radiusAxisModel.get(name +'.show')) {
this['_' + name](radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords, api);
this['_' + name](radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords);
}
}, this);
var z = radiusAxisModel.get('z');
this.group.eachChild(function (child) {
child.z = z;
});
},
/**
* @private
*/
_axisLine: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords, api) {
_axisLine: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords) {
var p1 = polar.coordToPoint([radiusExtent[0], axisAngle]);
var p2 = polar.coordToPoint([radiusExtent[1], axisAngle]);
var arc = new api.Line({
var arc = new graphic.Line({
shape: {
x1: p1[0],
y1: p1[1],
......@@ -55,7 +51,7 @@ define(function(require) {
/**
* @private
*/
_axisTick: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords, api) {
_axisTick: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords) {
var tickModel = radiusAxisModel.getModel('axisTick');
var start = polar.coordToPoint([radiusExtent[0], axisAngle]);
......@@ -75,7 +71,7 @@ define(function(require) {
// Get point on axis
vector.lerp(p1, start, end, tickPosition / len);
vector.scaleAndAdd(p2, p1, direction, tickLen);
return new api.Line({
return new graphic.Line({
shape: {
x1: p1[0],
y1: p1[1],
......@@ -84,7 +80,7 @@ define(function(require) {
}
});
});
this.group.add(api.mergePath(
this.group.add(graphic.mergePath(
lines, {
style: tickModel.getModel('lineStyle').getLineStyle(),
silent: true
......@@ -95,7 +91,7 @@ define(function(require) {
/**
* @private
*/
_axisLabel: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords, api) {
_axisLabel: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords) {
var axis = radiusAxisModel.axis;
var labelModel = radiusAxisModel.getModel('axisLabel');
var textStyleModel = labelModel.getModel('textStyle');
......@@ -121,7 +117,7 @@ define(function(require) {
// Get point on axis
vector.lerp(p, start, end, labelsPositions[i] / len);
vector.scaleAndAdd(p, p, direction, labelMargin);
this.group.add(new api.Text({
this.group.add(new graphic.Text({
style: {
x: p[0],
y: p[1],
......@@ -138,7 +134,7 @@ define(function(require) {
/**
* @private
*/
_splitLine: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords, api) {
_splitLine: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords) {
var splitLineModel = radiusAxisModel.getModel('splitLine');
var lineStyleModel = splitLineModel.getModel('lineStyle');
var lineColors = lineStyleModel.get('color');
......@@ -152,7 +148,7 @@ define(function(require) {
for (var i = 0; i < ticksCoords.length; i++) {
var colorIndex = (lineCount++) % lineColors.length;
splitLines[colorIndex] = splitLines[colorIndex] || [];
splitLines[colorIndex].push(new api.Circle({
splitLines[colorIndex].push(new graphic.Circle({
shape: {
cx: polar.cx,
cy: polar.cy,
......@@ -165,7 +161,7 @@ define(function(require) {
// Simple optimization
// Batching the lines if color are the same
for (var i = 0; i < splitLines.length; i++) {
this.group.add(api.mergePath(splitLines[i], {
this.group.add(graphic.mergePath(splitLines[i], {
style: {
stroke: lineColors[i % lineColors.length],
lineType: lineStyleModel.getLineDash(),
......@@ -180,7 +176,7 @@ define(function(require) {
/**
* @private
*/
_splitArea: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords, api) {
_splitArea: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords) {
}
});
......
src/component/tooltip.js
浏览文件 @ a54f73c1
......@@ -325,6 +325,7 @@ define(function (require) {
},
_getPointerElement: function (coordSys, pointerModel, axisType) {
var z = this._tooltipModel.get('z');
var axisPointers = this._axisPointers;
var key = getAxisPointerKey(coordSys.name, axisType);
if (axisPointers[key]) {
......@@ -345,6 +346,7 @@ define(function (require) {
var el = axisPointers[key] = new graphic[elementType]({
style: style,
z: z,
silent: true
});
......
src/coord/cartesian/Grid.js
浏览文件 @ a54f73c1
......@@ -191,7 +191,7 @@ define(function(require, factory) {
ecModel.eachComponent('yAxis', createAxisCreator('y'), this);
if (! axesCount.x || ! axesCount.y) {
api.log('Grid must has at least one x axis and one y axis');
// api.log('Grid must has at least one x axis and one y axis');
// Roll back
this._axesMap = {};
this._axesList = [];
......
src/coord/polar/polarCreator.js
浏览文件 @ a54f73c1
......@@ -24,7 +24,7 @@ define(function (require) {
ecModel.eachComponent(axisType, function (model) {
if (model.get('polarIndex') === polarIndex) {
if (axisModel) {
api.log('Polar ' + polarIndex + ' has more than one ' + axisType);
// api.log('Polar ' + polarIndex + ' has more than one ' + axisType);
return;
}
axisModel = model;
......@@ -96,7 +96,7 @@ define(function (require) {
var polar = polarList[polarIndex];
if (! polar) {
api.log('Polar configuration not exist for series ' + seriesModel.name + '.');
// api.log('Polar configuration not exist for series ' + seriesModel.name + '.');
return;
}
// Inject polar instance
......
src/echarts.js
浏览文件 @ a54f73c1
......@@ -175,10 +175,10 @@ define(function (require) {
this._coordinateSystem.update(ecModel, this._extensionAPI);
this._doVisualCoding(ecModel);
this._doLayout(ecModel, event);
this._doVisualCoding(ecModel);
this._doRender(ecModel, event);
this._needsUpdate = false;
......
src/model/Model.js
浏览文件 @ a54f73c1
......@@ -41,7 +41,7 @@ define(function (require) {
* 从新的 Option merge
*/
mergeOption: function (option) {
zrUtil.merge(this.option, option);
zrUtil.merge(this.option, option, true);
},
/**
......
src/model/Series.js
浏览文件 @ a54f73c1
......@@ -71,6 +71,7 @@ define(function(require) {
// TODO Merge data?
if (data) {
this._data = data;
this._dataBeforeProcessing = data.cloneShallow();
}
},
......
src/util/graphic.js
浏览文件 @ a54f73c1
......@@ -8,177 +8,187 @@ define(function(require) {
var Path = require('zrender/graphic/Path');
var colorTool = require('zrender/tool/color');
var graphic = {
Group: require('zrender/container/Group'),
Image: require('zrender/graphic/Image'),
Text: require('zrender/graphic/Text'),
Circle: require('zrender/graphic/shape/Circle'),
Sector: require('zrender/graphic/shape/Sector'),
Polygon: require('zrender/graphic/shape/Polygon'),
Polyline: require('zrender/graphic/shape/Polyline'),
Rect: require('zrender/graphic/shape/Rectangle'),
Line: require('zrender/graphic/shape/Line'),
Arc: require('zrender/graphic/shape/Arc'),
/**
* Extend shape with parameters
*/
extendShape: function (opts) {
return Path.extend(opts);
},
/**
* Extend path
*/
extendPath: function (pathData, opts) {
return pathTool.extendFromString(pathData, opts);
},
/**
* Create a path element from path data string
*/
makePath: function (pathData, opts, rect) {
var path = pathTool.createFromString(pathData, opts);
if (rect) {
this.resizePath(path, rect);
}
return path;
},
mergePath: pathTool.mergePath,
/**
* Resize a path to fit the rect
* @param {module:zrender/graphic/Path} path
* @param {Object} rect
*/
resizePath: function (path, rect) {
if (! path.applyTransform) {
return;
}
var pathRect = path.getBoundingRect();
var sx = rect.width / pathRect.width;
var sy = rect.height / pathRect.height;
var m = matrix.create();
matrix.translate(m, m, [rect.x, rect.y]);
matrix.scale(m, m, [sx, sy]);
matrix.translate(m, m, [-pathRect.x, -pathRect.y]);
path.applyTransform(m);
},
/**
* Sub pixel optimize line for canvas
*
* @param {Object} param
* @param {Object} [param.shape]
* @param {number} [param.shape.x1]
* @param {number} [param.shape.y1]
* @param {number} [param.shape.x2]
* @param {number} [param.shape.y2]
* @param {Object} [param.style]
* @param {number} [param.style.lineWidth]
* @return {Object} Modified param
*/
subPixelOptimizeLine: function (param) {
var subPixelOptimize = graphic.subPixelOptimize;
var shape = param.shape;
var lineWidth = param.style.lineWidth;
if (round(shape.x1 * 2) === round(shape.x2 * 2)) {
shape.x1 = shape.x2 = subPixelOptimize(shape.x1, lineWidth, true);
}
if (round(shape.y1 * 2) === round(shape.y2 * 2)) {
shape.y1 = shape.y2 = subPixelOptimize(shape.y1, lineWidth, true);
}
return param;
},
/**
* Sub pixel optimize rect for canvas
*
* @param {Object} param
* @param {Object} [param.shape]
* @param {number} [param.shape.x]
* @param {number} [param.shape.y]
* @param {number} [param.shape.width]
* @param {number} [param.shape.height]
* @param {Object} [param.style]
* @param {number} [param.style.lineWidth]
* @return {Object} Modified param
*/
subPixelOptimizeRect: function (param) {
var subPixelOptimize = graphic.subPixelOptimize;
var shape = param.shape;
var lineWidth = param.style.lineWidth;
var originX = shape.x;
var originY = shape.y;
var originWidth = shape.width;
var originHeight = shape.height;
shape.x = subPixelOptimize(shape.x, lineWidth, true);
shape.y = subPixelOptimize(shape.y, lineWidth, true);
shape.width = Math.max(
subPixelOptimize(originX + originWidth, lineWidth, false) - shape.x,
originWidth === 0 ? 0 : 1
);
shape.height = Math.max(
subPixelOptimize(originY + originHeight, lineWidth, false) - shape.y,
originHeight === 0 ? 0 : 1
);
return param;
},
/**
* Sub pixel optimize for canvas
*
* @param {number} position Coordinate, such as x, y
* @param {number} lineWidth Should be nonnegative integer.
* @param {boolean=} positiveOrNegative Default false (negative).
* @return {number} Optimized position.
*/
subPixelOptimize: function (position, lineWidth, positiveOrNegative) {
// Assure that (position + lineWidth / 2) is near integer edge,
// otherwise line will be fuzzy in canvas.
var doubledPosition = round(position * 2);
return (doubledPosition + round(lineWidth)) % 2 === 0
? doubledPosition / 2
: (doubledPosition + (positiveOrNegative ? 1 : -1)) / 2;
},
/**
* Set hover style of element
* @param {module:zrender/graphic/Displayable} el
* @param {Object} hoverStyle
*/
setHoverStyle: function (el, hoverStyle) {
var stroke = el.style.stroke;
var fill = el.style.fill;
hoverStyle = hoverStyle || {};
hoverStyle.fill = hoverStyle.fill || colorTool.lift(fill, -0.1);
hoverStyle.stroke = hoverStyle.stroke || colorTool.lift(stroke, -0.1);
var normalStyle = {};
for (var name in hoverStyle) {
normalStyle[name] = el.style[name];
}
el.on('mouseover', function () {
el.setStyle(hoverStyle);
}).on('mouseout', function () {
el.setStyle(normalStyle);
});
var graphic = {};
graphic.Group = require('zrender/container/Group');
graphic.Image = require('zrender/graphic/Image');
graphic.Text = require('zrender/graphic/Text');
graphic.Circle = require('zrender/graphic/shape/Circle');
graphic.Sector = require('zrender/graphic/shape/Sector');
graphic.Polygon = require('zrender/graphic/shape/Polygon');
graphic.Polyline = require('zrender/graphic/shape/Polyline');
graphic.Rect = require('zrender/graphic/shape/Rectangle');
graphic.Line = require('zrender/graphic/shape/Line');
graphic.Arc = require('zrender/graphic/shape/Arc');
/**
* Extend shape with parameters
*/
graphic.extendShape = function (opts) {
return Path.extend(opts);
};
/**
* Extend path
*/
graphic.extendPath = function (pathData, opts) {
return pathTool.extendFromString(pathData, opts);
};
/**
* Create a path element from path data string
*/
graphic.makePath = function (pathData, opts, rect) {
var path = pathTool.createFromString(pathData, opts);
if (rect) {
this.resizePath(path, rect);
}
return path;
};
graphic.mergePath = pathTool.mergePath,
/**
* Resize a path to fit the rect
* @param {module:zrender/graphic/Path} path
* @param {Object} rect
*/
graphic.resizePath = function (path, rect) {
if (! path.applyTransform) {
return;
}
var pathRect = path.getBoundingRect();
var sx = rect.width / pathRect.width;
var sy = rect.height / pathRect.height;
var m = matrix.create();
matrix.translate(m, m, [rect.x, rect.y]);
matrix.scale(m, m, [sx, sy]);
matrix.translate(m, m, [-pathRect.x, -pathRect.y]);
path.applyTransform(m);
};
/**
* Sub pixel optimize line for canvas
*
* @param {Object} param
* @param {Object} [param.shape]
* @param {number} [param.shape.x1]
* @param {number} [param.shape.y1]
* @param {number} [param.shape.x2]
* @param {number} [param.shape.y2]
* @param {Object} [param.style]
* @param {number} [param.style.lineWidth]
* @return {Object} Modified param
*/
graphic.subPixelOptimizeLine = function (param) {
var subPixelOptimize = graphic.subPixelOptimize;
var shape = param.shape;
var lineWidth = param.style.lineWidth;
if (round(shape.x1 * 2) === round(shape.x2 * 2)) {
shape.x1 = shape.x2 = subPixelOptimize(shape.x1, lineWidth, true);
}
if (round(shape.y1 * 2) === round(shape.y2 * 2)) {
shape.y1 = shape.y2 = subPixelOptimize(shape.y1, lineWidth, true);
}
return param;
};
/**
* Sub pixel optimize rect for canvas
*
* @param {Object} param
* @param {Object} [param.shape]
* @param {number} [param.shape.x]
* @param {number} [param.shape.y]
* @param {number} [param.shape.width]
* @param {number} [param.shape.height]
* @param {Object} [param.style]
* @param {number} [param.style.lineWidth]
* @return {Object} Modified param
*/
graphic.subPixelOptimizeRect = function (param) {
var subPixelOptimize = graphic.subPixelOptimize;
var shape = param.shape;
var lineWidth = param.style.lineWidth;
var originX = shape.x;
var originY = shape.y;
var originWidth = shape.width;
var originHeight = shape.height;
shape.x = subPixelOptimize(shape.x, lineWidth, true);
shape.y = subPixelOptimize(shape.y, lineWidth, true);
shape.width = Math.max(
subPixelOptimize(originX + originWidth, lineWidth, false) - shape.x,
originWidth === 0 ? 0 : 1
);
shape.height = Math.max(
subPixelOptimize(originY + originHeight, lineWidth, false) - shape.y,
originHeight === 0 ? 0 : 1
);
return param;
};
/**
* Sub pixel optimize for canvas
*
* @param {number} position Coordinate, such as x, y
* @param {number} lineWidth Should be nonnegative integer.
* @param {boolean=} positiveOrNegative Default false (negative).
* @return {number} Optimized position.
*/
graphic.subPixelOptimize = function (position, lineWidth, positiveOrNegative) {
// Assure that (position + lineWidth / 2) is near integer edge,
// otherwise line will be fuzzy in canvas.
var doubledPosition = round(position * 2);
return (doubledPosition + round(lineWidth)) % 2 === 0
? doubledPosition / 2
: (doubledPosition + (positiveOrNegative ? 1 : -1)) / 2;
};
function onElementMouseOver() {
this.setStyle(this.__hoverStyle);
}
function onElementMouseOut() {
this.setStyle(this.__normalStyle);
}
var MOUSEOVER = 'mouseover';
var MOUSEOUT = 'mouseover';
/**
* Set hover style of element
* @param {module:zrender/graphic/Displayable} el
* @param {Object} hoverStyle
*/
graphic.setHoverStyle = function (el, hoverStyle) {
var stroke = el.style.stroke;
var fill = el.style.fill;
hoverStyle = hoverStyle || {};
hoverStyle.fill = hoverStyle.fill || colorTool.lift(fill, -0.1);
hoverStyle.stroke = hoverStyle.stroke || colorTool.lift(stroke, -0.1);
var normalStyle = {};
for (var name in hoverStyle) {
normalStyle[name] = el.style[name];
}
el.__normalStyle = normalStyle;
el.__hoverStyle = hoverStyle;
// Remove previous bound handlers
el.off(MOUSEOVER, onElementMouseOver);
el.off(MOUSEOUT, onElementMouseOut);
el.on(MOUSEOVER, onElementMouseOver);
el.on(MOUSEOUT, onElementMouseOut);
};
return graphic;
......
test/dynamicData.html 0 → 100644
浏览文件 @ a54f73c1
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script>
require([
'echarts',
'echarts/chart/line',
'echarts/component/legend',
'echarts/component/grid'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var xAxisData = [];
var data1 = [];
var count = 0;
for (; count < 100; count++) {
xAxisData.push('类目' + count);
data1.push(+Math.random().toFixed(3));
}
var itemStyle = {
normal: {
borderColor: 'white',
borderWidth: 3,
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 5,
// shadowColor: 'rgba(0, 0, 0, 0.4)',
lineStyle: {
width: 3,
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 5,
// shadowColor: 'rgba(0, 0, 0, 0.4)'
}
}
};
chart.setOption({
legend: {
data: ['line']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
// animation: false,
xAxis: {
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
data: xAxisData,
// boundaryGap: false
},
yAxis: {
splitLine: {
// show: false
}
},
series: [{
name: 'line',
type: 'line',
stack: 'all',
symbol: 'circle',
symbolSize: 10,
data: data1,
itemStyle: itemStyle
}]
});
setInterval(function () {
data1.shift();
data1.push(+Math.random().toFixed(3));
xAxisData.shift();
xAxisData.push('类目' + count++);
chart.setOption({
xAxis: {
data: xAxisData
},
series: [{
name: 'line',
data: data1
}]
});
}, 100);
})
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或