Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
missman
incubator-echarts
提交
01f33e47
I
incubator-echarts
项目概览
missman
/
incubator-echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
I
incubator-echarts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
01f33e47
编写于
10月 04, 2015
作者:
L
lang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Pin symbol shape, markPoint
上级
a712df0f
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
293 addition
and
149 deletion
+293
-149
src/chart/helper/DataSymbol.js
src/chart/helper/DataSymbol.js
+29
-10
src/component/markPoint.js
src/component/markPoint.js
+109
-12
src/component/marker/MarkPointModel.js
src/component/marker/MarkPointModel.js
+5
-126
src/data/List.js
src/data/List.js
+2
-1
src/model/Model.js
src/model/Model.js
+2
-0
src/util/symbol.js
src/util/symbol.js
+60
-0
test/markPoint.html
test/markPoint.html
+86
-0
未找到文件。
src/chart/helper/DataSymbol.js
浏览文件 @
01f33e47
...
...
@@ -5,6 +5,13 @@ define(function (require) {
var
symbolCreators
=
require
(
'
../../util/symbol
'
);
var
graphic
=
require
(
'
../../util/graphic
'
);
function
normalizeSymbolSize
(
symbolSize
)
{
if
(
!
zrUtil
.
isArray
(
symbolSize
))
{
symbolSize
=
[
+
symbolSize
,
+
symbolSize
];
}
return
symbolSize
;
}
function
createSymbol
(
data
,
idx
,
enableAnimation
)
{
var
point
=
data
.
getItemLayout
(
idx
);
var
color
=
data
.
getItemVisual
(
idx
,
'
color
'
);
...
...
@@ -16,8 +23,19 @@ define(function (require) {
return
;
}
symbolSize
=
normalizeSymbolSize
(
symbolSize
);
// FIXME
var
x
=
-
0.5
;
var
y
=
-
0.5
;
var
w
=
1
;
var
h
=
1
;
if
(
symbolType
.
match
(
/
(
pin|Pin
)
$/
))
{
y
=
-
1
;
h
=
2
;
}
var
symbolEl
=
symbolCreators
.
createSymbol
(
symbolType
,
-
0.5
,
-
0.5
,
1
,
1
,
color
symbolType
,
x
,
y
,
w
,
h
,
color
);
symbolEl
.
position
=
point
;
...
...
@@ -29,7 +47,7 @@ define(function (require) {
symbolEl
.
scale
=
[
0.1
,
0.1
];
symbolEl
.
animateTo
({
scale
:
[
symbolSize
,
symbolSize
]
scale
:
symbolSize
},
500
);
// symbolEl
...
...
@@ -94,7 +112,9 @@ define(function (require) {
return
;
}
var
symbolSize
=
data
.
getItemVisual
(
newIdx
,
'
symbolSize
'
);
var
symbolSize
=
normalizeSymbolSize
(
data
.
getItemVisual
(
newIdx
,
'
symbolSize
'
)
);
var
point
=
data
.
getItemLayout
(
newIdx
);
// Symbol changed
...
...
@@ -108,22 +128,21 @@ define(function (require) {
return
;
}
// Color changed
// Update color
// FIXME emptyXXX ?
var
newColor
=
data
.
getItemVisual
(
newIdx
,
'
color
'
);
if
(
oldData
.
getItemVisual
(
newIdx
,
'
color
'
)
!==
newColor
)
{
el
.
setStyle
(
'
fill
'
,
newColor
);
}
el
.
setStyle
(
'
fill
'
,
newColor
);
// TODO Merge animateTo and attr methods into one
if
(
enableAnimation
)
{
el
.
animateTo
({
scale
:
[
symbolSize
,
symbolSize
]
,
scale
:
symbolSize
,
position
:
point
},
300
,
'
cubicOut
'
);
}
else
{
el
.
attr
({
scale
:
[
symbolSize
,
symbolSize
]
,
scale
:
symbolSize
,
position
:
point
.
slice
()
});
}
...
...
@@ -166,7 +185,7 @@ define(function (require) {
var
symbolSize
=
data
.
getItemVisual
(
idx
,
'
symbolSize
'
);
// Adjust the line width
el
.
__lineWidth
=
el
.
__lineWidth
||
el
.
style
.
lineWidth
;
el
.
style
.
lineWidth
=
el
.
__lineWidth
/
symbolSize
;
el
.
style
.
lineWidth
=
el
.
__lineWidth
/
(
symbolSize
[
0
]
||
symbolSize
)
;
},
this
);
this
.
_data
=
data
;
...
...
src/component/markPoint.js
浏览文件 @
01f33e47
// 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
'
);
...
...
@@ -32,37 +37,129 @@ define(function (require) {
},
_renderSeriesMP
:
function
(
seriesModel
,
mpModel
)
{
var
dataSymbolMap
=
this
.
_dataSymbolMap
;
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
();
this
.
group
.
add
(
dataSymbol
.
group
);
}
var
seriesData
=
seriesModel
.
getData
();
var
data
=
mpModel
.
getData
();
var
mpData
=
createList
(
coordSys
,
seriesData
,
mpModel
);
var
coordSys
=
seriesModel
.
coordinateSystem
;
mpData
.
each
([
'
x
'
,
'
y
'
],
function
(
x
,
y
,
idx
)
{
var
itemModel
=
mpData
.
getItemModel
(
idx
);
// FIXME Put visual out
data
.
each
([
'
x
'
,
'
y
'
],
function
(
x
,
y
,
idx
)
{
var
itemModel
=
data
.
getItemModel
(
idx
);
var
xPx
=
itemModel
.
getShallow
(
'
x
'
);
var
yPx
=
itemModel
.
getShallow
(
'
y
'
);
var
point
=
(
xPx
!=
null
&&
yPx
!=
null
)
?
[
xPx
,
yPx
]
:
coordSys
.
dataToPoint
([
x
,
y
]);
data
.
setItemLayout
(
idx
,
point
);
data
.
setItemVisual
(
idx
,
{
mpData
.
setItemLayout
(
idx
,
point
);
mpData
.
setItemVisual
(
idx
,
{
symbolSize
:
itemModel
.
getShallow
(
'
symbolSize
'
),
color
:
itemModel
.
get
(
'
itemStyle.normal.color
'
)
||
seriesData
.
getVisual
(
'
color
'
)
||
seriesData
.
getVisual
(
'
color
'
),
symbol
:
itemModel
.
getShallow
(
'
symbol
'
)
});
});
dataSymbol
.
updateData
(
data
,
true
);
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
;
valueArr
[
valueIndex
]
=
val
;
var
dataIndex
=
data
.
indexOfNearest
(
valueAxisDim
,
val
);
valueArr
[
1
-
valueIndex
]
=
data
.
get
(
baseAxisDim
,
dataIndex
);
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
,
baseAxisDim
,
valueAxisDim
,
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
]
&&
baseAxisDim
&&
valueAxisDim
)
{
var
value
=
markPointTypeCalculator
[
item
.
type
](
data
,
baseAxisDim
,
valueAxisDim
);
value
.
push
(
+
item
.
value
);
item
.
value
=
value
;
}
else
if
(
!
isNaN
(
item
.
value
))
{
item
.
value
=
[
item
.
xAxis
||
item
.
radiusAxis
,
item
.
yAxis
||
item
.
angleAxis
,
+
item
.
value
];
}
}
return
item
;
};
/**
* @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
if
(
dimensions
[
0
]
===
'
y
'
||
dimensions
[
0
]
===
'
angle
'
)
{
dimensions
.
inverse
();
}
var
mpData
=
new
List
(
dimensions
,
mpModel
);
mpData
.
initData
(
zrUtil
.
map
(
mpModel
.
get
(
'
data
'
),
zrUtil
.
curry
(
dataTransform
,
seriesData
,
baseAxis
&&
baseAxis
.
dim
,
valueAxis
&&
valueAxis
.
dim
)));
return
mpData
;
};
});
\ No newline at end of file
src/component/marker/MarkPointModel.js
浏览文件 @
01f33e47
define
(
function
(
require
)
{
var
List
=
require
(
'
../../data/List
'
);
var
zrUtil
=
require
(
'
zrender/core/util
'
);
var
Model
=
require
(
'
../../model/Model
'
);
// Default enable markpoint
var
globalDefault
=
require
(
'
../../model/globalDefault
'
);
globalDefault
.
markPoint
=
{};
var
geoCoordDataTransform
=
function
(
item
)
{
}
var
specialTypeCalculatorWithExtent
=
function
(
percent
,
data
,
mainAxisDim
,
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
;
valueArr
[
valueIndex
]
=
val
;
var
dataIndex
=
data
.
indexOfNearest
(
valueAxisDim
,
val
);
valueArr
[
1
-
valueIndex
]
=
data
.
get
(
mainAxisDim
,
dataIndex
);
return
valueArr
;
};
var
specialTypeCalculator
=
{
/**
* @method
* @param {module:echarts/data/List} data
* @param {string} mainAxisDim
* @param {string} valueAxisDim
*/
min
:
zrUtil
.
curry
(
specialTypeCalculatorWithExtent
,
0
),
/**
* @method
* @param {module:echarts/data/List} data
* @param {string} mainAxisDim
* @param {string} valueAxisDim
*/
max
:
zrUtil
.
curry
(
specialTypeCalculatorWithExtent
,
1
),
/**
* @method
* @param {module:echarts/data/List} data
* @param {string} mainAxisDim
* @param {string} valueAxisDim
*/
average
:
zrUtil
.
curry
(
specialTypeCalculatorWithExtent
,
0.5
)
}
var
dataTransform
=
function
(
data
,
mainAxisDim
,
valueAxisDim
,
item
)
{
// If not specify the position with pixel directly
if
(
isNaN
(
item
.
x
)
||
isNaN
(
item
.
y
))
{
// Special types, Compatible with 2.0
if
(
item
.
type
&&
specialTypeCalculator
[
item
.
type
]
&&
mainAxisDim
&&
valueAxisDim
)
{
var
value
=
specialTypeCalculator
[
item
.
type
](
data
,
mainAxisDim
,
valueAxisDim
);
value
.
push
(
+
item
.
value
);
item
.
value
=
value
;
}
else
if
(
!
isNaN
(
item
.
value
))
{
item
.
value
=
[
item
.
xAxis
||
item
.
radiusAxis
,
item
.
yAxis
||
item
.
angleAxis
,
item
.
value
];
}
}
return
item
;
};
// FIXME 公用?
var
getAxesDimMap
=
function
(
ecModel
,
seriesModel
)
{
var
coordSysType
=
seriesModel
.
get
(
'
coordinateSystem
'
);
var
mainAxisDim
;
var
valueAxisDim
;
if
(
coordSysType
===
'
cartesian2d
'
)
{
var
xAxisModel
=
ecModel
.
getComponent
(
'
xAxis
'
,
seriesModel
.
get
(
'
xAxisIndex
'
));
if
(
xAxisModel
.
type
===
'
category
'
)
{
mainAxisDim
=
'
y
'
;
valueAxisDim
=
'
x
'
;
}
else
{
mainAxisDim
=
'
x
'
;
valueAxisDim
=
'
y
'
;
}
}
else
if
(
coordSysType
===
'
polar
'
)
{
var
polarModel
=
ecModel
.
getComponent
(
seriesModel
.
get
(
'
polarIndex
'
));
var
radiusAxisModel
=
polarModel
.
findAxisModel
(
'
radiusAxis
'
);
if
(
radiusAxisModel
.
type
===
'
category
'
)
{
mainAxisDim
=
'
radius
'
;
valueAxisDim
=
'
angle
'
;
}
else
{
mainAxisDim
=
'
angle
'
;
valueAxisDim
=
'
radius
'
;
}
}
return
{
main
:
mainAxisDim
,
value
:
valueAxisDim
};
}
var
MarkPointModel
=
require
(
'
../../echarts
'
).
extendSeriesModel
({
var
MarkPointModel
=
require
(
'
../../echarts
'
).
extendComponentModel
({
type
:
'
markPoint
'
,
...
...
@@ -133,29 +35,10 @@ define(function (require) {
);
}
else
{
// FIXME 后面 data transform 是否会对新的 merge 有影响
mpModel
.
mergeOption
(
markPointOpt
,
true
);
}
var
seriesData
=
seriesModel
.
getData
();
var
dimensions
=
seriesData
.
dimensions
.
slice
();
// Polar and cartesian with category axis may have dimensions inversed
if
(
dimensions
[
0
]
===
'
y
'
||
dimensions
[
0
]
===
'
angle
'
)
{
dimensions
.
inverse
();
}
var
mpData
=
new
List
(
dimensions
,
mpModel
);
// Dim of axis of calculating min, max
var
axesDims
=
getAxesDimMap
(
ecModel
,
seriesModel
);
mpData
.
initData
(
zrUtil
.
map
(
markPointOpt
.
data
,
zrUtil
.
curry
(
dataTransform
,
seriesData
,
axesDims
.
main
,
axesDims
.
value
))
);
mpModel
.
getData
=
function
()
{
return
mpData
;
}
// Use the same series index
mpModel
.
seriesIndex
=
seriesModel
.
seriesIndex
;
seriesModel
.
markPointModel
=
mpModel
;
}
else
{
...
...
@@ -165,10 +48,6 @@ define(function (require) {
}
},
restoreData
:
function
()
{
// FIXME dataZoom needs to know markPoint model
},
defaultOption
:
{
zlevel
:
0
,
z
:
5
,
...
...
src/data/List.js
浏览文件 @
01f33e47
...
...
@@ -704,10 +704,11 @@ define(function (require) {
* @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
.
hostModel
.
seriesIndex
;
el
.
seriesIndex
=
hostModel
&&
hostModel
.
seriesIndex
;
this
.
_graphicEls
[
idx
]
=
el
;
};
...
...
src/model/Model.js
浏览文件 @
01f33e47
...
...
@@ -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
)
{
...
...
src/util/symbol.js
浏览文件 @
01f33e47
...
...
@@ -29,7 +29,56 @@ define(function(require) {
}
});
/**
* Pin shape
*/
var
Pin
=
graphic
.
extendShape
({
type
:
'
diamond
'
,
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
;
path
.
arc
(
x
,
cy
,
r
,
Math
.
PI
-
angle
,
Math
.
PI
*
2
+
angle
);
path
.
bezierCurveTo
(
x
+
dx
,
cy
+
dy
,
x
,
y
-
r
*
0.6
,
x
,
y
);
path
.
bezierCurveTo
(
x
,
y
-
r
*
0.6
,
x
-
dx
,
cy
+
dy
,
x
-
dx
,
cy
+
dy
);
}
});
var
symbolCreators
=
{
line
:
function
(
x
,
y
,
w
,
h
)
{
return
new
graphic
.
Line
({
shape
:
{
...
...
@@ -110,6 +159,17 @@ define(function(require) {
})
},
pin
:
function
(
x
,
y
,
w
,
h
)
{
return
new
Pin
({
shape
:
{
x
:
x
+
w
/
2
,
y
:
y
+
h
/
2
,
width
:
w
,
height
:
h
}
});
},
path
:
function
(
pathStr
,
x
,
y
,
w
,
h
)
{
return
graphic
.
makePath
(
pathStr
,
null
,
new
BoundingRect
(
x
,
y
,
w
,
h
));
}
...
...
test/markPoint.html
0 → 100644
浏览文件 @
01f33e47
<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
<
100
;
i
++
)
{
xAxisData
.
push
(
'
类目
'
+
i
);
data1
.
push
(
+
Math
.
random
().
toFixed
(
3
));
data2
.
push
(
+
Math
.
random
().
toFixed
(
3
));
data3
.
push
(
+
Math
.
random
().
toFixed
(
3
));
}
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
:
'
none
'
,
symbolSize
:
10
,
data
:
data1
,
markPoint
:
{
data
:
[{
type
:
'
max
'
,
value
:
1
}]
}
}]
});
})
</script>
</body>
</html>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录