Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
alon@wen
echarts
提交
096c0f16
E
echarts
项目概览
alon@wen
/
echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
E
echarts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
096c0f16
编写于
9月 27, 2015
作者:
L
lang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Area chart
上级
1940aff8
变更
15
隐藏空白更改
内联
并排
Showing
15 changed file
with
451 addition
and
174 deletion
+451
-174
src/chart/helper/DataSymbol.js
src/chart/helper/DataSymbol.js
+2
-2
src/chart/line.js
src/chart/line.js
+1
-1
src/chart/line/Area.js
src/chart/line/Area.js
+37
-0
src/chart/line/LineView.js
src/chart/line/LineView.js
+188
-65
src/chart/line/lineAnimationDiff.js
src/chart/line/lineAnimationDiff.js
+62
-6
src/layout/line.js
src/layout/line.js
+0
-45
src/layout/points.js
src/layout/points.js
+1
-3
src/model/mixin/areaStyle.js
src/model/mixin/areaStyle.js
+1
-0
src/util/graphic.js
src/util/graphic.js
+1
-1
test/area.html
test/area.html
+115
-0
test/dynamicData.html
test/dynamicData.html
+17
-11
test/line.html
test/line.html
+18
-11
test/polarLine.html
test/polarLine.html
+3
-0
test/polarLine2.html
test/polarLine2.html
+4
-2
test/scatter.html
test/scatter.html
+1
-27
未找到文件。
src/chart/helper/DataSymbol.js
浏览文件 @
096c0f16
...
...
@@ -6,7 +6,7 @@ define(function (require) {
var
graphic
=
require
(
'
../../util/graphic
'
);
function
createSymbol
(
data
,
idx
,
enableAnimation
)
{
var
point
=
data
.
getItemLayout
(
idx
)
.
point
;
var
point
=
data
.
getItemLayout
(
idx
);
var
color
=
data
.
getItemVisual
(
idx
,
'
color
'
);
var
symbolSize
=
data
.
getItemVisual
(
idx
,
'
symbolSize
'
);
...
...
@@ -85,7 +85,7 @@ define(function (require) {
}
var
symbolSize
=
data
.
getItemVisual
(
newIdx
,
'
symbolSize
'
);
var
point
=
data
.
getItemLayout
(
newIdx
)
.
point
;
var
point
=
data
.
getItemLayout
(
newIdx
);
var
el
=
oldData
.
getItemGraphicEl
(
oldIdx
);
// Symbol changed
...
...
src/chart/line.js
浏览文件 @
096c0f16
...
...
@@ -10,6 +10,6 @@ define(function (require) {
require
(
'
../visual/symbol
'
),
'
line
'
,
'
circle
'
,
'
line
'
));
echarts
.
registerLayout
(
zrUtil
.
curry
(
require
(
'
../layout/
line
'
),
'
line
'
require
(
'
../layout/
points
'
),
'
line
'
));
});
\ No newline at end of file
src/chart/line/Area.js
0 → 100644
浏览文件 @
096c0f16
define
(
function
(
require
)
{
'
use strict
'
;
return
require
(
'
zrender/graphic/Path
'
).
extend
({
type
:
'
ec-area
'
,
shape
:
{
points
:
[],
// Offset between stacked base points and points
stackedOnPoints
:
[]
},
buildPath
:
function
(
ctx
,
shape
)
{
var
points
=
shape
.
points
;
var
stackedOnPoints
=
shape
.
stackedOnPoints
;
var
i
=
0
;
var
len
=
points
.
length
;
while
(
i
<
points
.
length
)
{
for
(
var
k
=
i
;
k
<
len
;
k
++
)
{
var
p
=
points
[
k
];
if
(
p
==
null
||
isNaN
(
p
[
0
])
||
isNaN
(
p
[
1
]))
{
break
;
}
ctx
[
k
===
i
?
'
moveTo
'
:
'
lineTo
'
](
p
[
0
],
p
[
1
]);
}
var
tmp
=
k
;
for
(
k
--
;
k
>=
i
;
k
--
)
{
var
p
=
stackedOnPoints
[
k
];
ctx
.
lineTo
(
p
[
0
],
p
[
1
]);
}
i
=
tmp
+
1
;
}
}
});
});
\ No newline at end of file
src/chart/line/LineView.js
浏览文件 @
096c0f16
...
...
@@ -9,6 +9,7 @@ define(function(require) {
var
DataSymbol
=
require
(
'
../helper/DataSymbol
'
);
var
lineAnimationDiff
=
require
(
'
./lineAnimationDiff
'
);
var
graphic
=
require
(
'
../../util/graphic
'
);
var
AreaPath
=
require
(
'
./Area
'
);
function
isPointsSame
(
points1
,
points2
)
{
if
(
points1
.
length
!==
points2
.
length
)
{
...
...
@@ -36,6 +37,45 @@ 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
)
};
});
}
/**
* @param {module:echarts/coord/cartesian/Cartesian2D|module:echarts/coord/polar/Polar} coordSys
* @param {module:echarts/data/List} data
* @param {Array.<Array.<number>>} points
* @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
;
});
}
}
return
require
(
'
../../echarts
'
).
extendChartView
({
type
:
'
line
'
,
...
...
@@ -48,98 +88,93 @@ define(function(require) {
var
coordSys
=
seriesModel
.
coordinateSystem
;
var
group
=
this
.
group
;
var
data
=
seriesModel
.
getData
();
var
lineStyleNormalModel
=
seriesModel
.
getModel
(
'
itemStyle.normal.lineStyle
'
);
var
points
=
data
.
map
(
function
(
idx
)
{
var
layout
=
data
.
getItemLayout
(
idx
);
return
layout
&&
layout
.
point
;
},
true
);
var
dimensions
=
coordSys
.
type
===
'
cartesian2d
'
?
[
'
x
'
,
'
y
'
]
:
[
'
radius
'
,
'
angle
'
];
var
plainDataList
=
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
)
};
});
var
lineStyleModel
=
seriesModel
.
getModel
(
'
itemStyle.normal.lineStyle
'
);
var
areaStyleModel
=
seriesModel
.
getModel
(
'
itemStyle.normal.areaStyle
'
);
var
points
=
data
.
map
(
data
.
getItemLayout
,
true
);
var
dataArray
=
getDataArray
(
coordSys
,
data
,
points
);
var
prevCoordSys
=
this
.
_coordSys
;
var
isCoordSysPolar
=
coordSys
.
type
===
'
polar
'
;
var
prevCoordSys
=
this
.
_coordSys
;
// FIXME Update after animation
// if (
// isCoordSysPolar
// && points.length > 2
// && coordinateSystem.getAngleAxis().type === 'category'
// ) {
// // Close polyline
// points.push(Array.prototype.slice.call(points[0]));
// }
// Draw symbols, enable animation on the first draw
var
dataSymbol
=
this
.
_dataSymbol
;
var
polyline
=
this
.
_polyline
;
var
enableAnimation
=
ecModel
.
get
(
'
animation
'
);
var
polygon
=
this
.
_polygon
;
var
hasAnimation
=
ecModel
.
get
(
'
animation
'
);
var
isAreaChart
=
!
areaStyleModel
.
isEmpty
();
var
stackedOnPoints
=
getStackedOnPoints
(
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
&&
prevCoordSys
.
type
===
coordSys
.
type
&&
enable
Animation
)
&&
has
Animation
)
)
{
// Remove previous created polyline
if
(
polyline
)
{
group
.
remove
(
polyline
);
dataSymbol
.
updateData
(
data
,
hasAnimation
);
polyline
=
this
.
_newPolyline
(
group
,
points
,
coordSys
,
hasAnimation
);
if
(
isAreaChart
)
{
polygon
=
this
.
_newPolygon
(
group
,
points
,
stackedOnPoints
,
coordSys
,
hasAnimation
);
}
}
else
{
dataSymbol
.
updateData
(
data
,
false
);
polyline
=
new
graphic
.
Polyline
({
shape
:
{
points
:
points
}
});
// var removeClipPath = zrUtil.bind(polyline.removeClipPath, polyline);
var
clipPath
=
isCoordSysPolar
?
this
.
_createPolarClipShape
(
coordSys
,
enableAnimation
)
:
this
.
_createGridClipShape
(
coordSys
,
enableAnimation
);
polyline
.
setClipPath
(
clipPath
);
group
.
add
(
polyline
);
this
.
_polyline
=
polyline
;
}
else
{
// Update clipPath
var
clipPath
=
isCoordSysPolar
?
this
.
_createPolarClipShape
(
coordSys
)
:
this
.
_createGridClipShape
(
coordSys
);
polyline
.
setClipPath
(
clipPath
);
// FIXME Clip path used by more than one elements
polyline
.
setClipPath
(
this
.
_createClipShape
(
coordSys
)
);
polygon
&&
polygon
.
setClipPath
(
this
.
_createClipShape
(
coordSys
)
);
dataSymbol
.
updateData
(
data
,
false
);
// 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
.
_
plainDataList
,
plainDataList
))
{
if
(
!
isPointsSame
(
this
.
_
dataArray
,
dataArray
))
{
this
.
_updateAnimation
(
data
,
plainDataList
,
coordSys
data
,
dataArray
,
stackedOnDataArray
,
coordSys
);
}
// Add back
group
.
add
(
polyline
);
group
.
add
(
polygon
);
}
polyline
.
setStyle
(
zrUtil
.
extend
(
lineStyle
Normal
Model
.
getLineStyle
(),
lineStyleModel
.
getLineStyle
(),
{
stroke
:
data
.
getVisual
(
'
color
'
),
lineJoin
:
'
bevel
'
}
));
if
(
polygon
)
{
polygon
.
style
.
opacity
=
0.7
;
polygon
.
setStyle
(
zrUtil
.
extend
(
areaStyleModel
.
getAreaStyle
(),
{
fill
:
data
.
getVisual
(
'
color
'
),
lineJoin
:
'
bevel
'
}
));
}
// Make sure symbols is on top of line
group
.
remove
(
dataSymbol
.
group
);
...
...
@@ -148,13 +183,76 @@ define(function(require) {
this
.
_data
=
data
;
// Save the coordinate system and data for transition animation when data changed
this
.
_plainDataList
=
plainDataList
;
this
.
_dataArray
=
dataArray
;
this
.
_stackedOnDataArray
=
stackedOnDataArray
;
this
.
_coordSys
=
coordSys
;
!
isCoordSysPolar
&&
!
seriesModel
.
get
(
'
showAllSymbol
'
)
&&
this
.
_updateSymbolDisplay
(
data
,
coordSys
);
},
/**
* @param {module:zrender/container/Group} group
* @param {Array.<Array.<number>>} points
* @param {module:echarts/coord/cartesian/Cartesian2D|module:echarts/coord/polar/Polar} coordSys
* @param {boolean} hasAnimation
* @private
*/
_newPolyline
:
function
(
group
,
points
,
coordSys
,
hasAnimation
)
{
var
polyline
=
this
.
_polyline
;
// Remove previous created polyline
if
(
polyline
)
{
group
.
remove
(
polyline
);
}
polyline
=
new
graphic
.
Polyline
({
shape
:
{
points
:
points
},
silent
:
true
});
var
clipPath
=
this
.
_createClipShape
(
coordSys
,
hasAnimation
);
polyline
.
setClipPath
(
clipPath
);
group
.
add
(
polyline
);
this
.
_polyline
=
polyline
;
return
polyline
;
},
/**
* @param {module:zrender/container/Group} group
* @param {Array.<Array.<number>>} stackedOnPoints
* @param {Array.<Array.<number>>} points
* @param {module:echarts/coord/cartesian/Cartesian2D|module:echarts/coord/polar/Polar} coordSys
* @param {boolean} hasAnimation
* @private
*/
_newPolygon
:
function
(
group
,
points
,
stackedOnPoints
,
coordSys
,
hasAnimation
)
{
var
polygon
=
this
.
_polygon
;
// Remove previous created polygon
if
(
polygon
)
{
group
.
remove
(
polygon
);
}
polygon
=
new
AreaPath
({
shape
:
{
points
:
points
,
stackedOnPoints
:
stackedOnPoints
},
silent
:
true
});
var
clipPath
=
this
.
_createClipShape
(
coordSys
,
hasAnimation
);
polygon
.
setClipPath
(
clipPath
);
group
.
add
(
polygon
);
this
.
_polygon
=
polygon
;
return
polygon
;
},
/**
* @private
*/
...
...
@@ -174,10 +272,14 @@ define(function(require) {
/**
* @private
*/
_updateAnimation
:
function
(
data
,
plainDataList
,
coordSys
)
{
_updateAnimation
:
function
(
data
,
dataArray
,
stackedOnDataArray
,
coordSys
)
{
var
polyline
=
this
.
_polyline
;
var
polygon
=
this
.
_polygon
;
var
diff
=
lineAnimationDiff
(
this
.
_plainDataList
,
plainDataList
,
this
.
_coordSys
,
coordSys
this
.
_dataArray
,
dataArray
,
this
.
_stackedOnDataArray
,
stackedOnDataArray
,
this
.
_coordSys
,
coordSys
);
polyline
.
shape
.
points
=
diff
.
current
;
polyline
.
animateTo
({
...
...
@@ -186,6 +288,19 @@ define(function(require) {
}
},
300
,
'
cubicOut
'
);
if
(
polygon
)
{
var
polygonShape
=
polygon
.
shape
;
polygonShape
.
points
=
diff
.
current
;
polygonShape
.
stackedOnPoints
=
diff
.
stackedOnCurrent
;
polygon
.
animateTo
({
shape
:
{
points
:
diff
.
next
,
stackedOnPoints
:
diff
.
stackedOnNext
}
},
300
,
'
cubicOut
'
);
}
var
updatedDataInfo
=
[];
var
addedDataIndices
=
[];
var
diffStatus
=
diff
.
status
;
...
...
@@ -226,7 +341,13 @@ define(function(require) {
}
},
_createGridClipShape
:
function
(
cartesian
,
animation
,
categoryAxis
)
{
_createClipShape
:
function
(
coordSys
,
hasAnimation
)
{
return
coordSys
.
type
===
'
polar
'
?
this
.
_createPolarClipShape
(
coordSys
,
hasAnimation
)
:
this
.
_createGridClipShape
(
coordSys
,
hasAnimation
);
},
_createGridClipShape
:
function
(
cartesian
,
animation
)
{
var
xExtent
=
getAxisExtentWithGap
(
cartesian
.
getAxis
(
'
x
'
));
var
yExtent
=
getAxisExtentWithGap
(
cartesian
.
getAxis
(
'
y
'
));
...
...
@@ -284,7 +405,9 @@ define(function(require) {
},
remove
:
function
()
{
this
.
group
.
remove
(
this
.
_polyline
);
var
group
=
this
.
group
;
group
.
remove
(
this
.
_polyline
);
group
.
remove
(
this
.
_polygon
);
this
.
_dataSymbol
.
remove
(
true
);
}
});
...
...
src/chart/line/lineAnimationDiff.js
浏览文件 @
096c0f16
...
...
@@ -6,10 +6,32 @@ define(function (require) {
return
a
.
name
===
b
.
name
;
}
return
function
(
oldData
,
newData
,
oldCoordSys
,
newCoordSys
)
{
function
getStackedOnPoint
(
coordSys
,
dataItem
)
{
if
(
'
x
'
in
dataItem
)
{
return
coordSys
.
dataToPoint
([
dataItem
.
x
,
dataItem
.
y
]);
}
else
{
var
valueAxis
=
coordSys
.
getOtherAxis
(
coordSys
.
getBaseAxis
());
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
]
=
valueAxis
.
dataToCoord
(
dataItem
[
dim
]);
pt
[
1
-
baseCoordOffset
]
=
valueStart
;
return
pt
;
}
}
return
function
(
oldData
,
newData
,
oldStackedData
,
newStackedData
,
oldCoordSys
,
newCoordSys
)
{
var
oldPoints
=
[];
var
newPoints
=
[];
// Points for stacking base line
var
oldStackedPoints
=
[];
var
newStackedPoints
=
[];
var
status
=
[];
var
sortedIndices
=
[];
var
rawIndices
=
[];
...
...
@@ -27,21 +49,43 @@ define(function (require) {
case
'
=
'
:
oldPoints
.
push
(
oldData
[
diffItem
.
idx
].
point
);
newPoints
.
push
(
newData
[
diffItem
.
idx1
].
point
);
oldStackedPoints
.
push
(
oldStackedData
[
diffItem
.
idx
].
point
);
newStackedPoints
.
push
(
newStackedData
[
diffItem
.
idx1
].
point
);
rawIndices
.
push
(
newData
[
diffItem
.
idx1
].
rawIdx
);
break
;
case
'
+
'
:
var
newDataItem
=
newData
[
diffItem
.
idx
];
oldPoints
.
push
(
oldCoordSys
.
dataToPoint
([
newDataItem
.
x
,
newDataItem
.
y
]));
var
newStackedDataItem
=
newStackedData
[
diffItem
.
idx
];
oldPoints
.
push
(
oldCoordSys
.
dataToPoint
([
newDataItem
.
x
,
newDataItem
.
y
])
);
newPoints
.
push
(
newDataItem
.
point
);
oldStackedPoints
.
push
(
getStackedOnPoint
(
oldCoordSys
,
newStackedDataItem
)
);
newStackedPoints
.
push
(
newStackedPoints
)
rawIndices
.
push
(
newDataItem
.
rawIdx
);
break
;
case
'
-
'
:
var
oldDataItem
=
oldData
[
diffItem
.
idx
];
var
oldStackedDataItem
=
oldStackedData
[
diffItem
.
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
)
);
rawIndices
.
push
(
oldDataItem
.
rawIdx
);
}
else
{
...
...
@@ -64,17 +108,29 @@ define(function (require) {
var
sortedOldPoints
=
[];
var
sortedNewPoints
=
[];
var
sortedOldStackedPoints
=
[];
var
sortedNewStackedPoints
=
[];
var
sortedStatus
=
[];
for
(
var
i
=
0
;
i
<
sortedIndices
.
length
;
i
++
)
{
var
oldIndex
=
sortedIndices
[
i
];
sortedOldPoints
[
i
]
=
oldPoints
[
oldIndex
];
sortedNewPoints
[
i
]
=
newPoints
[
oldIndex
];
sortedStatus
[
i
]
=
status
[
oldIndex
];
var
idx
=
sortedIndices
[
i
];
sortedOldPoints
[
i
]
=
oldPoints
[
idx
];
sortedNewPoints
[
i
]
=
newPoints
[
idx
];
sortedOldStackedPoints
[
i
]
=
oldStackedPoints
[
idx
];
sortedNewStackedPoints
[
i
]
=
newStackedPoints
[
idx
];
sortedStatus
[
i
]
=
status
[
idx
];
}
return
{
current
:
sortedOldPoints
,
next
:
sortedNewPoints
,
stackedOnCurrent
:
sortedOldStackedPoints
,
stackedOnNext
:
sortedNewStackedPoints
,
status
:
sortedStatus
};
}
...
...
src/layout/line.js
已删除
100644 → 0
浏览文件 @
1940aff8
define
(
function
(
require
)
{
'
use strict
'
;
function
getSeriesStackId
(
seriesModel
)
{
return
seriesModel
.
get
(
'
stack
'
)
||
'
__ec_stack_
'
+
seriesModel
.
seriesIndex
;
}
return
function
(
seriesType
,
ecModel
,
api
)
{
var
lastStackCoords
=
{};
ecModel
.
eachSeriesByType
(
seriesType
,
function
(
lineSeries
)
{
var
data
=
lineSeries
.
getData
();
var
coordSys
=
lineSeries
.
coordinateSystem
;
var
dims
=
coordSys
.
type
===
'
cartesian2d
'
?
[
'
x
'
,
'
y
'
]
:
[
'
radius
'
,
'
angle
'
];
var
stackId
=
getSeriesStackId
(
lineSeries
);
var
baseAxis
=
coordSys
.
getBaseAxis
();
var
valueAxis
=
coordSys
.
getOtherAxis
(
baseAxis
);
var
valueAxisStart
=
valueAxis
.
getExtent
()[
0
];
var
baseCoordOffset
=
baseAxis
.
dim
===
'
x
'
?
0
:
1
;
lastStackCoords
[
stackId
]
=
lastStackCoords
[
stackId
]
||
[];
data
.
each
(
dims
,
function
(
x
,
y
,
idx
)
{
if
(
!
isNaN
(
y
)
&&
!
isNaN
(
x
))
{
var
lastCoord
=
lastStackCoords
[
stackId
][
idx
]
||
valueAxisStart
;
var
point
=
coordSys
.
dataToPoint
([
x
,
y
]);
var
stackPoint
=
[];
stackPoint
[
baseCoordOffset
]
=
point
[
baseCoordOffset
];
stackPoint
[
1
-
baseCoordOffset
]
=
lastCoord
;
lastStackCoords
[
stackId
][
idx
]
=
lastCoord
;
data
.
setItemLayout
(
idx
,
{
point
:
point
,
// Stack points for area charts
stackOn
:
stackPoint
});
}
},
true
);
});
}
});
\ No newline at end of file
src/layout/points.js
浏览文件 @
096c0f16
...
...
@@ -9,9 +9,7 @@ define(function (require) {
data
.
each
(
dims
,
function
(
x
,
y
,
idx
)
{
if
(
!
isNaN
(
y
)
&&
!
isNaN
(
x
))
{
var
point
=
coordSys
.
dataToPoint
([
x
,
y
]);
data
.
setItemLayout
(
idx
,
{
point
:
point
});
data
.
setItemLayout
(
idx
,
point
);
}
},
true
);
});
...
...
src/model/mixin/areaStyle.js
浏览文件 @
096c0f16
...
...
@@ -6,6 +6,7 @@ define(function (require) {
[
'
shadowBlur
'
],
[
'
shadowOffsetX
'
],
[
'
shadowOffsetY
'
],
[
'
opacity
'
],
[
'
shadowColor
'
]
]
)
...
...
src/util/graphic.js
浏览文件 @
096c0f16
...
...
@@ -164,7 +164,7 @@ define(function(require) {
this
.
setStyle
(
this
.
__normalStyle
);
}
var
MOUSEOVER
=
'
mouseover
'
;
var
MOUSEOUT
=
'
mouseo
ver
'
;
var
MOUSEOUT
=
'
mouseo
ut
'
;
/**
* Set hover style of element
* @param {module:zrender/graphic/Displayable} el
...
...
test/area.html
0 → 100644
浏览文件 @
096c0f16
<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
'
],
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
(
3
));
data2
.
push
(
+
Math
.
random
().
toFixed
(
3
));
data3
.
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)'
},
areaStyle
:
{
}
}
};
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
'
,
symbol
:
'
circle
'
,
symbolSize
:
10
,
data
:
data1
,
itemStyle
:
itemStyle
},
{
name
:
'
line2
'
,
type
:
'
line
'
,
stack
:
'
all
'
,
symbol
:
'
circle
'
,
symbolSize
:
10
,
data
:
data2
,
itemStyle
:
itemStyle
},
{
name
:
'
line3
'
,
type
:
'
line
'
,
stack
:
'
all
'
,
symbol
:
'
circle
'
,
symbolSize
:
10
,
data
:
data3
,
itemStyle
:
itemStyle
}]
});
})
</script>
</body>
</html>
\ No newline at end of file
test/dynamicData.html
浏览文件 @
096c0f16
...
...
@@ -28,7 +28,7 @@
var
xAxisData
=
[];
var
data1
=
[];
var
count
=
0
;
for
(;
count
<
1
00
;
count
++
)
{
for
(;
count
<
2
00
;
count
++
)
{
xAxisData
.
push
(
'
类目
'
+
count
);
data1
.
push
(
+
Math
.
random
().
toFixed
(
3
));
}
...
...
@@ -42,11 +42,14 @@
// shadowOffsetY: 5,
// shadowColor: 'rgba(0, 0, 0, 0.4)',
lineStyle
:
{
width
:
3
,
width
:
2
,
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 5,
// shadowColor: 'rgba(0, 0, 0, 0.4)'
},
areaStyle
:
{
}
}
};
...
...
@@ -63,9 +66,11 @@
},
// animation: false,
xAxis
:
{
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
axisLabel
:
{
interval
:
20
},
data
:
xAxisData
,
//
boundaryGap: false
boundaryGap
:
false
},
yAxis
:
{
splitLine
:
{
...
...
@@ -84,12 +89,13 @@
});
setInterval
(
function
()
{
data1
.
shift
();
data1
.
push
(
+
Math
.
random
().
toFixed
(
3
));
xAxisData
.
shift
();
xAxisData
.
push
(
'
类目
'
+
count
++
);
for
(
var
i
=
0
;
i
<
1
;
i
++
)
{
xAxisData
.
shift
();
xAxisData
.
push
(
'
类目
'
+
count
);
data1
.
shift
();
data1
.
push
(
+
Math
.
random
().
toFixed
(
3
));
count
++
;
}
chart
.
setOption
({
xAxis
:
{
data
:
xAxisData
...
...
@@ -99,7 +105,7 @@
data
:
data1
}]
});
},
100
);
},
100
0
);
})
</script>
...
...
test/line.html
浏览文件 @
096c0f16
...
...
@@ -31,7 +31,7 @@
var
data2
=
[];
var
data3
=
[];
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
for
(
var
i
=
0
;
i
<
10
0
;
i
++
)
{
xAxisData
.
push
(
'
类目
'
+
i
);
data1
.
push
(
+
Math
.
random
().
toFixed
(
3
));
data2
.
push
(
+
Math
.
random
().
toFixed
(
3
));
...
...
@@ -42,16 +42,16 @@
normal
:
{
borderColor
:
'
white
'
,
borderWidth
:
3
,
shadowBlur
:
10
,
shadowOffsetX
:
0
,
shadowOffsetY
:
5
,
shadowColor
:
'
rgba(0, 0, 0, 0.4)
'
,
//
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)
'
//
shadowBlur: 10,
//
shadowOffsetX: 0,
//
shadowOffsetY: 5,
//
shadowColor: 'rgba(0, 0, 0, 0.4)'
}
}
};
...
...
@@ -61,12 +61,19 @@
data
:
[
'
line
'
,
'
line2
'
,
'
line3
'
]
},
tooltip
:
{
trigger
:
'
axis
'
trigger
:
'
axis
'
,
axisPointer
:
{
type
:
'
line
'
}
},
xAxis
:
{
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
data
:
xAxisData
,
boundaryGap
:
false
boundaryGap
:
false
,
// inverse: true,
splitArea
:
{
show
:
true
}
},
yAxis
:
{
splitLine
:
{
...
...
test/polarLine.html
浏览文件 @
096c0f16
...
...
@@ -58,18 +58,21 @@
series
:
[{
coordinateSystem
:
'
polar
'
,
name
:
'
line
'
,
stack
:
'
all
'
,
type
:
'
line
'
,
symbolSize
:
10
,
data
:
data1
},
{
coordinateSystem
:
'
polar
'
,
name
:
'
line2
'
,
stack
:
'
all
'
,
type
:
'
line
'
,
symbolSize
:
10
,
data
:
data2
},
{
coordinateSystem
:
'
polar
'
,
name
:
'
line3
'
,
stack
:
'
all
'
,
type
:
'
line
'
,
symbolSize
:
10
,
data
:
data3
...
...
test/polarLine2.html
浏览文件 @
096c0f16
...
...
@@ -27,8 +27,10 @@
var
data
=
[];
for
(
var
i
=
0
;
i
<
300
;
i
++
)
{
data
.
push
([
i
,
(
i
*
5
)
%
360
]);
for
(
var
i
=
0
;
i
<
100
;
i
++
)
{
var
theta
=
i
/
100
*
360
;
var
r
=
5
*
(
1
+
Math
.
sin
(
theta
/
180
*
Math
.
PI
));
data
.
push
([
r
,
theta
]);
}
chart
.
setOption
({
...
...
test/scatter.html
浏览文件 @
096c0f16
...
...
@@ -64,15 +64,7 @@
series
:
[{
name
:
'
scatter
'
,
type
:
'
scatter
'
,
itemStyle
:
{
normal
:
{
opacity
:
0.8
,
shadowBlur
:
10
,
shadowOffsetX
:
0
,
shadowOffsetY
:
0
,
shadowColor
:
'
rgba(0, 0, 0, 0.5)
'
}
},
symbol
:
'
diamond
'
,
symbolSize
:
function
(
val
)
{
return
val
[
2
]
*
40
;
},
...
...
@@ -80,15 +72,6 @@
},
{
name
:
'
scatter2
'
,
type
:
'
scatter
'
,
itemStyle
:
{
normal
:
{
opacity
:
0.8
,
shadowBlur
:
10
,
shadowOffsetX
:
0
,
shadowOffsetY
:
0
,
shadowColor
:
'
rgba(0, 0, 0, 0.5)
'
}
},
symbolSize
:
function
(
val
)
{
return
val
[
2
]
*
40
;
},
...
...
@@ -96,15 +79,6 @@
},
{
name
:
'
scatter3
'
,
type
:
'
scatter
'
,
itemStyle
:
{
normal
:
{
opacity
:
0.8
,
shadowBlur
:
10
,
shadowOffsetX
:
0
,
shadowOffsetY
:
0
,
shadowColor
:
'
rgba(0, 0, 0, 0.5)
'
}
},
symbolSize
:
function
(
val
)
{
return
val
[
2
]
*
40
;
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录