Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
半栈学徒
incubator-echarts
提交
3c7e8fda
I
incubator-echarts
项目概览
半栈学徒
/
incubator-echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
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,发现更多精彩内容 >>
提交
3c7e8fda
编写于
12月 27, 2016
作者:
1
100pah
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
tweak
上级
25022426
变更
5
展开全部
隐藏空白更改
内联
并排
Showing
5 changed file
with
528 addition
and
138 deletion
+528
-138
src/chart/bar/BarView.js
src/chart/bar/BarView.js
+9
-1
src/chart/bar/PictorialBarView.js
src/chart/bar/PictorialBarView.js
+114
-85
src/chart/bar/helper.js
src/chart/bar/helper.js
+0
-8
test/pictorial-repeat.html
test/pictorial-repeat.html
+242
-15
test/pictorial-single.html
test/pictorial-single.html
+163
-29
未找到文件。
src/chart/bar/BarView.js
浏览文件 @
3c7e8fda
...
...
@@ -6,6 +6,8 @@ define(function (require) {
var
graphic
=
require
(
'
../../util/graphic
'
);
var
helper
=
require
(
'
./helper
'
);
var
BAR_BORDER_WIDTH_QUERY
=
[
'
itemStyle
'
,
'
normal
'
,
'
barBorderWidth
'
];
// FIXME
// Just for compatible with ec2.
zrUtil
.
extend
(
require
(
'
../../model/Model
'
).
prototype
,
require
(
'
./barItemStyle
'
));
...
...
@@ -131,7 +133,7 @@ define(function (require) {
function
getRectItemLayout
(
data
,
dataIndex
,
itemModel
)
{
var
layout
=
data
.
getItemLayout
(
dataIndex
);
var
fixedLineWidth
=
helper
.
getLineWidth
(
itemModel
,
layout
);
var
fixedLineWidth
=
getLineWidth
(
itemModel
,
layout
);
// fix layout with lineWidth
var
signX
=
layout
.
width
>
0
?
1
:
-
1
;
...
...
@@ -172,5 +174,11 @@ define(function (require) {
graphic
.
setHoverStyle
(
el
,
hoverStyle
);
}
// In case width or height are too small.
function
getLineWidth
(
itemModel
,
rawLayout
)
{
var
lineWidth
=
itemModel
.
get
(
BAR_BORDER_WIDTH_QUERY
)
||
0
;
return
Math
.
min
(
lineWidth
,
Math
.
abs
(
rawLayout
.
width
),
Math
.
abs
(
rawLayout
.
height
));
}
return
BarView
;
});
\ No newline at end of file
src/chart/bar/PictorialBarView.js
浏览文件 @
3c7e8fda
...
...
@@ -8,12 +8,16 @@ define(function (require) {
var
parsePercent
=
numberUtil
.
parsePercent
;
var
BAR_BORDER_WIDTH_QUERY
=
[
'
itemStyle
'
,
'
normal
'
,
'
borderWidth
'
];
// index: +isHorizontal
var
LAYOUT_ATTRS
=
[
{
xy
:
'
x
'
,
wh
:
'
width
'
,
index
:
0
,
posDesc
:
[
'
left
'
,
'
right
'
]},
{
xy
:
'
y
'
,
wh
:
'
height
'
,
index
:
1
,
posDesc
:
[
'
top
'
,
'
bottom
'
]}
];
var
pathForLineWidth
=
new
graphic
.
Circle
();
var
BarView
=
require
(
'
../../echarts
'
).
extendChartView
({
type
:
'
pictorialBar
'
,
...
...
@@ -29,6 +33,7 @@ define(function (require) {
var
coordSysRect
=
cartesian
.
grid
.
getRect
();
var
opt
=
{
ecSize
:
{
width
:
api
.
getWidth
(),
height
:
api
.
getHeight
()},
seriesModel
:
seriesModel
,
coordSys
:
cartesian
,
coordSysExtent
:
[
...
...
@@ -125,28 +130,29 @@ define(function (require) {
var
layout
=
data
.
getItemLayout
(
dataIndex
);
var
symbolRepeat
=
itemModel
.
get
(
'
symbolRepeat
'
);
var
symbolClip
=
itemModel
.
get
(
'
symbolClip
'
);
var
lineWidth
=
helper
.
getLineWidth
(
itemModel
,
layout
);
var
symbolPosition
=
itemModel
.
get
(
'
symbolPosition
'
)
||
((
symbolRepeat
||
symbolClip
)
?
'
start
'
:
'
center
'
);
var
symbolPosition
=
itemModel
.
get
(
'
symbolPosition
'
)
||
'
start
'
;
var
symbolRotate
=
itemModel
.
get
(
'
symbolRotate
'
);
var
rotation
=
(
symbolRotate
||
0
)
*
Math
.
PI
/
180
||
0
;
var
symbolMeta
=
{
layout
:
layout
,
lineWidth
:
lineWidth
,
symbolType
:
data
.
getItemVisual
(
dataIndex
,
'
symbol
'
)
||
'
circle
'
,
color
:
data
.
getItemVisual
(
dataIndex
,
'
color
'
),
symbolClip
:
symbolClip
,
symbolRepeat
:
symbolRepeat
,
symbolRepeatDirection
:
itemModel
.
get
(
'
symbolRepeatDirection
'
),
rotation
:
(
symbolRotate
||
0
)
*
Math
.
PI
/
180
||
0
rotation
:
rotation
};
prepareBarLength
(
itemModel
,
symbolRepeat
,
layout
,
opt
,
symbolMeta
);
prepareSymbolSize
(
data
,
dataIndex
,
layout
,
opt
,
symbolRepeat
,
symbolClip
,
symbolMeta
.
barFullLength
,
symbolMeta
data
,
dataIndex
,
layout
,
symbolRepeat
,
symbolClip
,
symbolMeta
.
barFullLength
,
symbolMeta
.
pxSign
,
opt
,
symbolMeta
);
prepareLineWidth
(
itemModel
,
symbolMeta
.
symbolScale
,
rotation
,
opt
,
symbolMeta
);
var
symbolSize
=
symbolMeta
.
symbolSize
;
var
symbolOffset
=
itemModel
.
get
(
'
symbolOffset
'
);
if
(
zrUtil
.
isArray
(
symbolOffset
))
{
...
...
@@ -158,7 +164,7 @@ define(function (require) {
prepareLayoutInfo
(
itemModel
,
symbolSize
,
layout
,
symbolRepeat
,
symbolClip
,
symbolOffset
,
symbolPosition
,
l
ineWidth
,
symbolMeta
.
barFullLength
,
symbolMeta
.
repeatLength
,
symbolPosition
,
symbolMeta
.
valueL
ineWidth
,
symbolMeta
.
barFullLength
,
symbolMeta
.
repeatLength
,
opt
,
symbolMeta
);
...
...
@@ -179,23 +185,34 @@ define(function (require) {
:
layout
[
valueDim
.
wh
];
output
.
repeatLength
=
symbolBoundingData
!=
null
?
barFullLength
:
layout
[
valueDim
.
wh
];
output
.
pxSign
=
barFullLength
>
0
?
1
:
barFullLength
<
0
?
-
1
:
0
;
}
// Support ['100%', '100%']
function
prepareSymbolSize
(
data
,
dataIndex
,
layout
,
opt
,
symbolRepeat
,
symbolClip
,
barFullLength
,
output
)
{
function
prepareSymbolSize
(
data
,
dataIndex
,
layout
,
symbolRepeat
,
symbolClip
,
barFullLength
,
pxSign
,
opt
,
output
)
{
var
valueDim
=
opt
.
valueDim
;
var
categoryDim
=
opt
.
categoryDim
;
var
categorySize
=
Math
.
abs
(
layout
[
categoryDim
.
wh
]);
var
symbolSize
=
zrUtil
.
retrieve
(
data
.
getItemVisual
(
dataIndex
,
'
symbolSize
'
),
[
'
100%
'
,
'
100%
'
]
);
if
(
!
zrUtil
.
isArray
(
symbolSize
))
{
var
symbolSize
=
data
.
getItemVisual
(
dataIndex
,
'
symbolSize
'
);
if
(
zrUtil
.
isArray
(
symbolSize
))
{
symbolSize
=
symbolSize
.
slice
();
}
else
{
if
(
symbolSize
==
null
)
{
symbolSize
=
'
100%
'
;
}
symbolSize
=
[
symbolSize
,
symbolSize
];
}
// Note: percentage symbolSize (like '100%') do not consider lineWidth, because it is
// to complicated to calculate real percent value if considering scaled lineWidth.
// So the actual size will bigger than layout size if lineWidth is bigger than zero,
// which can be tolerated in pictorial chart.
symbolSize
[
categoryDim
.
index
]
=
parsePercent
(
symbolSize
[
categoryDim
.
index
],
categorySize
...
...
@@ -206,46 +223,82 @@ define(function (require) {
);
output
.
symbolSize
=
symbolSize
;
// If x or y is less than zero, show reversed shape.
var
symbolScale
=
output
.
symbolScale
=
[
symbolSize
[
0
]
/
2
,
symbolSize
[
1
]
/
2
];
// Follow convention, 'right' and 'top' is the normal scale.
symbolScale
[
valueDim
.
index
]
*=
(
opt
.
isHorizontal
?
-
1
:
1
)
*
pxSign
;
}
function
prepareLineWidth
(
itemModel
,
symbolScale
,
rotation
,
opt
,
output
)
{
// In symbols are drawn with scale, so do not need to care about the case that width
// or height are too small. But symbol use strokeNoScale, where acture lineWidth should
// be calculated.
var
valueLineWidth
=
itemModel
.
get
(
BAR_BORDER_WIDTH_QUERY
)
||
0
;
if
(
valueLineWidth
)
{
pathForLineWidth
.
attr
({
scale
:
symbolScale
.
slice
(),
rotation
:
rotation
});
pathForLineWidth
.
updateTransform
();
valueLineWidth
/=
pathForLineWidth
.
getLineScale
();
valueLineWidth
*=
symbolScale
[
opt
.
valueDim
.
index
];
}
output
.
valueLineWidth
=
valueLineWidth
;
}
function
prepareLayoutInfo
(
itemModel
,
symbolSize
,
layout
,
symbolRepeat
,
symbolClip
,
symbolOffset
,
symbolPosition
,
l
ineWidth
,
barFullLength
,
repeatLength
,
opt
,
output
symbolPosition
,
valueL
ineWidth
,
barFullLength
,
repeatLength
,
opt
,
output
)
{
var
categoryDim
=
opt
.
categoryDim
;
var
valueDim
=
opt
.
valueDim
;
var
pxSign
=
output
.
pxSign
;
var
symbolMargin
=
parsePercent
(
zrUtil
.
retrieve
(
itemModel
.
get
(
'
symbolMargin
'
),
symbolRepeat
?
'
15%
'
:
0
),
symbolSize
[
valueDim
.
index
]
);
var
unitLength
=
symbolSize
[
valueDim
.
index
]
+
lineWidth
;
var
pathLength
;
var
unitLength
=
symbolSize
[
valueDim
.
index
]
+
valueLineWidth
;
var
uLenWithMargin
=
Math
.
max
(
unitLength
+
symbolMargin
*
2
,
0
);
var
pathLenWithMargin
=
uLenWithMargin
;
// Note: rotation will not effect the layout of symbols, because user may
// want symbols to rotate on its center, which should not be translated
// when rotating.
if
(
symbolRepeat
)
{
var
unitWithMargin
=
unitLength
+
symbolMargin
*
2
;
var
absBarFullLength
=
Math
.
abs
(
barFullLength
);
// When symbol margin is less than 0, margin at both ends will be subtracted
// to ensure that all of the symbols will not be overflow the given area.
var
endFix
=
symbolMargin
>=
0
?
0
:
symbolMargin
*
2
;
var
repeatTimes
=
numberUtil
.
isNumeric
(
symbolRepeat
)
?
symbolRepeat
:
Math
.
ceil
(
absBarFullLength
/
unitWithMargin
);
?
symbolRepeat
:
toIntTimes
((
absBarFullLength
+
endFix
)
/
uLenWithMargin
);
// Adjust calculate margin, to ensure each symbol is displayed
// entirely in the given layout area.
symbolMargin
=
(
absBarFullLength
/
repeatTimes
-
unitLength
)
/
2
;
var
mDiff
=
absBarFullLength
-
repeatTimes
*
unitLength
;
symbolMargin
=
mDiff
/
2
/
(
mDiff
>=
0
?
repeatTimes
:
repeatTimes
-
1
);
uLenWithMargin
=
unitLength
+
symbolMargin
*
2
;
endFix
=
mDiff
>=
0
?
0
:
symbolMargin
*
2
;
// Update repeatTimes
if symbolBoundingData not set
.
// Update repeatTimes
when not all symbol will be shown
.
repeatTimes
=
output
.
repeatTimes
=
numberUtil
.
isNumeric
(
symbolRepeat
)
?
symbolRepeat
:
Math
.
ceil
(
Math
.
abs
(
repeatLength
)
/
unitWithMargin
);
pathLength
=
repeatTimes
*
(
unitLength
+
symbolMargin
*
2
);
}
else
{
pathLength
=
unitLength
+
symbolMargin
*
2
;
?
symbolRepeat
:
toIntTimes
((
Math
.
abs
(
repeatLength
)
+
endFix
)
/
uLenWithMargin
);
pathLenWithMargin
=
repeatTimes
*
uLenWithMargin
-
endFix
;
}
output
.
symbolMargin
=
symbolMargin
;
var
pxSign
=
output
.
pxSign
=
barFullLength
>
0
?
1
:
barFullLength
<
0
?
-
1
:
0
;
var
sizeFix
=
pxSign
*
(
pathLength
/
2
);
var
sizeFix
=
pxSign
*
(
pathLenWithMargin
/
2
);
var
pathPosition
=
output
.
pathPosition
=
[];
pathPosition
[
categoryDim
.
index
]
=
layout
[
categoryDim
.
wh
]
/
2
;
pathPosition
[
valueDim
.
index
]
=
symbolPosition
===
'
start
'
...
...
@@ -268,14 +321,12 @@ define(function (require) {
);
barRectShape
[
categoryDim
.
wh
]
=
layout
[
categoryDim
.
wh
];
var
clipShape
=
output
.
clipShape
=
{
x
:
0
,
y
:
0
};
var
clipShape
=
output
.
clipShape
=
{};
// Consider that symbol may be overflow layout rect.
clipShape
[
categoryDim
.
xy
]
=
-
layout
[
categoryDim
.
xy
];
clipShape
[
categoryDim
.
wh
]
=
opt
.
ecSize
[
categoryDim
.
wh
];
clipShape
[
valueDim
.
xy
]
=
0
;
clipShape
[
valueDim
.
wh
]
=
layout
[
valueDim
.
wh
];
clipShape
[
categoryDim
.
wh
]
=
layout
[
categoryDim
.
wh
];
// If x or y is less than zero, show reversed shape.
var
symbolScale
=
output
.
symbolScale
=
[
symbolSize
[
0
]
/
2
,
symbolSize
[
1
]
/
2
];
// Follow convention, 'right' and 'top' is the normal scale.
symbolScale
[
valueDim
.
index
]
*=
(
opt
.
isHorizontal
?
-
1
:
1
)
*
pxSign
;
}
function
createPath
(
symbolMeta
)
{
...
...
@@ -285,6 +336,9 @@ define(function (require) {
path
.
attr
({
culling
:
true
});
path
.
type
!==
'
image
'
&&
path
.
setStyle
({
strokeNoScale
:
true
});
return
path
;
}
...
...
@@ -292,12 +346,12 @@ define(function (require) {
var
bundle
=
bar
.
__pictorialBundle
;
var
animationModel
=
opt
.
animationModel
;
var
symbolSize
=
symbolMeta
.
symbolSize
;
var
lineWidth
=
symbolMeta
.
l
ineWidth
;
var
valueLineWidth
=
symbolMeta
.
valueL
ineWidth
;
var
pathPosition
=
symbolMeta
.
pathPosition
;
var
valueDim
=
opt
.
valueDim
;
var
repeatTimes
=
symbolMeta
.
repeatTimes
||
0
;
var
unit
=
symbolSize
[
opt
.
valueDim
.
index
]
+
l
ineWidth
+
symbolMeta
.
symbolMargin
*
2
;
var
unit
=
symbolSize
[
opt
.
valueDim
.
index
]
+
valueL
ineWidth
+
symbolMeta
.
symbolMargin
*
2
;
var
index
=
0
;
eachPath
(
bar
,
function
(
path
)
{
...
...
@@ -333,7 +387,7 @@ define(function (require) {
var
pxSign
=
symbolMeta
.
pxSign
;
var
i
=
index
;
if
(
symbolMeta
.
symbolRepeatDirection
===
'
start
'
?
pxSign
>
0
:
pxSign
<
0
)
{
i
=
repeatTimes
-
index
;
i
=
repeatTimes
-
1
-
index
;
}
position
[
valueDim
.
index
]
=
unit
*
(
i
-
repeatTimes
/
2
+
0.5
)
+
pathPosition
[
valueDim
.
index
];
return
{
...
...
@@ -433,44 +487,10 @@ define(function (require) {
updateBarRect
(
bar
,
dataIndex
,
opt
,
symbolMeta
);
// Three animation types: clip, position, scale.
// clipPath animation
// if (clipPath) {
// }
// FIXME
// animation clip path?
// bar.position[valueDim.index] = layout[valueDim.xy];
// eachPath(bar, function (path) {
// var target;
// // scale ainmation
// if (symbolMeta.symbolRepeat) {
// target = {scale: path.scale.slice()};
// path.attr({
// position: path.position.slice(),
// scale: [0, 0]
// });
// }
// // // position ainmation
// // else {
// // target = {position: position};
// // path.attr({
// // scale: scale
// // });
// // // FIXME
// // // start pos?
// // path.position[valueDim.index] = layout[valueDim.xy];
// // }
// graphic[updateMethod](path, target, animationModel, dataIndex);
// });
// }
return
bar
;
}
function
updateBar
(
data
,
dataIndex
,
itemModel
,
opt
,
symbolMeta
,
bar
)
{
var
clipPath
=
bar
.
__pictorialClipPath
;
var
mainPath
;
var
animationModel
=
opt
.
animationModel
;
var
bundle
=
bar
.
__pictorialBundle
;
...
...
@@ -482,11 +502,22 @@ define(function (require) {
updateRepeatSymbols
(
bar
,
dataIndex
,
opt
,
symbolMeta
);
}
else
{
mainPath
=
bar
.
__pictorialMainPath
;
var
mainPath
=
bar
.
__pictorialMainPath
;
mainPath
&&
graphic
.
updateProps
(
mainPath
,
{
position
:
symbolMeta
.
pathPosition
.
slice
(),
scale
:
symbolMeta
.
symbolScale
.
slice
(),
rotation
:
symbolMeta
.
rotation
},
animationModel
,
dataIndex
);
}
updateBarRect
(
bar
,
dataIndex
,
opt
,
symbolMeta
);
var
clipPath
=
bar
.
__pictorialClipPath
;
if
(
clipPath
)
{
graphic
.
updateProps
(
clipPath
,
...
...
@@ -495,16 +526,6 @@ define(function (require) {
dataIndex
);
}
mainPath
&&
graphic
.
updateProps
(
mainPath
,
{
position
:
symbolMeta
.
pathPosition
.
slice
(),
scale
:
symbolMeta
.
symbolScale
.
slice
(),
rotation
:
symbolMeta
.
rotation
},
animationModel
,
dataIndex
);
}
function
removeBar
(
dataIndex
,
opt
,
bar
)
{
...
...
@@ -573,5 +594,13 @@ define(function (require) {
graphic
.
setHoverStyle
(
barRect
,
barRectHoverStyle
);
}
function
toIntTimes
(
times
)
{
var
roundedTimes
=
Math
.
round
(
times
);
// Escapse accurate error
return
Math
.
abs
(
times
-
roundedTimes
)
<
1
e
-
4
?
roundedTimes
:
Math
.
ceil
(
times
);
}
return
BarView
;
});
\ No newline at end of file
src/chart/bar/helper.js
浏览文件 @
3c7e8fda
...
...
@@ -3,8 +3,6 @@ define(function (require) {
var
zrUtil
=
require
(
'
zrender/core/util
'
);
var
graphic
=
require
(
'
../../util/graphic
'
);
var
BAR_BORDER_WIDTH_QUERY
=
[
'
itemStyle
'
,
'
normal
'
,
'
barBorderWidth
'
];
var
helper
=
{};
helper
.
setLabel
=
function
(
...
...
@@ -50,11 +48,5 @@ define(function (require) {
}
}
// In case width or height are too small.
helper
.
getLineWidth
=
function
(
itemModel
,
rawLayout
)
{
var
lineWidth
=
itemModel
.
get
(
BAR_BORDER_WIDTH_QUERY
)
||
0
;
return
Math
.
min
(
lineWidth
,
Math
.
abs
(
rawLayout
.
width
),
Math
.
abs
(
rawLayout
.
height
));
};
return
helper
;
});
\ No newline at end of file
test/pictorial-repeat.html
浏览文件 @
3c7e8fda
...
...
@@ -6,6 +6,7 @@
<script
src=
"config.js"
></script>
<script
src=
"lib/jquery.min.js"
></script>
<script
src=
"lib/facePrint.js"
></script>
<script
src=
"data/symbols.js"
></script>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1"
/>
<link
rel=
"stylesheet"
href=
"reset.css"
>
</head>
...
...
@@ -24,7 +25,7 @@
font-size
:
16px
;
line-height
:
30px
;
font-weight
:
normal
;
background
:
#
A3AEFF
;
background
:
#
dde
;
}
</style>
...
...
@@ -32,10 +33,14 @@
<div
class=
"chart"
id=
"main1"
></div>
<h2>
vertical | clip | fixed repeatTimes
</h2>
<div
class=
"chart"
id=
"main1.1"
></div>
<h2>
dataURI | symbolSize responsive (
<strong>
TRY RESIZE
</strong>
)
</h2>
<div
class=
"chart"
id=
"symbolSize"
></div>
<h2>
horizontal | clip | positive | rotate
</h2>
<div
class=
"chart"
id=
"main2"
></div>
<h2>
horizontal | clip | negative | no animation
</h2>
<div
class=
"chart"
id=
"main3"
></div>
<h2>
negative symbolMargin | symbolPosition (check whether overflow)
</h2>
<div
class=
"chart"
id=
"main4"
></div>
<script>
...
...
@@ -64,12 +69,6 @@
});
}
var
pumpkin
=
'
path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z
'
;
var
shoppingCart
=
'
path://M12 29c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3zM32 29c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3zM32 16v-12h-24c0-1.105-0.895-2-2-2h-6v2h4l1.502 12.877c-0.915 0.733-1.502 1.859-1.502 3.123 0 2.209 1.791 4 4 4h24v-2h-24c-1.105 0-2-0.895-2-2 0-0.007 0-0.014 0-0.020l26-3.98z
'
;
var
pentagram
=
'
path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z
'
;
</script>
...
...
@@ -115,7 +114,7 @@
position
:
'
outside
'
},
},
symbol
:
shoppingCart
,
symbol
:
pathSymbols
.
plane
,
symbolRepeat
:
true
,
symbolMargin
:
'
40%
'
,
symbolSize
:
[
'
100%
'
,
'
80%
'
],
...
...
@@ -124,7 +123,7 @@
},
{
name
:
'
data2
'
,
type
:
'
pictorialBar
'
,
symbol
:
shoppingCart
,
symbol
:
pathSymbols
.
plane
,
symbolRepeat
:
true
,
symbolMargin
:
'
40%
'
,
symbolSize
:
[
'
100%
'
,
'
80%
'
],
...
...
@@ -151,6 +150,72 @@
<script>
makeChart
(
'
symbolSize
'
,
{
color
:
[
'
#e54035
'
],
xAxis
:
{
splitLine
:
{
show
:
false
},
axisTick
:
{
show
:
false
},
axisLine
:
{
show
:
false
},
axisLabel
:
{
show
:
false
}
},
yAxis
:
{
data
:
[
'
a
'
,
'
b
'
,
'
c
'
],
axisTick
:
{
show
:
false
},
axisLine
:
{
show
:
false
},
axisLabel
:
{
show
:
false
}
},
grid
:
{
height
:
80
},
series
:
[{
name
:
'
glyph
'
,
type
:
'
pictorialBar
'
,
symbol
:
imageSymbols
.
spirit
,
symbolRepeat
:
10
,
symbolSize
:
[
20
,
20
],
data
:
[
100
,
100
,
100
]
},
{
name
:
'
glyph
'
,
type
:
'
pictorialBar
'
,
symbol
:
'
rect
'
,
barGap
:
'
-100%
'
,
symbolSize
:
[
'
20%
'
,
24
],
itemStyle
:
{
normal
:
{
color
:
'
#e54035
'
}
},
label
:
{
normal
:
{
show
:
true
,
formatter
:
'
16 亿
'
,
textStyle
:
{
color
:
'
#fff
'
,
fontSize
:
18
,
fontFamily
:
'
Arial
'
,
fontWeight
:
'
bold
'
}
}
},
data
:
[
'
-
'
,
100
,
'
-
'
],
z
:
100
}]
});
</script>
<script>
makeChart
(
'
main1.1
'
,
{
legend
:
{
...
...
@@ -178,7 +243,7 @@
series
:
[{
name
:
'
bg
'
,
type
:
'
pictorialBar
'
,
symbol
:
pentagram
,
symbol
:
p
athSymbols
.
p
entagram
,
symbolRepeat
:
5
,
itemStyle
:
{
normal
:
{
...
...
@@ -190,7 +255,7 @@
},
{
name
:
'
data
'
,
type
:
'
pictorialBar
'
,
symbol
:
pentagram
,
symbol
:
p
athSymbols
.
p
entagram
,
symbolRepeat
:
5
,
symbolClip
:
true
,
z
:
10
,
...
...
@@ -235,7 +300,7 @@
name
:
'
bg
'
,
type
:
'
pictorialBar
'
,
barGap
:
'
-100%
'
,
symbol
:
pumpkin
,
symbol
:
p
athSymbols
.
p
umpkin
,
symbolRotate
:
30
,
itemStyle
:
{
normal
:
{
...
...
@@ -254,12 +319,13 @@
},
silent
:
true
,
symbolRepeat
:
true
,
// symbolRepeatDirection: 'start',
symbolBoundingData
:
60
,
data
:
[
12
,
60
,
54
,
'
-
'
,
23
,
2
,
0
,
25
]
},
{
name
:
'
data
'
,
type
:
'
pictorialBar
'
,
symbol
:
pumpkin
,
symbol
:
p
athSymbols
.
p
umpkin
,
symbolRotate
:
30
,
symbolRepeat
:
true
,
symbolClip
:
true
,
...
...
@@ -318,7 +384,7 @@
name
:
'
bg
'
,
type
:
'
pictorialBar
'
,
barGap
:
'
-100%
'
,
symbol
:
pumpkin
,
symbol
:
p
athSymbols
.
p
umpkin
,
itemStyle
:
{
normal
:
{
color
:
'
#ddd
'
...
...
@@ -348,7 +414,7 @@
color
:
'
blue
'
}
},
symbol
:
pumpkin
,
symbol
:
p
athSymbols
.
p
umpkin
,
symbolRepeat
:
true
,
symbolClip
:
true
,
symbolRotate
:
30
,
...
...
@@ -370,5 +436,166 @@
<script>
makeChart
(
'
main4
'
,
{
color
:
[
'
#bb0004
'
,
'
orange
'
],
xAxis
:
{
data
:
[],
axisTick
:
{
show
:
false
},
axisLabel
:
{
show
:
false
}
},
yAxis
:
{
splitLine
:
{
show
:
false
},
axisTick
:
{
show
:
false
},
axisLine
:
{
show
:
false
},
axisLabel
:
{
show
:
false
}
},
grid
:
{
bottom
:
100
},
animationEasing
:
'
elasticOut
'
,
series
:
[{
name
:
'
all
'
,
type
:
'
pictorialBar
'
,
barCategoryGap
:
'
40%
'
,
label
:
{
normal
:
{
show
:
true
,
position
:
'
outside
'
}
},
itemStyle
:
{
normal
:
{
borderColor
:
'
rgba(0,0,0,0.5)
'
,
borderWidth
:
6
}
},
symbol
:
'
circle
'
,
data
:
[{
value
:
29000
,
symbolBoundingData
:
29000
,
symbolRepeat
:
true
,
label
:
{
normal
:
{
formatter
:
'
start
'
}}
},
{
value
:
29000
,
symbolBoundingData
:
29000
,
symbolRepeat
:
true
,
symbolSize
:
[
'
80%
'
,
'
20%
'
],
label
:
{
normal
:
{
formatter
:
'
start
'
}}
},
{
value
:
29000
,
symbolBoundingData
:
29000
,
symbolRepeat
:
true
,
symbolMargin
:
10
,
label
:
{
normal
:
{
formatter
:
'
start
'
}}
},
{
value
:
29000
,
symbolBoundingData
:
29000
,
symbolRepeat
:
true
,
symbolMargin
:
30
,
symbolSize
:
[
'
100%
'
,
160
],
label
:
{
normal
:
{
formatter
:
'
start
'
}}
},
{
value
:
29000
,
symbolBoundingData
:
29000
,
symbolRepeat
:
true
,
symbolMargin
:
30
,
symbolSize
:
[
'
100%
'
,
160
],
symbolPosition
:
'
center
'
,
label
:
{
normal
:
{
formatter
:
'
center
'
}}
},
{
value
:
29000
,
symbolBoundingData
:
29000
,
symbolRepeat
:
true
,
symbolMargin
:
30
,
symbolSize
:
[
'
100%
'
,
160
],
symbolPosition
:
'
end
'
,
label
:
{
normal
:
{
formatter
:
'
end
'
}}
},
{
value
:
29000
,
symbolBoundingData
:
29000
,
symbolRepeat
:
true
,
symbolSize
:
[
'
80%
'
,
'
120%
'
],
symbolMargin
:
'
-30%
'
,
label
:
{
normal
:
{
formatter
:
'
start
'
}}
},
{
value
:
29000
,
symbolBoundingData
:
29000
,
symbolRepeat
:
true
,
symbolSize
:
[
'
80%
'
,
'
120%
'
],
symbolMargin
:
'
-30%
'
,
symbolPosition
:
'
center
'
,
label
:
{
normal
:
{
formatter
:
'
center
'
}}
},
{
value
:
29000
,
symbolBoundingData
:
29000
,
symbolRepeat
:
true
,
symbolRotate
:
80
,
symbolSize
:
[
'
80%
'
,
'
120%
'
],
symbolMargin
:
'
-30%
'
,
symbolPosition
:
'
end
'
,
label
:
{
normal
:
{
formatter
:
'
end
'
}}
},
{
value
:
19000
,
symbolPosition
:
'
start
'
,
label
:
{
normal
:
{
formatter
:
'
start
'
}}
},
{
value
:
19000
,
symbolSize
:
[
'
60%
'
,
'
20%
'
],
symbolPosition
:
'
start
'
,
label
:
{
normal
:
{
formatter
:
'
start
'
}}
},
{
value
:
19000
,
symbolSize
:
[
'
60%
'
,
'
20%
'
],
symbolPosition
:
'
center
'
,
label
:
{
normal
:
{
formatter
:
'
center
'
}}
},
{
value
:
19000
,
symbolSize
:
[
'
60%
'
,
'
20%
'
],
symbolPosition
:
'
end
'
,
label
:
{
normal
:
{
formatter
:
'
end
'
}}
},
{
value
:
19000
,
symbolSize
:
[
'
60%
'
,
'
150%
'
],
symbolPosition
:
'
start
'
,
label
:
{
normal
:
{
formatter
:
'
start
'
}}
},
{
value
:
19000
,
symbolSize
:
[
'
60%
'
,
'
150%
'
],
symbolPosition
:
'
center
'
,
label
:
{
normal
:
{
formatter
:
'
center
'
}}
},
{
value
:
19000
,
symbolSize
:
[
'
60%
'
,
'
150%
'
],
symbolPosition
:
'
end
'
,
label
:
{
normal
:
{
formatter
:
'
end
'
}}
},
{
value
:
190
,
symbolPosition
:
'
end
'
,
label
:
{
normal
:
{
formatter
:
'
min
'
}}
}],
z
:
10
},
{
name
:
'
shadow2
'
,
type
:
'
bar
'
,
barGap
:
'
-100%
'
,
data
:
[
29000
,
29000
,
29000
,
29000
,
29000
,
29000
,
29000
,
29000
,
29000
,
19000
,
19000
,
19000
,
19000
,
19000
,
19000
,
19000
,
19
]
}]
});
</script>
</body>
</html>
\ No newline at end of file
test/pictorial-single.html
浏览文件 @
3c7e8fda
此差异已折叠。
点击以展开。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录