Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

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

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

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

上级 c995707f ffa65bb9
隐藏空白更改
内联 并排
Showing with 1434 addition and 457 deletion
src/chart/bar/BarView.js
浏览文件 @ 6b3d744b
......@@ -26,6 +26,13 @@ define(function (require) {
var data = seriesModel.getData();
var oldData = this._data;
var cartesian = seriesModel.coordinateSystem;
var baseAxis = cartesian.getBaseAxis();
var isInverse = cartesian.getOtherAxis(baseAxis).inverse;
var isHorizontal = baseAxis.isHorizontal();
var enableAnimation = ecModel.get('animation');
data.diff(oldData)
.add(function (dataIndex) {
// 空数据
......@@ -35,11 +42,7 @@ define(function (require) {
var layout = data.getItemLayout(dataIndex);
var rect = new graphic.Rect({
shape: {
x: layout.x,
y: layout.y + layout.height,
width: layout.width
}
shape: zrUtil.extend({}, layout)
});
data.setItemGraphicEl(dataIndex, rect);
......@@ -47,9 +50,16 @@ define(function (require) {
group.add(rect);
// Animation
rect.animateTo({
shape: layout
}, 1000, 300 * dataIndex / data.count(), 'cubicOut');
if (enableAnimation) {
var rectShape = rect.shape;
var animateProperty = isHorizontal ? 'height' : 'width';
var animateTarget = {};
rectShape[animateProperty] = 0;
animateTarget[animateProperty] = layout[animateProperty];
rect.animateTo({
shape: animateTarget
}, 1000, 300 * dataIndex / data.count(), 'cubicOut');
}
})
.update(function (newIndex, oldIndex) {
var rect = oldData.getItemGraphicEl(oldIndex);
......@@ -70,6 +80,7 @@ define(function (require) {
})
.remove(function (idx) {
var el = oldData.getItemGraphicEl(idx);
el.style.text = '';
el.animateTo({
shape: {
width: 0
......@@ -83,12 +94,30 @@ define(function (require) {
data.eachItemGraphicEl(function (rect, idx) {
var itemModel = data.getItemModel(idx);
var labelModel = itemModel.getModel('itemStyle.normal.label');
var color = data.getItemVisual(idx, 'color');
var layout = data.getItemLayout(idx);
rect.setStyle(zrUtil.defaults(
{
fill: data.getItemVisual(idx, 'color')
fill: color
},
itemModel.getModel('itemStyle.normal').getBarItemStyle()
));
if (labelModel.get('show')) {
var labelPosition = labelModel.get('position') || 'inside';
// FIXME
var labelColor = labelPosition === 'inside' ? 'white' : color;
var labelPositionOutside = isHorizontal
? (layout.height > 0 ? 'bottom' : 'top')
: (layout.width > 0 ? 'left' : 'right');
rect.setStyle({
text: data.getRawValue(idx),
textFont: labelModel.getModel('textStyle').getFont(),
textPosition: labelPosition === 'outside' ? labelPositionOutside : 'inside',
textFill: labelColor
});
}
graphic.setHoverStyle(
rect, itemModel.getModel('itemStyle.emphasis').getBarItemStyle()
);
......@@ -101,6 +130,8 @@ define(function (require) {
if (this._data) {
var group = this.group;
this._data.eachItemGraphicEl(function (el) {
// Not show text when animating
el.style.text = '';
el.animateTo({
shape: {
width: 0
......
src/chart/helper/DataSymbol.js
浏览文件 @ 6b3d744b
......@@ -2,9 +2,24 @@ define(function (require) {
var zrUtil = require('zrender/core/util');
var Group = require('zrender/container/Group');
var symbolCreators = require('../../util/symbol');
var symbolUtil = require('../../util/symbol');
var graphic = require('../../util/graphic');
function normalizeSymbolSize(symbolSize) {
if (!zrUtil.isArray(symbolSize)) {
symbolSize = [+symbolSize, +symbolSize];
}
return symbolSize;
}
function isAroundEqual(a, b) {
return Math.abs(a - b) < 1e-4;
}
function isSymbolSizeSame(a, b) {
return isAroundEqual(a[0], b[0]) && isAroundEqual(a[1], b[1]);
}
function createSymbol(data, idx, enableAnimation) {
var point = data.getItemLayout(idx);
var color = data.getItemVisual(idx, 'color');
......@@ -16,41 +31,36 @@ define(function (require) {
return;
}
var symbolEl = symbolCreators.createSymbol(
symbolType, -0.5, -0.5, 1, 1, color
symbolSize = normalizeSymbolSize(symbolSize);
var x = -symbolSize[0] / 2;
var y = -symbolSize[1] / 2;
var w = symbolSize[0];
var h = symbolSize[1];
var symbolEl = symbolUtil.createSymbol(
symbolType, x, y, w, h, color
);
symbolEl.position = point;
symbolEl.z2 = 100;
if (enableAnimation) {
symbolEl.scale = [0.1, 0.1];
symbolEl.scale = [0, 0];
symbolEl.animateTo({
scale: [symbolSize, symbolSize]
scale: [1, 1]
}, 500);
// symbolEl
// .on('mouseover', function () {
// this.animateTo({
// scale: [symbolSize * 1.4, symbolSize * 1.4]
// }, 400, 'elasticOut');
// })
// .on('mouseout', function () {
// this.animateTo({
// scale: [symbolSize, symbolSize]
// }, 400, 'elasticOut');
// });
}
else {
symbolEl.scale = [symbolSize, symbolSize];
symbolEl.scale = [1, 1];
}
return symbolEl;
}
function DataSymbol() {
this.group = new Group();
}
......@@ -85,45 +95,62 @@ define(function (require) {
})
.update(function (newIdx, oldIdx) {
var el = oldData.getItemGraphicEl(oldIdx);
// Empty data
if (!data.hasValue(newIdx)) {
group.remove(el);
return;
}
var symbolSize = data.getItemVisual(newIdx, 'symbolSize');
var symbolSize = normalizeSymbolSize(
data.getItemVisual(newIdx, 'symbolSize')
);
var point = data.getItemLayout(newIdx);
var symbolType = data.getItemVisual(newIdx, 'symbol');
// Symbol changed
if (oldData.getItemVisual(newIdx, 'symbol') !== data.getItemVisual(oldIdx, 'symbol')) {
if (oldData.getItemVisual(oldIdx, 'symbol') !== symbolType) {
// Remove the old one
el && group.remove(el);
el = createSymbol(data, newIdx, enableAnimation);
}
// Disable symbol by setting `symbol: 'none'`
if (!el) {
return;
}
// Color changed
var newColor = data.getItemVisual(newIdx, 'color');
if (oldData.getItemVisual(newIdx, 'color') !== newColor) {
el.setStyle('fill', newColor);
}
// TODO Merge animateTo and attr methods into one
if (enableAnimation) {
el.animateTo({
scale: [symbolSize, symbolSize],
position: point
}, 300, 'cubicOut');
// Disable symbol by setting `symbol: 'none'`
if (!el) {
return;
}
}
else {
el.attr({
scale: [symbolSize, symbolSize],
position: point.slice()
});
// Update animation
if (!el) {
return;
}
var newTarget = {};
if (!isSymbolSizeSame(
symbolSize, normalizeSymbolSize(
oldData.getItemVisual(oldIdx, 'symbolSize')
)
)) {
// FIXME symbol created with pathStr has symbolSizeChanged
newTarget = symbolUtil.getSymbolShape(
symbolType,
-symbolSize[0] / 2, -symbolSize[1] / 2,
symbolSize[0], symbolSize[1]
) || {};
}
var newColor = data.getItemVisual(newIdx, 'color');
el.setColor(newColor);
// TODO Merge animateTo and attr methods into one
newTarget.position = point.slice();
if (!isAroundEqual(el.scale[0], 1)) { // May have scale 0
newTarget.scale = [1, 1];
}
if (enableAnimation) {
el.animateTo(newTarget, 300, 'cubicOut');
}
else {
// May still have animation. Must stop
el.stopAnimation();
el.attr(newTarget);
}
}
data.setItemGraphicEl(newIdx, el);
......@@ -149,22 +176,33 @@ define(function (require) {
// Update common properties
data.eachItemGraphicEl(function (el, idx) {
var itemModel = data.getItemModel(idx);
var labelModel = itemModel.getModel('itemStyle.normal.label');
var color = data.getItemVisual(idx, 'color');
zrUtil.extend(
el.style,
itemModel.getModel('itemStyle.normal').getItemStyle(['color'])
);
if (labelModel.get('show')) {
var labelPosition = labelModel.get('position') || 'inside';
var labelColor = labelPosition === 'inside' ? 'white' : color;
// Text use the value of last dimension
var lastDim = data.dimensions[data.dimensions.length - 1];
el.setStyle({
// FIXME
text: data.get(lastDim, idx),
textFont: labelModel.getModel('textStyle').getFont(),
textPosition: labelPosition,
textFill: labelColor
});
}
graphic.setHoverStyle(
el,
itemModel.getModel('itemStyle.emphasis').getItemStyle()
);
var symbolSize = data.getItemVisual(idx, 'symbolSize');
// Adjust the line width
el.__lineWidth = el.__lineWidth || el.style.lineWidth;
el.style.lineWidth = el.__lineWidth / symbolSize;
}, this);
this._data = data;
......
src/chart/helper/createListFromArray.js
浏览文件 @ 6b3d744b
......@@ -19,7 +19,7 @@ define(function(require) {
if (xAxisModel.get('type') === 'category') {
dimensions = [{
name: 'x',
type: 'int'
type: 'ordinal'
}, {
name: 'y',
stackable: true
......@@ -30,7 +30,7 @@ define(function(require) {
else if (yAxisModel.get('type') === 'category') {
dimensions = [{
name: 'y',
type: 'int'
type: 'ordinal'
}, {
name: 'x',
stackable: true
......@@ -59,7 +59,7 @@ define(function(require) {
if (angleAxisModel.get('type') === 'category') {
dimensions = [{
name: 'angle',
type: 'int'
type: 'ordinal'
}, {
name: 'radius',
stackable: true
......@@ -70,7 +70,7 @@ define(function(require) {
else if (radiusAxisModel.get('type') === 'category') {
dimensions = [{
name: 'radius',
type: 'int'
type: 'ordinal'
}, {
name: 'angle',
stackable: true
......
src/chart/line/Area.js
浏览文件 @ 6b3d744b
define(function(require) {
'use strict';
var smoothBezier = require('zrender/graphic/helper/smoothBezier');
return require('zrender/graphic/Path').extend({
type: 'ec-area',
......@@ -17,7 +19,7 @@ define(function(require) {
var i = 0;
var len = points.length;
while (i < points.length) {
while (i < len) {
for (var k = i; k < len; k++) {
var p = points[k];
if (p == null || isNaN(p[0]) || isNaN(p[1])) {
......
src/chart/line/LineView.js
浏览文件 @ 6b3d744b
......@@ -16,8 +16,8 @@ define(function(require) {
return;
}
for (var i = 0; i < points1.length; i++) {
var p1 = points1[i].point;
var p2 = points2[i].point;
var p1 = points1[i];
var p2 = points2[i];
if (p1[0] !== p2[0] || p1[1] !== p2[1]) {
return;
}
......@@ -37,20 +37,9 @@ define(function(require) {
return extent;
}
function getDataArray(coordSys, data, points) {
var dimensions = coordSys.type === 'cartesian2d' ? ['x', 'y'] : ['radius', 'angle'];
return data.map(dimensions, function (x, y, idx) {
return {
x: x,
y: y,
point: points[idx],
name: data.getName(idx),
idx: idx,
rawIdx: data.getRawIndex(idx)
};
});
function sign(val) {
return val >= 0 ? 1 : -1;
}
/**
* @param {module:echarts/coord/cartesian/Cartesian2D|module:echarts/coord/polar/Polar} coordSys
* @param {module:echarts/data/List} data
......@@ -58,22 +47,33 @@ define(function(require) {
* @private
*/
function getStackedOnPoints(coordSys, data, points) {
var stackedOnData = data.stackedOn;
if (stackedOnData) {
return stackedOnData.map(stackedOnData.getItemLayout, true);
}
else {
var valueAxis = coordSys.getOtherAxis(coordSys.getBaseAxis());
var valueStart = valueAxis.getExtent()[0];
var dim = valueAxis.dim;
var baseCoordOffset = dim === 'x' || dim === 'radius' ? 1 : 0;
return zrUtil.map(points, function (point, idx) {
var pt = [];
pt[baseCoordOffset] = point[baseCoordOffset];
pt[1 - baseCoordOffset] = valueStart;
return pt;
});
}
var baseAxis = coordSys.getBaseAxis();
var valueAxis = coordSys.getOtherAxis(baseAxis);
var valueAxisStart = baseAxis.onZero
? valueAxis.dataToCoord(0) : valueAxis.getExtent()[0];
var valueDim = valueAxis.dim;
var baseCoordOffset = 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;
}
}
var pt = [];
pt[baseCoordOffset] = points[idx][baseCoordOffset];
pt[1 - baseCoordOffset] = stackedOnSameSign
? stackedOnSameSign.getItemLayout(idx)[1 - baseCoordOffset]
: valueAxisStart;
return pt;
}, true);
}
return require('../../echarts').extendChartView({
......@@ -81,7 +81,9 @@ define(function(require) {
type: 'line',
init: function () {
this._dataSymbol = new DataSymbol();
var dataSymbol = new DataSymbol();
this.group.add(dataSymbol.group);
this._dataSymbol = dataSymbol;
},
render: function (seriesModel, ecModel) {
......@@ -92,7 +94,6 @@ define(function(require) {
var areaStyleModel = seriesModel.getModel('itemStyle.normal.areaStyle');
var points = data.map(data.getItemLayout, true);
var dataArray = getDataArray(coordSys, data, points);
var isCoordSysPolar = coordSys.type === 'polar';
var prevCoordSys = this._coordSys;
......@@ -108,14 +109,6 @@ define(function(require) {
coordSys, data, points
);
var stackedOnDataArray = data.stackedOn ? getDataArray(
coordSys, data.stackedOn, stackedOnPoints
) : zrUtil.map(stackedOnPoints, function (pt) {
return {
point: pt
};
});
// Initialization animation or coordinate system changed
if (
!(polyline
......@@ -148,11 +141,11 @@ 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 (!isPointsSame(this._dataArray, dataArray)) {
// if (!isDataSame(this._data, data)) {
this._updateAnimation(
data, dataArray, stackedOnDataArray, coordSys
data, stackedOnPoints, coordSys
);
}
// }
// Add back
group.add(polyline);
group.add(polygon);
......@@ -167,7 +160,7 @@ define(function(require) {
));
if (polygon) {
polygon.style.opacity = 0.7;
polygon.setStyle(zrUtil.extend(
polygon.setStyle(zrUtil.defaults(
areaStyleModel.getAreaStyle(),
{
fill: data.getVisual('color'),
......@@ -176,16 +169,11 @@ define(function(require) {
));
}
// 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
this._dataArray = dataArray;
this._stackedOnDataArray = stackedOnDataArray;
// Save the coordinate system for transition animation when data changed
this._coordSys = coordSys;
this._stackedOnPoints = stackedOnPoints;
!isCoordSysPolar && !seriesModel.get('showAllSymbol')
&& this._updateSymbolDisplay(data, coordSys);
......@@ -209,7 +197,8 @@ define(function(require) {
shape: {
points: points
},
silent: true
silent: true,
z2: 10
});
var clipPath = this._createClipShape(coordSys, hasAnimation);
......@@ -272,13 +261,13 @@ define(function(require) {
/**
* @private
*/
_updateAnimation: function (data, dataArray, stackedOnDataArray, coordSys) {
_updateAnimation: function (data, stackedOnPoints, coordSys) {
var polyline = this._polyline;
var polygon = this._polygon;
var diff = lineAnimationDiff(
this._dataArray, dataArray,
this._stackedOnDataArray, stackedOnDataArray,
this._data, data,
this._stackedOnPoints, stackedOnPoints,
this._coordSys, coordSys
);
polyline.shape.points = diff.current;
......@@ -325,10 +314,9 @@ define(function(require) {
for (var i = 0; i < addedDataIndices.length; i++) {
var el = data.getItemGraphicEl(addedDataIndices[i]);
if (el) {
var oldScale = el.scale;
el.scale = [1, 1];
el.scale = [0, 0];
el.animateTo({
scale: oldScale
scale: [1, 1]
}, 300, 300, 'cubicOut');
}
}
......@@ -372,7 +360,7 @@ define(function(require) {
width: xExtent[1] - xExtent[0],
height: yExtent[1] - yExtent[0]
}
}, 1500, animation);
}, 1500);
}
return clipPath;
......
src/chart/line/lineAnimationDiff.js
浏览文件 @ 6b3d744b
......@@ -6,39 +6,60 @@ define(function (require) {
return a.name === b.name;
}
function getStackedOnPoint(coordSys, stackedItem, item) {
if ('x' in stackedItem) {
return coordSys.dataToPoint([stackedItem.x, stackedItem.y]);
}
else {
var baseAxis = coordSys.getBaseAxis();
var valueAxis = coordSys.getOtherAxis(baseAxis);
var valueStart = valueAxis.getExtent()[0];
var dim = valueAxis.dim;
dim === 'radius' && (dim = 'x');
dim === 'angle' && (dim = 'y');
var baseCoordOffset = dim === 'x' ? 1 : 0;
var pt = [];
pt[baseCoordOffset] = baseAxis.dataToCoord(item[dim === 'y' ? 'x' : 'y']);
pt[1 - baseCoordOffset] = valueStart;
return pt;
function sign(val) {
return val >= 0 ? 1 : -1;
}
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 valueDim = valueAxis.dim;
var baseCoordOffset = 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;
}
}
var pt = [];
pt[baseCoordOffset] = data.getItemLayout(idx)[baseCoordOffset];
pt[1 - baseCoordOffset] = stackedOnSameSign
? stackedOnSameSign.getItemLayout(idx)[1 - baseCoordOffset]
: valueAxisStart;
return pt;
}
return function (oldData, newData, oldStackedData, newStackedData, oldCoordSys, newCoordSys) {
return function (
oldData, newData,
oldStackedOnPoints, newStackedOnPoints,
oldCoordSys, newCoordSys
) {
var oldPoints = [];
var newPoints = [];
var newNameList = newData.map(newData.getName);
var oldNameList = oldData.map(oldData.getName);
var currPoints = [];
var nextPoints = [];
// Points for stacking base line
var oldStackedPoints = [];
var newStackedPoints = [];
var currStackedPoints = [];
var nextStackedPoints = [];
var status = [];
var sortedIndices = [];
var rawIndices = [];
// FIXME One data ?
var diff = arrayDiff(oldData, newData, nameCompare);
var diff = arrayDiff(oldNameList, newNameList);
for (var i = 0; i < diff.length; i++) {
var diffItem = diff[i];
......@@ -48,46 +69,49 @@ define(function (require) {
// Which is in case remvoing or add more than one data in the tail or head
switch (diffItem.cmd) {
case '=':
oldPoints.push(oldData[diffItem.idx].point);
newPoints.push(newData[diffItem.idx1].point);
currPoints.push(oldData.getItemLayout(diffItem.idx));
nextPoints.push(newData.getItemLayout(diffItem.idx1));
oldStackedPoints.push(oldStackedData[diffItem.idx].point);
newStackedPoints.push(newStackedData[diffItem.idx1].point);
currStackedPoints.push(oldStackedOnPoints[diffItem.idx]);
nextStackedPoints.push(newStackedOnPoints[diffItem.idx1]);
rawIndices.push(newData[diffItem.idx1].rawIdx);
rawIndices.push(newData.getRawIndex(diffItem.idx));
break;
case '+':
var newDataItem = newData[diffItem.idx];
var newStackedDataItem = newStackedData[diffItem.idx];
oldPoints.push(
oldCoordSys.dataToPoint([newDataItem.x, newDataItem.y])
var idx = diffItem.idx;
currPoints.push(
oldCoordSys.dataToPoint([
newData.get('x', idx), newData.get('y', idx)
])
);
newPoints.push(newDataItem.point);
nextPoints.push(newData.getItemLayout(idx));
oldStackedPoints.push(
getStackedOnPoint(oldCoordSys, newStackedDataItem, newDataItem)
currStackedPoints.push(
getStackedOnPoint(oldCoordSys, newData, idx)
);
newStackedPoints.push(newStackedDataItem.point);
nextStackedPoints.push(newStackedOnPoints[idx]);
rawIndices.push(newDataItem.rawIdx);
rawIndices.push(newData.getRawIndex(idx));
break;
case '-':
var oldDataItem = oldData[diffItem.idx];
var oldStackedDataItem = oldStackedData[diffItem.idx];
var idx = diffItem.idx;
var rawIndex = oldData.getRawIndex(idx);
// Data is replaced. In the case of dynamic data queue
// FIXME FIXME FIXME
if (oldDataItem.rawIdx !== diffItem.idx) {
oldPoints.push(oldDataItem.point);
newPoints.push(newCoordSys.dataToPoint([oldDataItem.x, oldDataItem.y]));
oldStackedPoints.push(oldStackedDataItem.point);
newStackedPoints.push(
getStackedOnPoint(newCoordSys, oldStackedDataItem, oldDataItem)
if (rawIndex !== idx) {
currPoints.push(oldData.getItemLayout(idx));
nextPoints.push(newCoordSys.dataToPoint([
oldData.get('x', idx), oldData.get('y', idx)
]));
currStackedPoints.push(oldStackedOnPoints[idx]);
nextStackedPoints.push(
getStackedOnPoint(
newCoordSys, newData, idx
)
);
rawIndices.push(oldDataItem.rawIdx);
rawIndices.push(rawIndex);
}
else {
pointAdded = false;
......@@ -107,30 +131,30 @@ define(function (require) {
return rawIndices[a] - rawIndices[b];
});
var sortedOldPoints = [];
var sortedNewPoints = [];
var sortedCurrPoints = [];
var sortedNextPoints = [];
var sortedOldStackedPoints = [];
var sortedNewStackedPoints = [];
var sortedCurrStackedPoints = [];
var sortedNextStackedPoints = [];
var sortedStatus = [];
for (var i = 0; i < sortedIndices.length; i++) {
var idx = sortedIndices[i];
sortedOldPoints[i] = oldPoints[idx];
sortedNewPoints[i] = newPoints[idx];
sortedCurrPoints[i] = currPoints[idx];
sortedNextPoints[i] = nextPoints[idx];
sortedOldStackedPoints[i] = oldStackedPoints[idx];
sortedNewStackedPoints[i] = newStackedPoints[idx];
sortedCurrStackedPoints[i] = currStackedPoints[idx];
sortedNextStackedPoints[i] = nextStackedPoints[idx];
sortedStatus[i] = status[idx];
}
return {
current: sortedOldPoints,
next: sortedNewPoints,
current: sortedCurrPoints,
next: sortedNextPoints,
stackedOnCurrent: sortedOldStackedPoints,
stackedOnNext: sortedNewStackedPoints,
stackedOnCurrent: sortedCurrStackedPoints,
stackedOnNext: sortedNextStackedPoints,
status: sortedStatus
};
......
src/chart/pie.js
浏览文件 @ 6b3d744b
......@@ -9,7 +9,7 @@ define(function (require) {
echarts.registerVisualCoding('chart', require('./pie/pieVisual'));
echarts.registerLayout(zrUtil.curry(
require('../layout/pie'), 'pie'
require('./pie/pieLayout'), 'pie'
));
echarts.registerProcessor(require('./pie/dataItemFilter'));
......
src/chart/pie/PieSeries.js
浏览文件 @ 6b3d744b
......@@ -89,6 +89,7 @@ define(function(require) {
minAngle: 0,
// 选中是扇区偏移量
selectedOffset: 10,
avoidLabelOverlap: true,
// 选择模式，默认关闭，可选single，multiple
// selectedMode: false,
// 南丁格尔玫瑰图模式，'radius'（半径） | 'area'（面积）
......@@ -107,7 +108,10 @@ define(function(require) {
},
labelLine: {
show: true,
// 引导线两段中的第一段长度
length: 20,
// 引导线两段中的第二段长度
length2: 5,
lineStyle: {
// color: 各异,
width: 1,
......
src/chart/pie/PieView.js
浏览文件 @ 6b3d744b
......@@ -8,17 +8,20 @@ define(function (require) {
var dataIndex = this.dataIndex;
var name = data.getName(dataIndex);
updateSelected(this, seriesModel.toggleSelected(name));
updateSelected(this,
seriesModel.toggleSelected(name),
seriesModel.get('selectedOffset')
);
}
function updateSelected(el, isSelected) {
function updateSelected(el, isSelected, selectedOffset) {
var shape = el.shape;
var midAngle = (shape.startAngle + shape.endAngle) / 2;
var dx = Math.cos(midAngle);
var dy = (shape.clockwise ? 1 : -1) * Math.sin(midAngle);
var offset = isSelected ? shape.r * 0.1 : 0;
var offset = isSelected ? selectedOffset : 0;
// animateTo will stop revious animation like update transition
el.animate()
......@@ -28,13 +31,60 @@ define(function (require) {
.start('bounceOut');
}
function createSectorAndLabel(layout, text, hasAnimation) {
var shape = zrUtil.extend({}, layout);
delete shape.label;
var sector = new graphic.Sector({
shape: shape
});
var labelLayout = layout.label;
var labelLine = new graphic.Polyline({
shape: {
points: labelLayout.linePoints
}
});
var labelText = new graphic.Text({
style: {
x: labelLayout.x,
y: labelLayout.y,
text: text,
textAlign: labelLayout.textAlign,
textBaseline: labelLayout.textBaseline,
font: labelLayout.font
}
});
sector.__labelLine = labelLine;
sector.__labelText = labelText;
if (hasAnimation) {
sector.shape.endAngle = layout.startAngle;
sector.animateTo({
shape: {
endAngle: layout.endAngle
}
}, 300, 'cubicOut');
}
return sector;
}
var Pie = require('../../view/Chart').extend({
type: 'pie',
init: function () {
var sectorGroup = new graphic.Group();
this._sectorGroup = sectorGroup;
},
render: function (seriesModel, ecModel, api) {
var data = seriesModel.getData();
var oldData = this._data;
var sectorGroup = this._sectorGroup;
var group = this.group;
var hasAnimation = ecModel.get('animation');
......@@ -46,38 +96,67 @@ define(function (require) {
data.diff(oldData)
.add(function (idx) {
var layout = data.getItemLayout(idx);
var sector = new graphic.Sector({
shape: zrUtil.extend({}, layout)
});
if (hasAnimation && !isFirstRender) {
sector.shape.endAngle = layout.startAngle;
sector.animateTo({
shape: {
endAngle: layout.endAngle
}
}, 300, 'cubicOut');
}
var sector = createSectorAndLabel(
layout, data.getName(idx),
hasAnimation && !isFirstRender
);
sector.on('click', onSectorClick);
data.setItemGraphicEl(idx, sector);
group.add(sector);
sectorGroup.add(sector);
group.add(sector.__labelLine);
group.add(sector.__labelText);
firstSector = firstSector || sector;
})
.update(function (newIdx, oldIdx) {
var sector = oldData.getItemGraphicEl(oldIdx);
var layout = data.getItemLayout(newIdx);
var labelLayout = layout.label;
sector.animateTo({
shape: data.getItemLayout(newIdx)
shape: layout
}, 300, 'cubicOut');
group.add(sector);
var labelLine = sector.__labelLine;
var labelText = sector.__labelText;
labelLine.animateTo({
shape: {
points: labelLayout.linePoints
}
}, 300, 'cubicOut');
labelText.animateTo({
style: {
x: labelLayout.x,
y: labelLayout.y
}
}, 300, 'cubicOut');
labelText.setStyle({
text: data.getName(newIdx),
textAlign: labelLayout.textAlign,
textBaseline: labelLayout.textBaseline,
font: labelLayout.font
});
sectorGroup.add(sector);
data.setItemGraphicEl(newIdx, sector);
group.add(labelLine);
group.add(labelText);
})
.remove(function (idx) {
var sector = oldData.getItemGraphicEl(idx);
group.remove(sector);
sectorGroup.remove(sector);
group.remove(sector.__labelLine);
group.remove(sector.__labelText);
})
.execute();
......@@ -85,18 +164,23 @@ define(function (require) {
var shape = firstSector.shape;
var r = Math.max(api.getWidth(), api.getHeight()) / 2;
var removeClipPath = zrUtil.bind(group.removeClipPath, group);
group.setClipPath(this._createClipPath(
var removeClipPath = zrUtil.bind(sectorGroup.removeClipPath, sectorGroup);
sectorGroup.setClipPath(this._createClipPath(
shape.cx, shape.cy, r, shape.startAngle, shape.clockwise, removeClipPath
));
}
// Make sure sectors is on top of labels
group.remove(sectorGroup);
group.add(sectorGroup);
this._updateAll(data, seriesModel);
this._data = data;
},
_updateAll: function (data, seriesModel) {
var selectedOffset = seriesModel.get('selectedOffset');
data.eachItemGraphicEl(function (sector, idx) {
var itemModel = data.getItemModel(idx);
......@@ -113,7 +197,7 @@ define(function (require) {
itemModel.getModel('itemStyle.emphasis').getItemStyle()
);
updateSelected(sector, itemModel.get('selected'));
updateSelected(sector, itemModel.get('selected'), selectedOffset);
});
},
......
src/chart/pie/labelLayout.js 0 → 100644
浏览文件 @ 6b3d744b
define(function (require) {
'use strict';
var textContain = require('zrender/contain/text');
return function (seriesModel) {
var data = seriesModel.getData();
var itemStyleModel = seriesModel.getModel('itemStyle.normal');
var labelLineModel = itemStyleModel.getModel('labelLine');
var labelModel = itemStyleModel.getModel('label')
var labelLineLen = labelLineModel.get('length');
var labelLineLen2 = labelLineModel.get('length2');
var isLabelInside = labelModel.get('position') === 'inside';
var avoidLabelOverlap = seriesModel.get('avoidLabelOverlap');
data.each(function (idx) {
var layout = data.getItemLayout(idx);
var itemModel = data.getItemModel(idx);
var font = itemModel.getModel('itemStyle.normal.label.textStyle').getFont();
var midAngle = (layout.startAngle + layout.endAngle) / 2;
var dx = Math.cos(midAngle);
var dy = Math.sin(midAngle);
var r = layout.r;
var x1 = (isLabelInside ? r / 2 * dx : r * dx) + layout.cx;
var y1 = (isLabelInside ? r / 2 * dy : r * dy) + layout.cy;
var textX = x1 + dx * 3;
var textY = y1 + dy * 3;
var linePoints;
if (!isLabelInside) {
var x2 = x1 + dx * labelLineLen;
var y2 = y1 + dy * labelLineLen;
var x3 = x2 + ((dx < 0 ? -1 : 1) * labelLineLen2);
var y3 = y2;
textX = x3 + (dx < 0 ? -5 : 5);
textY = y3;
linePoints = [[x1, y1], [x2, y2], [x3, y3]];
}
var textAlign = isLabelInside ? 'center' : (dx > 0 ? 'left' : 'right');
var textBaseline = 'middle';
layout.label = {
x: textX,
y: textY,
linePoints: linePoints,
textAlign: textAlign,
textBaseline: textBaseline,
font: font
};
});
}
});
\ No newline at end of file
src/chart/pie/pieLayout.js
浏览文件 @ 6b3d744b
// TODO minAngle
define(function (require) {
var numberUtil = require('../../util/number');
var parsePercent = numberUtil.parsePercent;
var labelLayout = require('./labelLayout');
return function (seriesType, ecModel, api) {
ecModel.eachSeriesByType(seriesType, function (seriesModel) {
var center = seriesModel.get('center');
var radius = seriesModel.get('radius');
var width = api.getWidth();
var height = api.getHeight();
var size = Math.min(width, height);
var cx = parsePercent(center[0], width);
var cy = parsePercent(center[1], height);
var r0 = parsePercent(radius[0], size) / 2;
var r = parsePercent(radius[1], size) / 2;
var data = seriesModel.getData();
var startAngle = -seriesModel.get('startAngle') * Math.PI / 180;
var sum = data.getSum('x');
if (sum === 0) {
sum = data.count();
}
var radianPerVal = Math.PI / sum * 2;
var clockWise = seriesModel.get('clockWise');
data.each('x', function (value, idx) {
var angle = sum === 0 ? radianPerVal : (value * radianPerVal);
var endAngle = startAngle + angle;
data.setItemLayout(idx, {
startAngle: startAngle,
endAngle: endAngle,
clockwise: clockWise,
cx: cx,
cy: cy,
r0: r0,
r: r
});
startAngle = endAngle;
}, true);
labelLayout(seriesModel);
});
}
});
\ No newline at end of file
src/chart/pie/pieVisual.js
浏览文件 @ 6b3d744b
......@@ -6,8 +6,10 @@ define(function (require) {
var data = seriesModel.getData();
var dataAll = seriesModel.getDataAll();
data.each(function (idx) {
var itemModel = data.getItemModel(idx);
var rawIdx = data.getRawIndex(idx);
var color = colorList[rawIdx % colorList.length];
var color = itemModel.get('itemStyle.normal.color')
|| colorList[rawIdx % colorList.length];
// Legend use the visual info in data before processed
dataAll.setItemVisual(rawIdx, 'color', color);
data.setItemVisual(idx, 'color', color);
......
src/component/angleAxis.js
浏览文件 @ 6b3d744b
......@@ -18,7 +18,6 @@ define(function(require) {
};
}
require('../coord/polar/polarCreator');
require('../echarts').extendComponentView({
......
src/component/axis.js
浏览文件 @ 6b3d744b
......@@ -35,22 +35,23 @@ define(function(require) {
var otherAxis = grid.getAxis(axis.dim === 'x' ? 'y' : 'x');
var position = 0;
if (axisModel.get('axisLine.onZero')) {
if (axis.onZero) {
position = otherAxis.dataToCoord(0);
}
switch (axis.position) {
case 'left':
position = rect.x;
break;
case 'right':
position = rect.x + rect.width;
break;
case 'top':
position = rect.y;
break;
case 'bottom':
position = rect.y + rect.height;
else {
switch (axis.position) {
case 'left':
position = rect.x;
break;
case 'right':
position = rect.x + rect.width;
break;
case 'top':
position = rect.y;
break;
case 'bottom':
position = rect.y + rect.height;
}
}
return position;
......
src/component/legend/LegendView.js
浏览文件 @ 6b3d744b
define(function (require) {
var zrUtil = require('zrender/core/util');
var numberUtil = require('../../util/number');
var symbolCreator = require('../../util/symbol');
var graphic = require('../../util/graphic');
......
src/component/markPoint.js 0 → 100644
浏览文件 @ 6b3d744b
// HINT Markpoint can't be used too much
define(function (require) {
var DataSymbol = require('../chart/helper/DataSymbol');
var zrUtil = require('zrender/core/util');
var List = require('../data/List');
require('./marker/MarkPointModel');
require('../echarts').extendComponentView({
type: 'markPoint',
init: function () {
this._dataSymbolMap = {};
},
render: function (markPointModel, ecModel) {
var dataSymbolMap = this._dataSymbolMap;
for (var name in dataSymbolMap) {
dataSymbolMap[name].__keep = false;
}
ecModel.eachSeries(function (seriesModel) {
var mpModel = seriesModel.markPointModel;
mpModel && this._renderSeriesMP(seriesModel, mpModel);
}, this);
for (var name in dataSymbolMap) {
if (!dataSymbolMap[name].__keep) {
dataSymbolMap[name].remove();
this.group.remove(dataSymbolMap[name].group);
}
}
},
_renderSeriesMP: function (seriesModel, mpModel) {
var coordSys = seriesModel.coordinateSystem;
var seriesName = seriesModel.name;
var seriesData = seriesModel.getData();
var dataSymbolMap = this._dataSymbolMap;
var dataSymbol = dataSymbolMap[seriesName];
if (!dataSymbol) {
dataSymbol = dataSymbolMap[seriesName] = new DataSymbol();
}
var mpData = createList(coordSys, seriesData, mpModel);
mpData.each(['x', 'y'], function (x, y, idx) {
var itemModel = mpData.getItemModel(idx);
var xPx = itemModel.getShallow('x');
var yPx = itemModel.getShallow('y');
var point = (xPx != null && yPx != null) ? [xPx, yPx] : coordSys.dataToPoint([x, y]);
mpData.setItemLayout(idx, point);
mpData.setItemVisual(idx, {
symbolSize: itemModel.getShallow('symbolSize'),
color: itemModel.get('itemStyle.normal.color')
|| seriesData.getVisual('color'),
symbol: itemModel.getShallow('symbol')
});
});
// TODO Text are wrong
dataSymbol.updateData(mpData, true);
this.group.add(dataSymbol.group);
dataSymbol.__keep = true;
}
});
var markPointTypeCalculatorWithExtent = function (percent, data, baseAxisDim, valueAxisDim) {
var extent = data.getDataExtent(valueAxisDim);
var valueIndex = (valueAxisDim === 'radius' || valueAxisDim === 'x') ? 0 : 1;
var valueArr = [];
var min = extent[0];
var max = extent[1];
var val = (max - min) * percent + min;
var dataIndex = data.indexOfNearest(valueAxisDim, val);
valueArr[1 - valueIndex] = data.get(baseAxisDim, dataIndex);
valueArr[valueIndex] = data.get(valueAxisDim, dataIndex, true);
return valueArr;
};
var markPointTypeCalculator = {
/**
* @method
* @param {module:echarts/data/List} data
* @param {string} baseAxisDim
* @param {string} valueAxisDim
*/
min: zrUtil.curry(markPointTypeCalculatorWithExtent, 0),
/**
* @method
* @param {module:echarts/data/List} data
* @param {string} baseAxisDim
* @param {string} valueAxisDim
*/
max: zrUtil.curry(markPointTypeCalculatorWithExtent, 1),
/**
* @method
* @param {module:echarts/data/List} data
* @param {string} baseAxisDim
* @param {string} valueAxisDim
*/
average: zrUtil.curry(markPointTypeCalculatorWithExtent, 0.5)
};
var dataTransform = function (data, baseAxis, valueAxis, item) {
// If not specify the position with pixel directly
if (isNaN(item.x) || isNaN(item.y) && !zrUtil.isArray(item.value)) {
// Clone the option
// Transform the properties xAxis, yAxis, radiusAxis, angleAxis, geoCoord to value
// Competitable with 2.x
item = zrUtil.extend({}, item);
// Special types, Compatible with 2.0
if (item.type && markPointTypeCalculator[item.type]
&& baseAxis && valueAxis) {
var value = markPointTypeCalculator[item.type](
data, baseAxis.dim, valueAxis.dim
);
value.push(+item.value);
item.value = value;
}
else if (!isNaN(item.value)) {
// FIXME Only has one of xAxis and yAxis.
item.value = [
item.xAxis || item.radiusAxis,
item.yAxis || item.angleAxis,
+item.value
];
}
}
return item;
};
// Filter data which is out of coordinateSystem range
var dataFilter = function (coordSys, dimensionInverse, item) {
var value = [item.value[0], item.value[1]];
dimensionInverse && value.inverse();
return coordSys.containData(value);
}
/**
* @inner
* @param {module:echarts/coord/*} coordSys
* @param {module:echarts/data/List} seriesData
* @param {module:echarts/model/Model} mpModel
*/
var createList = function (coordSys, seriesData, mpModel) {
var baseAxis = coordSys && coordSys.getBaseAxis();
var valueAxis = coordSys && coordSys.getOtherAxis(baseAxis);
var dimensions = seriesData.dimensions.slice();
// Polar and cartesian with category axis may have dimensions inversed
var dimensionInverse = dimensions[0] === 'y' || dimensions[0] === 'angle';
if (dimensionInverse) {
dimensions.inverse();
}
var mpData = new List(zrUtil.map(
dimensions, seriesData.getDimensionInfo, seriesData
), mpModel);
mpData.initData(
zrUtil.filter(
zrUtil.map(mpModel.get('data'), zrUtil.curry(
dataTransform, seriesData, baseAxis, valueAxis
)),
zrUtil.curry(dataFilter, coordSys, dimensionInverse)
)
);
return mpData;
};
});
\ No newline at end of file
src/component/marker/MarkPointModel.js 0 → 100644
浏览文件 @ 6b3d744b
define(function (require) {
var zrUtil = require('zrender/core/util');
var Model = require('../../model/Model');
// Default enable markpoint
var globalDefault = require('../../model/globalDefault');
globalDefault.markPoint = {};
var MarkPointModel = require('../../echarts').extendComponentModel({
type: 'markPoint',
dependencies: ['series', 'grid', 'polar'],
/**
* @overrite
*/
init: function (option, parentModel, ecModel, dependentModels, idx, createdBySelf) {
this.mergeDefaultAndTheme(option, ecModel);
this.mergeOption(option, createdBySelf);
},
mergeOption: function (newOpt, createdBySelf) {
// If not created by self for each series
if (!createdBySelf) {
var ecModel = this.ecModel;
ecModel.eachSeries(function (seriesModel) {
var markPointOpt = seriesModel.get('markPoint');
if (markPointOpt && markPointOpt.data) {
var mpModel = seriesModel.markPointModel;
if (!mpModel) {
mpModel = new MarkPointModel(
markPointOpt, this, ecModel, [], 0, true
);
}
else {
mpModel.mergeOption(markPointOpt, true);
}
// Use the same series index
mpModel.seriesIndex = seriesModel.seriesIndex;
seriesModel.markPointModel = mpModel;
}
else {
seriesModel.markPointModel = null;
}
}, this);
}
},
defaultOption: {
zlevel: 0,
z: 5,
clickable: true,
symbol: 'pin', // 标注类型
symbolSize: [30, 50], // 标注大小
// symbolRotate: null, // 标注旋转控制
large: false,
effect: {
show: false,
loop: true,
// 运动周期，无单位，值越大越慢
period: 15,
// 可用为 scale | bounce
type: 'scale',
// 放大倍数，以markPoint点size为基准
scaleSize: 2,
// 跳动距离，单位px
bounceDistance: 10
// color: 'gold',
// shadowColor: 'rgba(255,215,0,0.8)',
// 炫光模糊
// shadowBlur: 0
},
itemStyle: {
normal: {
// color: 各异，
// 标注边线颜色，优先于color
// borderColor: 各异,
// 标注边线线宽，单位px，默认为1
borderWidth: 2,
label: {
show: true,
// 标签文本格式器，同Tooltip.formatter，不支持回调
// formatter: null,
// 可选为'left'|'right'|'top'|'bottom'
position: 'inside'
// 默认使用全局文本样式，详见TEXTSTYLE
// textStyle: null
}
},
emphasis: {
// color: 各异
label: {
show: true
// 标签文本格式器，同Tooltip.formatter，不支持回调
// formatter: null,
// position: 'inside' // 'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
}
}
}
});
return MarkPointModel;
});
\ No newline at end of file
src/coord/Axis.js
浏览文件 @ 6b3d744b
......@@ -51,8 +51,9 @@ define(function (require) {
constructor: Axis,
/**
* If axis extent contain give coord
* @param {number}
* If axis extent contain given coord
* @param {number} coord
* @return {boolean}
*/
contain: function (coord) {
var extent = this._extent;
......@@ -61,6 +62,15 @@ define(function (require) {
return coord >= min && coord <= max;
},
/**
* If axis extent contain given data
* @param {number} data
* @return {boolean}
*/
containData: function (data) {
return this.contain(this.dataToCoord(data))
},
/**
* Get coord extent.
* @return {Array.<number>}
......
src/coord/cartesian/Axis2D.js
浏览文件 @ 6b3d744b
......@@ -39,6 +39,12 @@ define(function (require) {
constructor: Axis2D,
/**
* If axis is on the zero position of the other axis
* @type {boolean}
*/
onZero: false,
/**
* Axis model
* @param {module:echarts/coord/cartesian/AxisModel}
......
src/coord/cartesian/AxisModel.js
浏览文件 @ 6b3d744b
......@@ -33,15 +33,18 @@ define(function(require) {
type: 'xAxis',
init: function (axisOption, parentModel, ecModel) {
AxisModel.prototype.init.call(this);
axisOption.type = axisOption.type || 'category';
zrUtil.merge(axisOption, this.getDefaultOption(), false);
axisOption.position = axisOption.position || 'bottom';
mergeDefault(axisOption, ecModel);
},
axisOption.gridIndex = axisOption.gridIndex || 0;
defaultOption: {
type: 'category',
mergeDefault(axisOption, ecModel);
gridIndex: 0,
position: 'bottom'
}
});
......@@ -51,15 +54,18 @@ define(function(require) {
type: 'yAxis',
init: function (axisOption, parentModel, ecModel) {
AxisModel.prototype.init.call(this);
axisOption.type = axisOption.type || 'value';
zrUtil.merge(axisOption, this.getDefaultOption(), false);
axisOption.position = axisOption.position || 'left';
mergeDefault(axisOption, ecModel);
},
axisOption.gridIndex = axisOption.gridIndex || 0;
defaultOption: {
type: 'value',
mergeDefault(axisOption, ecModel);
gridIndex: 0,
position: 'left'
}
});
......
src/coord/cartesian/Cartesian2D.js
浏览文件 @ 6b3d744b
......@@ -38,6 +38,16 @@ define(function(require) {
&& this.getAxis('y').contain(point[1]);
},
/**
* If contain data
* @param {Array.<number>} data
* @return {boolean}
*/
containData: function (data) {
return this.getAxis('x').containData(data[0])
&& this.getAxis('y').containData(data[1]);
},
/**
* Convert series data to a list of points
* @param {module:echarts/data/List} data
......
src/coord/cartesian/Grid.js
浏览文件 @ 6b3d744b
......@@ -12,6 +12,8 @@ define(function(require, factory) {
var IntervalScale = require('../../scale/Interval');
var numberUtil = require('../../util/number');
var CATEGORY_AXIS_TYPE = 'category';
// 依赖 GridModel, AxisModel 做预处理
require('./GridModel');
......@@ -23,7 +25,7 @@ define(function(require, factory) {
function createScaleByModel(axisModel) {
var axisType = axisModel.get('type');
if (axisType) {
return axisType === 'category'
return axisType === CATEGORY_AXIS_TYPE
// Give [Infinity, -Infinity] extent to make the unionExtent is right
? new OrdinalScale(axisModel.get('data'), [Infinity, -Infinity])
: new IntervalScale();
......@@ -205,6 +207,14 @@ 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) {
yAxis.onZero = false;
}
if (yAxis.type === CATEGORY_AXIS_TYPE) {
xAxis.onZero = false;
}
cartesian.addAxis(xAxis);
cartesian.addAxis(yAxis);
}, this);
......@@ -230,9 +240,12 @@ define(function(require, factory) {
axisPosition
);
axis.onBand = axisModel.get('boundaryGap') && axis.type === 'category';
var isCategory = axis.type === CATEGORY_AXIS_TYPE;
axis.onBand = isCategory && axisModel.get('boundaryGap');
axis.inverse = axisModel.get('inverse');
axis.onZero = axisModel.get('axisLine.onZero');
// Inject axis into axisModel
axisModel.axis = axis;
......
src/coord/polar/Polar.js
浏览文件 @ 6b3d744b
......@@ -53,6 +53,8 @@ define(function(require) {
/**
* If contain coord
* @param {Array.<number>} point
* @return {boolean}
*/
containPoint: function (point) {
var coord = this.pointToCoord(point);
......@@ -61,6 +63,17 @@ define(function(require) {
},
/**
* If contain data
* @param {Array.<number>} data
* @return {boolean}
*/
containData: function (data) {
return this._radiusAxis.containData(data[0])
&& this._angleAxis.containData(data[1]);
},
/**
* @param {string} axisType
* @return {module:echarts/coord/polar/AngleAxis|module:echarts/coord/polar/RadiusAxis}
*/
getAxis: function (axisType) {
......@@ -69,6 +82,8 @@ define(function(require) {
/**
* Get axes by type of scale
* @param {string} scaleType
* @return {module:echarts/coord/polar/AngleAxis|module:echarts/coord/polar/RadiusAxis}
*/
getAxesByScale: function (scaleType) {
var axes = [];
......
src/coord/polar/PolarModel.js
浏览文件 @ 6b3d744b
......@@ -15,6 +15,23 @@ define(function (require) {
*/
coordinateSystem: null,
/**
* @param {string} axisType
* @return {module:echarts/coord/polar/AxisModel}
*/
findAxisModel: function (axisType) {
var angleAxisModel;
var ecModel = this.ecModel;
ecModel.eachComponent(axisType, function (axisModel) {
if (ecModel.getComponent(
'polar', axisModel.getShallow('polarIndex')
) === this) {
angleAxisModel = axisModel;
}
}, this);
return angleAxisModel;
},
defaultOption: {
zlevel: 0,
......
src/coord/polar/polarCreator.js
浏览文件 @ 6b3d744b
......@@ -10,29 +10,6 @@ define(function (require) {
// 依赖 PolarModel 做预处理
require('./PolarModel');
/**
* Retrieve angle axis or radius axis belongs to the given polar
* @param {string} axisType
* @param {number} polarIndex
* @param {module:echarts/model/Global} ecModel
* @param {module:echarts/ExtensionAPI} api
* @return {module:echarts/coord/polar/AxisModel}
* @inner
*/
function retrieveAxisModelForPolar(axisType, polarIndex, ecModel, api) {
var axisModel;
ecModel.eachComponent(axisType, function (model) {
if (model.get('polarIndex') === polarIndex) {
if (axisModel) {
// api.log('Polar ' + polarIndex + ' has more than one ' + axisType);
return;
}
axisModel = model;
}
});
return axisModel;
}
/**
* Resize methods bound to the polar
* @param {module:echarts/coord/polar/PolarModel} polarModel
......@@ -134,8 +111,8 @@ define(function (require) {
var radiusAxis = polar.getRadiusAxis();
var angleAxis = polar.getAngleAxis();
var radiusAxisModel = retrieveAxisModelForPolar('radiusAxis', idx, ecModel, api);
var angleAxisModel = retrieveAxisModelForPolar('angleAxis', idx, ecModel, api);
var radiusAxisModel = polarModel.findAxisModel('radiusAxis');
var angleAxisModel = polarModel.findAxisModel('angleAxis');
setAxis(radiusAxis, radiusAxisModel);
setAxis(angleAxis, angleAxisModel);
......
src/data/List.js
浏览文件 @ 6b3d744b
......@@ -14,6 +14,8 @@ define(function (require) {
var dataCtors = {
float: Float32Array,
int: Int32Array,
// Ordinal data type can be string or int
ordinal: Array,
'number': Array
};
......@@ -28,9 +30,9 @@ define(function (require) {
* @alias module:echarts/data/List
*
* @param {Array.<string>} dimensions
* @param {module:echarts/model/Model} seriesModel
* @param {module:echarts/model/Model} hostModel
*/
var List = function (dimensions, seriesModel) {
var List = function (dimensions, hostModel) {
dimensions = dimensions || ['x', 'y'];
......@@ -52,7 +54,7 @@ define(function (require) {
else {
dimensionInfo = dimensions[i];
dimensionName = dimensionInfo.name;
dimensionInfo.type = dimensionInfo.type || 'float'
dimensionInfo.type = dimensionInfo.type || 'number'
}
dimensionNames.push(dimensionName);
dimensionInfos[dimensionName] = dimensionInfo;
......@@ -72,7 +74,7 @@ define(function (require) {
/**
* @type {module:echarts/model/Model}
*/
this.seriesModel = seriesModel;
this.hostModel = hostModel;
/**
* Indices stores the indices of data subset after filtered.
......@@ -144,6 +146,13 @@ define(function (require) {
listProto.type = 'list';
/**
* Get type and stackable info of particular dimension
*/
listProto.getDimensionInfo = function (dim) {
return this._dimensionInfos[dim];
};
/**
* Initialize from data
* @param {Array.<Object|number|Array>} data
......@@ -180,7 +189,7 @@ define(function (require) {
// Each data item contains value and option
if (data[idx] != null && data[idx].hasOwnProperty('value')) {
value = data[idx].value;
var model = new Model(data[idx], this.seriesModel);
var model = new Model(data[idx], this.hostModel);
var modelIdx = optionModels.length;
optionModelIndices[idx] = modelIdx;
optionModels.push(model);
......@@ -263,6 +272,7 @@ define(function (require) {
var dataIndex = this.indices[idx];
var value = storage[dim] && storage[dim][dataIndex];
// FIXME ordinal data type is not stackable
if (stack && this.stackedOn) {
var stackedValue = this.stackedOn.get(dim, idx, stack);
// Considering positive stack, negative stack and empty data
......@@ -283,8 +293,13 @@ define(function (require) {
*/
listProto.hasValue = function (idx) {
var dimensions = this.dimensions;
var dimensionInfos = this._dimensionInfos;
for (var i = 0, len = dimensions.length; i < len; i++) {
if (isNaN(this.get(dimensions[i], idx))) {
if (
// Ordinal type can be string or number
dimensionInfos[dimensions[i]].type !== 'ordinal'
&& isNaN(this.get(dimensions[i], idx))
) {
return false;
}
}
......@@ -360,10 +375,12 @@ define(function (require) {
listProto.indexOf = function (dim, value) {
var storage = this._storage;
var dimData = storage[dim];
var indices = this.indices;
if (dimData) {
for (var i = 0, len = dimData.length; i < len; i++) {
if (dimData[i] === value) {
for (var i = 0, len = indices.length; i < len; i++) {
var rawIndex = indices[i];
if (dimData[rawIndex] === value) {
return i;
}
}
......@@ -371,6 +388,32 @@ define(function (require) {
return -1;
};
/**
* Retreive the index of nearest value
* @param {number} idx
* @param {number} value
* @param {boolean} stack If given value is after stacked
* @return {number}
*/
listProto.indexOfNearest = function (dim, value, stack) {
var storage = this._storage;
var dimData = storage[dim];
if (dimData) {
var minDist = Number.MAX_VALUE;
var nearestIdx = -1;
for (var i = 0, len = this.count(); i < len; i++) {
var dist = Math.abs(this.get(dim, i, stack) - value);
if (dist <= minDist) {
minDist = dist;
nearestIdx = i;
}
}
return nearestIdx;
}
return -1;
}
/**
* Get raw data index
* @param {number} idx
......@@ -558,7 +601,7 @@ define(function (require) {
// Use a temporary model proxy if value on idx is not an option.
// FIXME Create a new one may cause memory leak
model = temporaryModel;
model.parentModel = this.seriesModel;
model.parentModel = this.hostModel;
}
return model;
};
......@@ -670,15 +713,23 @@ define(function (require) {
itemVisual[key] = value;
};
var setItemDataAndSeriesIndex = function (child) {
child.seriesIndex = this.seriesIndex;
child.dataIndex = this.dataIndex;
}
/**
* @param {number} idx
* @param {module:zrender/Element} el
*/
listProto.setItemGraphicEl = function (idx, el) {
var hostModel = this.hostModel;
// Add data index and series index for indexing the data by element
// Useful in tooltip
el.dataIndex = idx;
el.seriesIndex = this.seriesModel.seriesIndex;
el.seriesIndex = hostModel && hostModel.seriesIndex;;
if (el.type === 'group') {
el.traverse(setItemDataAndSeriesIndex, this)
}
this._graphicEls[idx] = el;
};
......@@ -711,7 +762,7 @@ define(function (require) {
var dimensionInfoList = zrUtil.map(this.dimensions, function (dim) {
return this._dimensionInfos[dim];
}, this);
var list = new List(dimensionInfoList, this.seriesModel);
var list = new List(dimensionInfoList, this.hostModel);
list.stackedOn = this.stackedOn;
// FIXME
......
src/layout/barGrid.js
浏览文件 @ 6b3d744b
......@@ -144,10 +144,12 @@ define(function(require) {
var columnLayoutInfo = barWidthAndOffset[cartesian.name][stackId];
var columnOffset = columnLayoutInfo.offset;
var columnWidth = columnLayoutInfo.width;
var valueAxis = cartesian.getOtherAxis(columnLayoutInfo.axis);
var baseAxis = columnLayoutInfo.axis;
var valueAxis = cartesian.getOtherAxis(baseAxis);
if (data.type === 'list') {
var valueAxisStart = valueAxis.getExtent()[0];
var valueAxisStart = baseAxis.onZero
? valueAxis.dataToCoord(0) : valueAxis.getExtent()[0];
var coords = cartesian.dataToPoints(data, true);
lastStackCoords[stackId] = lastStackCoords[stackId] || [];
......@@ -156,25 +158,31 @@ define(function(require) {
if (isNaN(value)) {
return;
}
if (!lastStackCoords[stackId][idx]) {
lastStackCoords[stackId][idx] = {
// Positive stack
p: valueAxisStart,
// Negative stack
n: valueAxisStart
}
}
var sign = value >= 0 ? 'p' : 'n';
var coord = coords[idx];
var lastCoord = lastStackCoords[stackId][idx] || valueAxisStart;
var lastCoord = lastStackCoords[stackId][idx][sign];
var x, y, width, height;
if (valueAxis.isHorizontal()) {
x = Math.min(lastCoord, coord[0]);
x = lastCoord;
y = coord[1] + columnOffset;
width = Math.abs(coord[0] - lastCoord);
width = coord[0] - lastCoord;
height = columnWidth;
lastCoord += coord[0] - lastCoord;
}
else {
x = coord[0] + columnOffset;
y = Math.min(lastCoord, coord[1]);
y = lastCoord;
width = columnWidth;
height = Math.abs(coord[1] - lastCoord);
lastCoord += coord[1] - lastCoord;
height = coord[1] - lastCoord;
}
lastStackCoords[stackId][idx] = lastCoord;
lastStackCoords[stackId][idx][sign] += height;
data.setItemLayout(idx, {
x: x,
......
src/layout/pie.js 已删除 100644 → 0
浏览文件 @ c995707f
// TODO minAngle
define(function (require) {
var numberUtil = require('../util/number');
var parsePercent = numberUtil.parsePercent;
return function (seriesType, ecModel, api) {
ecModel.eachSeriesByType(seriesType, function (seriesModel) {
var center = seriesModel.get('center');
var radius = seriesModel.get('radius');
var width = api.getWidth();
var height = api.getHeight();
var size = Math.min(width, height);
var cx = parsePercent(center[0], width);
var cy = parsePercent(center[1], height);
var r0 = parsePercent(radius[0], size) / 2;
var r = parsePercent(radius[1], size) / 2;
var data = seriesModel.getData();
var startAngle = -seriesModel.get('startAngle') * Math.PI / 180;
var sum = data.getSum('x');
if (sum === 0) {
sum = data.count();
}
var radianPerVal = Math.PI / sum * 2;
var clockWise = seriesModel.get('clockWise');
data.each('x', function (value, idx) {
var angle = sum === 0 ? radianPerVal : (value * radianPerVal);
var endAngle = startAngle + angle;
data.setItemLayout(idx, {
startAngle: startAngle,
endAngle: endAngle,
clockwise: clockWise,
cx: cx,
cy: cy,
r0: r0,
r: r
});
startAngle = endAngle;
}, true);
});
}
});
\ No newline at end of file
src/model/Model.js
浏览文件 @ 6b3d744b
......@@ -9,6 +9,8 @@ define(function (require) {
/**
* @alias module:echarts/model/Model
* @constructor
* @param {Object} option
* @param {module:echarts/model/Model} parentModel
*/
function Model(option, parentModel) {
......@@ -89,12 +91,15 @@ define(function (require) {
/**
* @param {string} path
* @param {module:echarts/model/Model} [parentModel]
* @return {module:echarts/model/Model}
*/
getModel: function (path) {
getModel: function (path, parentModel) {
var obj = this.get(path);
var parentModel = this.parentModel;
return new Model(obj, parentModel && parentModel.getModel(path));
var thisParentModel = this.parentModel;
return new Model(
obj, parentModel || (thisParentModel && thisParentModel.getModel(path))
);
},
/**
......
src/scale/Ordinal.js
浏览文件 @ 6b3d744b
......@@ -8,6 +8,8 @@
// FIXME only one data
define(function (require) {
var zrUtil = require('zrender/core/util');
/**
* @alias module:echarts/coord/scale/Ordinal
* @param {Array} data
......@@ -39,10 +41,14 @@ define(function (require) {
},
/**
* Normalize given rank to linear [0, 1]
* @return {number} [val]
* Normalize given rank or name to linear [0, 1]
* @param {number|string} [val]
* @return {number}
*/
normalize: function (val) {
if (isNaN(val)) { // Is string
val = zrUtil.indexOf(this._data, val);
}
var extent = this._extent;
// Only one data
if (extent[1] === extent[0]) {
......
src/util/graphic.js
浏览文件 @ 6b3d744b
......@@ -24,7 +24,7 @@ define(function(require) {
graphic.Polyline = require('zrender/graphic/shape/Polyline');
graphic.Rect = require('zrender/graphic/shape/Rectangle');
graphic.Rect = require('zrender/graphic/shape/Rect');
graphic.Line = require('zrender/graphic/shape/Line');
......
src/util/layout.js
浏览文件 @ 6b3d744b
......@@ -101,10 +101,10 @@ define(function(require) {
}
switch (positionInfo.y || positionInfo.y2) {
case 'middle':
y -= containerHeight / 2 - height / 2;
y = containerHeight / 2 - height / 2;
break;
case 'bottom':
y -= containerHeight - height;
y = containerHeight - height;
break;
}
......
src/util/symbol.js
浏览文件 @ 6b3d744b
......@@ -5,6 +5,7 @@ define(function(require) {
var graphic = require('./graphic');
var BoundingRect = require('zrender/core/BoundingRect');
var zrUtil = require('zrender/core/util');
/**
* Diamond shape
......@@ -29,140 +30,243 @@ define(function(require) {
}
});
var symbolCreators = {
/**
* Pin shape
*/
var Pin = graphic.extendShape({
type: 'pin',
shape: {
// x, y on the cusp
x: 0,
y: 0,
width: 0,
height: 0
},
buildPath: function (path, shape) {
var x = shape.x;
var y = shape.y;
var w = shape.width;
// Height must be larger than width
var h = Math.max(w, shape.height);
var r = w / 2;
// Dist on y with tangent point and circle center
var dy = r * r / (h - r);
var cy = y - h + r + dy;
var angle = Math.asin(dy / r);
// Dist on x with tangent point and circle center
var dx = Math.cos(angle) * r;
var tanX = Math.sin(angle);
var tanY = Math.cos(angle);
path.arc(
x,
cy,
r,
Math.PI - angle,
Math.PI * 2 + angle
);
var cpLen = r * 0.6;
var cpLen2 = r * 0.7;
path.bezierCurveTo(
x + dx - tanX * cpLen, cy + dy + tanY * cpLen,
x, y - cpLen2,
x, y
);
path.bezierCurveTo(
x, y - cpLen2,
x - dx + tanX * cpLen, cy + dy + tanY * cpLen,
x - dx, cy + dy
);
}
});
var symbolCtors = {
line: graphic.Line,
rect: graphic.Rect,
roundRect: graphic.Rect,
square: graphic.Rect,
circle: graphic.Circle,
diamond: Diamond,
pin: Pin
};
var symbolShapeMakers = {
line: function (x, y, w, h) {
return new graphic.Line({
shape: {
x1: x,
y1: y + h / 2,
x2: x + w,
y2: y + h / 2
}
});
return {
x1: x,
y1: y + h / 2,
x2: x + w,
y2: y + h / 2
};
},
rect: function (x, y, w, h) {
return new graphic.Rect({
shape: {
x: x,
y: y,
width: w,
height: h
}
})
return {
x: x,
y: y,
width: w,
height: h
}
},
roundRect: function (x, y, w, h, r) {
return new graphic.Rect({
shape: {
x: x,
y: y,
width: w,
height: h,
r: r || Math.min(w, h) / 4
}
});
return {
x: x,
y: y,
width: w,
height: h,
r: r || Math.min(w, h) / 4
};
},
square: function (x, y, size) {
return new graphic.Rect({
shape: {
x: x,
y: y,
width: size / 2,
height: size / 2
}
});
return {
x: x,
y: y,
width: size / 2,
height: size / 2
};
},
circle: function (x, y, w, h) {
// Put circle in the center of square
var size = Math.min(w, h);
return new graphic.Circle({
shape: {
cx: x + w / 2,
cy: y + h / 2,
r: size / 2
}
});
return {
cx: x + w / 2,
cy: y + h / 2,
r: size / 2
}
},
diamond: function (x, y, w, h) {
return new Diamond({
shape: {
cx: x + w / 2,
cy: y + h / 2,
width: w,
height: h
}
})
return {
cx: x + w / 2,
cy: y + h / 2,
width: w,
height: h
};
},
image: function (img, x, y, w, h) {
return new graphic.Image({
style: {
image: img,
x: x,
y: y,
width: w,
height: h
}
})
},
path: function (pathStr, x, y, w, h) {
return graphic.makePath(pathStr, null, new BoundingRect(x, y, w, h));
pin: function (x, y, w, h) {
return {
x: x + w / 2,
// FIXME Why not y + h ?
y: y + h / 2,
width: w,
height: h
};
}
};
return {
// Provide setColor helper method to avoid determine if set the fill or stroke outside
var symbolPathSetColor = function (color) {
var symbolStyle = this.style;
if (this.__isEmptyBrush) {
symbolStyle.stroke = color;
}
else {
// FIXME 判断图形默认是填充还是描边，使用 onlyStroke ?
symbolStyle.fill && (symbolStyle.fill = color);
symbolStyle.stroke && (symbolStyle.stroke = color);
}
this.dirty();
};
var symbolUtil = {
/**
* Create a symbol element with given symbol configuration: shape, x, y, width, height, color
* @param {string} symbolConfig
* @param {string} symbolType
* @param {number} x
* @param {number} y
* @param {number} w
* @param {number} h
* @param {string} color
*/
createSymbol: function (symbolConfig, x, y, w, h, color) {
var isEmpty = symbolConfig.indexOf('empty') === 0;
createSymbol: function (symbolType, x, y, w, h, color) {
var isEmpty = symbolType.indexOf('empty') === 0;
if (isEmpty) {
symbolConfig = symbolConfig.substr(5, 1).toLowerCase() + symbolConfig.substr(6);
symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
}
var symbolPath;
if (symbolConfig.indexOf('image://') === 0) {
symbolPath = symbolCreators.image(symbolConfig.slice(8), x, y, w, h);
if (symbolType.indexOf('image://') === 0) {
symbolPath = new graphic.Image({
style: {
image: symbolType.slice(8),
x: x,
y: y,
width: w,
height: h
}
});
}
else if (symbolConfig.indexOf('path://') === 0) {
symbolPath = symbolCreators.image(symbolConfig.slice(7), x, y, w, h);
else if (symbolType.indexOf('path://') === 0) {
symbolPath = graphic.makePath(symbolType.slice(7), new BoundingRect(x, y, w, h));
}
else {
if (symbolCreators[symbolConfig]) {
symbolPath = symbolCreators[symbolConfig](x, y, w, h);
}
else {
symbolPath = symbolCreators.rect(x, y, w, h);
if (!symbolShapeMakers[symbolType]) {
symbolType = 'rect';
}
symbolPath = new symbolCtors[symbolType]({
shape: symbolShapeMakers[symbolType](x, y, w, h)
});
}
var symbolStyle = symbolPath.style;
if (isEmpty) {
symbolStyle.set({
stroke: color,
fill: '#fff',
lineWidth: 2
});
}
else {
// FIXME 判断图形默认是填充还是描边，使用 onlyStroke ?
symbolStyle.fill && (symbolStyle.fill = color);
symbolStyle.stroke && (symbolStyle.stroke = color);
}
symbolPath.__isEmptyBrush = isEmpty;
symbolPath.setColor = symbolPathSetColor;
symbolPath.setColor(color);
return symbolPath;
},
/**
* Get symbol shape object by given x, y, w, h
* @param {string} symbolType
* @param {number} x
* @param {number} y
* @param {number} w
* @param {number} h
* @return {Object}
*/
getSymbolShape: function (symbolType, x, y, w, h) {
if (symbolType.indexOf('empty') === 0) {
symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
}
if (symbolType.indexOf('image://') === 0) {
return {
style: {
x: x,
y: y,
width: w,
height: h
}
};
}
else if (!(symbolType.indexOf('path://') === 0)) {
if (!symbolShapeMakers[symbolType]) {
symbolType = 'rect';
}
return {
shape: symbolShapeMakers[symbolType](x, y, w, h)
};
}
}
};
return symbolUtil;
});
\ No newline at end of file
src/visual/defaultColor.js
浏览文件 @ 6b3d744b
......@@ -4,7 +4,9 @@ define(function (require) {
ecModel.eachSeries(function (seriesModel) {
var colorList = ecModel.get('color');
var data = seriesModel.getData();
data.setVisual('color', colorList[seriesModel.seriesIndex]);
var color = seriesModel.get('itemStyle.normal.color') // Set in itemStyle
|| colorList[seriesModel.seriesIndex]; // Default color
data.setVisual('color', color);
});
}
});
\ No newline at end of file
test/bar.html
浏览文件 @ 6b3d744b
......@@ -13,7 +13,7 @@
}
#main {
width: 1000px;
background: #999;
background: #fff;
}
</style>
<div id="main"></div>
......@@ -38,17 +38,23 @@
for (var i = 0; i < 10; i++) {
xAxisData.push('类目' + i);
data1.push(Math.random() * 5);
data2.push(Math.random());
data3.push(Math.random());
data1.push((Math.random() * 5).toFixed(2));
data2.push((Math.random() + 0.2).toFixed(2));
data3.push((Math.random() + 0.5).toFixed(2));
}
var itemStyle = {
normal: {
label: {
show: true,
position: 'outside'
}
},
emphasis: {
barBorderColor: 'red',
barBorderWidth: 1
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
};
......@@ -63,13 +69,17 @@
},
orient: 'vertical',
x: 'right',
y: 'bottom',
align: 'right'
},
tooltip: {},
xAxis: {
data: xAxisData,
splitLine: {
show: false
},
splitArea: {
show: true
show: false
}
},
yAxis: {
......
test/dataZoom-cartesian-h.html
浏览文件 @ 6b3d744b
......@@ -21,7 +21,8 @@
'echarts/component/grid',
'echarts/component/axis',
'echarts/component/dataZoom',
'echarts/component/tooltip'
'echarts/component/tooltip',
'echarts/component/markPoint'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
......@@ -35,7 +36,7 @@
for (var i = 0; i < 200; i++) {
xAxisData.push('类目' + i);
data1.push(Math.random() * 4);
data1.push((Math.random() * 4).toFixed(2));
data2.push(Math.random());
data3.push(Math.random());
}
......@@ -64,6 +65,11 @@
normal: {
areaStyle: {}
}
},
markPoint: {
data: [{
type: 'max'
}]
}
},
{
......
test/dynamicData.html
浏览文件 @ 6b3d744b
......@@ -21,16 +21,22 @@
'echarts/component/grid'
], function (echarts) {
function randomData() {
return (Math.random() + 3).toFixed(3);
}
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var xAxisData = [];
var data1 = [];
var data2 = [];
var count = 0;
for (; count < 500; count++) {
xAxisData.push('类目' + count);
data1.push(+Math.random().toFixed(3));
data1.push(randomData());
data2.push(-randomData());
}
var itemStyle = {
......@@ -56,7 +62,7 @@
chart.setOption({
legend: {
data: ['line']
data: ['line', 'line2']
},
tooltip: {
trigger: 'axis',
......@@ -73,6 +79,7 @@
boundaryGap: false
},
yAxis: {
scale: true,
splitLine: {
// show: false
}
......@@ -85,6 +92,20 @@
symbolSize: 10,
data: data1,
itemStyle: itemStyle
}, {
name: 'line2',
type: 'line',
stack: 'all',
symbol: 'none',
symbolSize: 10,
data: data2,
itemStyle: {
normal: {
areaStyle: {
color: 'black'
}
}
}
}]
});
......@@ -93,7 +114,11 @@
xAxisData.shift();
xAxisData.push('类目' + count);
data1.shift();
data1.push(+Math.random().toFixed(3));
data1.push(randomData());
data2.shift();
data2.push(-randomData());
count++;
}
chart.setOption({
......@@ -103,6 +128,9 @@
series: [{
name: 'line',
data: data1
}, {
name: 'line2',
data: data2
}]
});
}, 500);
......
test/line.html
浏览文件 @ 6b3d744b
......@@ -72,12 +72,15 @@
boundaryGap: false,
// inverse: true,
splitArea: {
show: true
show: false
},
splitLine: {
show: false
}
},
yAxis: {
splitLine: {
// show: false
splitArea: {
show: true
}
},
series: [{
......@@ -106,18 +109,6 @@
itemStyle: itemStyle
}]
});
chart.setOption({
series: [{
name: 'line',
type: 'line',
stack: 'all',
symbol: 'circle',
symbolSize: 10,
data: data1,
itemStyle: itemStyle
}]
});
})
</script>
......
test/markPoint.html 0 → 100644
浏览文件 @ 6b3d744b
<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',
'echarts/component/tooltip',
'echarts/component/markPoint'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
for (var i = 0; i < 10; i++) {
xAxisData.push('类目' + i);
data1.push(+Math.random().toFixed(2));
data2.push(+Math.random().toFixed(2));
}
chart.setOption({
legend: {
data: ['line', 'line2', 'line3']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
}
},
xAxis: {
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
data: xAxisData,
boundaryGap: false,
// inverse: true,
splitArea: {
show: true
}
},
yAxis: {
splitLine: {
// show: false
}
},
series: [{
name: 'line',
type: 'line',
stack: 'all',
symbolSize: 6,
data: data1,
markPoint: {
data: [{
name: '最大值',
type: 'max',
value: 1
}, {
xAxis: '类目3',
yAxis: 0.5,
value: 2
}]
}
}, {
name: 'line2',
type: 'line',
stack: 'all',
symbolSize: 6,
data: data2,
markPoint: {
data: [{
name: '最大值',
type: 'max',
value: 1
}]
}
}]
});
})
</script>
</body>
</html>
\ No newline at end of file
test/pieDynamic.html 0 → 100644
浏览文件 @ 6b3d744b
<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>
<button id="random"></button>
<script>
require([
'echarts',
'echarts/chart/pie',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
renderer: 'canvas'
});
var randomData = function () {
return [
{value:Math.random().toFixed(3), name:'a'},
{value:Math.random().toFixed(3), name:'b'},
{value:Math.random().toFixed(3), name:'c'},
{value:Math.random().toFixed(3), name:'d'},
{value:Math.random().toFixed(3), name:'e'}
];
}
var itemStyle = {
normal: {
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 5,
// shadowColor: 'rgba(0, 0, 0, 0.4)'
}
};
chart.setOption({
legend: {
data:['a','b','c','d','e']
},
tooltip: {
},
series: [{
name: 'pie',
type: 'pie',
stack: 'all',
symbol: 'circle',
symbolSize: 10,
data: randomData(),
itemStyle: itemStyle
}]
});
setInterval(function () {
chart.setOption({
series: [{
name: 'pie',
data: randomData()
}]
})
}, 1000)
})
</script>
</body>
</html>
\ No newline at end of file
test/scatter.html
浏览文件 @ 6b3d744b
......@@ -31,9 +31,9 @@
var data3 = [];
for (var i = 0; i < 100; i++) {
data1.push([Math.random() * 5, Math.random() * 4, Math.random()]);
data2.push([Math.random() * 10, Math.random() * 5, Math.random()]);
data3.push([Math.random() * 15, Math.random() * 10, Math.random()]);
data1.push([Math.random() * 5, Math.random() * 4, Math.random().toFixed(2)]);
data2.push([Math.random() * 10, Math.random() * 5, (Math.random() + 0.3).toFixed(2)]);
data3.push([Math.random() * 15, Math.random() * 10, Math.random().toFixed(2)]);
}
chart.setOption({
......@@ -75,6 +75,13 @@
symbolSize: function (val) {
return val[2] * 40;
},
itemStyle: {
normal: {
label: {
show: true
}
}
},
data: data2
}, {
name: 'scatter3',
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或