Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
x649585723
incubator-echarts
提交
ab3872d5
I
incubator-echarts
项目概览
x649585723
/
incubator-echarts
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
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,发现更多精彩内容 >>
提交
ab3872d5
编写于
11月 01, 2013
作者:
K
kener
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
【^】 [pie]升级支持南丁格尔玫瑰图(半径/面积)模式
上级
22c5a35c
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
254 addition
and
15 deletion
+254
-15
doc/changelog.html
doc/changelog.html
+6
-0
doc/doc.html
doc/doc.html
+16
-0
doc/example/pie4.html
doc/example/pie4.html
+184
-0
src/chart/pie.js
src/chart/pie.js
+47
-15
src/config.js
src/config.js
+1
-0
未找到文件。
doc/changelog.html
浏览文件 @
ab3872d5
...
...
@@ -83,12 +83,18 @@
<div>
<h3>
Latest
<small>
(After 2013-09-29)
</small></h3>
<ul>
<li>
【+】 [chord]新增和弦图,支持多维选择
</li>
<li>
【^】 [pie]升级支持南丁格尔玫瑰图(半径/面积)模式
</li>
<li>
[#] [tooltip]雷达图空数据bug fix
</li>
<li>
[#] [categoryAxis]修复类目轴大数据小数精度问题,fix
<a
href=
"https://github.com/ecomfe/echarts/issues/110"
target=
"_blank"
>
this 》
</a></li>
<li>
[^] [tooltip][line][bar]优化高亮指示样式
</li>
<li>
[#] [tooltip]encodeHTML修复
</li>
<li>
[#] [k]修复阴阳线颜色错误,fix
<a
href=
"https://github.com/ecomfe/echarts/issues/112"
target=
"_blank"
>
this 》
</a></li>
<li>
[^] symbol增加箭头arrow,support
<a
href=
"http://www.oschina.net/question/1182177_128527"
target=
"_blank"
>
this 》
</a></li>
<li>
[^] [title]支持超链接跳转
</li>
<li>
[^] [pie][polar]支持中心坐标百分比格式
</li>
<li>
[^] [legend]多维选择和多行控制
</li>
<li>
[?] 依赖升级,
<a
href=
"http://ecomfe.github.io/zrender/"
target=
"_blank"
>
ZRender
</a>
1.0.5+
</li>
</ul>
</div>
<div>
...
...
doc/doc.html
浏览文件 @
ab3872d5
...
...
@@ -610,11 +610,21 @@ require(['echarts'], function(ec){
<td>
''
</td>
<td>
主标题文本
</td>
</tr>
<tr>
<td>
{string} link
</td>
<td>
''
</td>
<td>
主标题文本超链接
</td>
</tr>
<tr>
<td>
{string} subtext
</td>
<td>
''
</td>
<td>
副标题文本
</td>
</tr>
<tr>
<td>
{string} sublink
</td>
<td>
''
</td>
<td>
副标题文本超链接
</td>
</tr>
<tr>
<td>
{string | number} x
</td>
<td>
'left'
</td>
...
...
@@ -1834,6 +1844,12 @@ indicator : [
<td>
饼图
</td>
<td>
最小角度,防止某item的值过小而影响交互
</td>
</tr>
<tr>
<td>
{string} roseType
</td>
<td>
null
</td>
<td>
饼图
</td>
<td>
南丁格尔玫瑰图模式,'radius'(半径) | 'area'(面积)
</td>
</tr>
<tr>
<td>
{number} selectedOffset
</td>
<td>
10
</td>
...
...
doc/example/pie4.html
0 → 100644
浏览文件 @
ab3872d5
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"utf-8"
>
<title>
ECharts
</title>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<meta
name=
"description"
content=
"ECharts"
>
<meta
name=
"author"
content=
"linzhifeng@baidu.com"
>
<script
src=
"../asset/js/esl/esl.js"
></script>
<script
src=
"../asset/js/codemirror.js"
></script>
<script
src=
"../asset/js/javascript.js"
></script>
<link
href=
"../asset/css/bootstrap.css"
rel=
"stylesheet"
>
<link
href=
"../asset/css/bootstrap-responsive.css"
rel=
"stylesheet"
>
<link
href=
"../asset/css/codemirror.css"
rel=
"stylesheet"
>
<link
href=
"../asset/css/monokai.css"
rel=
"stylesheet"
>
<link
href=
"../asset/css/echartsHome.css"
rel=
"stylesheet"
>
<link
rel=
"shortcut icon"
href=
"../asset/ico/favicon.png"
>
</head>
<body>
<!-- NAVBAR
================================================== -->
<div
class=
"navbar navbar-inverse navbar-fixed-top"
>
<div
class=
"navbar-inner"
>
<div
class=
"container"
>
<button
type=
"button"
class=
"btn btn-navbar"
data-toggle=
"collapse"
data-target=
".nav-collapse"
>
<span
class=
"icon-bar"
></span>
<span
class=
"icon-bar"
></span>
<span
class=
"icon-bar"
></span>
</button>
<a
class=
"brand"
href=
"../../index.html"
>
ECharts
</a>
<div
class=
"nav-collapse collapse"
>
<a
id=
"forkme_banner"
href=
"https://github.com/ecomfe/echarts"
>
View on GitHub
</a>
<ul
class=
"nav"
>
<li><a
href=
"../../index.html"
><i
class=
"icon-home icon-white"
></i>
Home
</a></li>
<li
class=
"active"
><a
href=
"../example.html"
class=
"active"
>
Example
</a></li>
<li><a
href=
"../doc.html"
>
API
&
Doc
</a></li>
<li
class=
"dropdown"
>
<a
href=
"#"
class=
"dropdown-toggle"
data-toggle=
"dropdown"
><i
class=
"icon-download-alt icon-white"
></i>
Download
<b
class=
"caret"
></b></a>
<ul
class=
"dropdown-menu"
>
<li><a
id=
"last-release-link"
href=
""
>
</a></li>
<li><a
href=
"https://github.com/ecomfe/echarts/archive/master.zip"
>
ZIP (Latest)
</a></li>
</ul>
</li>
<li
class=
"dropdown"
>
<a
href=
"#"
class=
"dropdown-toggle"
data-toggle=
"dropdown"
>
Link
<b
class=
"caret"
></b></a>
<ul
class=
"dropdown-menu"
>
<li><a
href=
"https://github.com/ecomfe"
target=
"_blank"
>
Ecom-FE
</a></li>
<li><a
href=
"http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html"
target=
"_blank"
>
Data Visualization
</a></li>
<li
class=
"divider"
></li>
<!--li class="nav-header">Library</li-->
<li><a
href=
"http://ecomfe.github.io/zrender/index.html"
target=
"_blank"
>
ZRender
</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar-wrapper -->
<div
class=
"container-fluid"
>
<div
class=
"row-fluid"
>
<div
id=
"sidebar-code"
class=
"span4"
>
<div
class=
"well sidebar-nav"
>
<div
class=
"nav-header"
><a
href=
"#"
onclick=
"autoResize()"
class=
"icon-resize-full"
id =
"icon-resize"
></a>
option
</div>
<textarea
id=
"code"
name=
"code"
>
option = {
title : {
text: '南丁格尔玫瑰图',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a}
<br/>
{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y : 'bottom',
data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
},
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
restore : true,
saveAsImage : true
}
},
calculable : true,
series : [
{
name:'半径模式',
type:'pie',
radius : [20, 110],
center : ['25%', 200],
roseType : 'radius',
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true
},
labelLine : {
show : true
}
}
},
data:[
{value:10, name:'rose1'},
{value:5, name:'rose2'},
{value:15, name:'rose3'},
{value:25, name:'rose4'},
{value:20, name:'rose5'},
{value:35, name:'rose6'},
{value:30, name:'rose7'},
{value:40, name:'rose8'}
]
},
{
name:'面积模式',
type:'pie',
radius : [30, 110],
center : ['75%', 200],
roseType : 'area',
data:[
{value:10, name:'rose1'},
{value:5, name:'rose2'},
{value:15, name:'rose3'},
{value:25, name:'rose4'},
{value:20, name:'rose5'},
{value:35, name:'rose6'},
{value:30, name:'rose7'},
{value:40, name:'rose8'}
]
}
]
};
</textarea>
</div>
<!--/.well -->
</div>
<!--/span-->
<div
id=
"graphic"
class=
"span8"
>
<div
id=
"main"
class=
"main"
></div>
<div>
<button
onclick=
"refresh(true)"
>
Refresh ~
</button>
<span
id=
'wrong-message'
style=
"color:red"
></span>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<hr>
<!-- FOOTER -->
<footer>
<p
class=
"pull-right"
><a
href=
"#"
>
Back to top
</a></p>
<p>
©
2013 ECOM-FE
·
<a
href=
"https://github.com/ecomfe/echarts/blob/master/LICENSE.txt"
target=
"_blank"
>
Terms
</a>
·
<a
href=
"../changelog.html"
target=
"_blank"
>
Changelog
</a></p>
</footer>
</div>
<!--/.fluid-container-->
<script
src=
"../asset/js/jquery.js"
></script>
<script
src=
"../asset/js/bootstrap-transition.js"
></script>
<script
src=
"../asset/js/bootstrap-alert.js"
></script>
<script
src=
"../asset/js/bootstrap-modal.js"
></script>
<script
src=
"../asset/js/bootstrap-dropdown.js"
></script>
<script
src=
"../asset/js/bootstrap-scrollspy.js"
></script>
<script
src=
"../asset/js/bootstrap-tab.js"
></script>
<script
src=
"../asset/js/bootstrap-tooltip.js"
></script>
<script
src=
"../asset/js/bootstrap-popover.js"
></script>
<script
src=
"../asset/js/bootstrap-button.js"
></script>
<script
src=
"../asset/js/bootstrap-collapse.js"
></script>
<script
src=
"../asset/js/bootstrap-carousel.js"
></script>
<script
src=
"../asset/js/bootstrap-typeahead.js"
></script>
<script
src=
"../asset/js/echartsExample.js"
></script>
</body>
</html>
\ No newline at end of file
src/chart/pie.js
浏览文件 @
ab3872d5
...
...
@@ -91,6 +91,7 @@ define(function(require) {
var
itemName
;
var
totalSelected
=
0
;
// 迭代累计
var
totalValue
=
0
;
// 迭代累计
var
maxValue
=
Number
.
NEGATIVE_INFINITY
;
// 计算需要显示的个数和总值
for
(
var
i
=
0
,
l
=
data
.
length
;
i
<
l
;
i
++
)
{
...
...
@@ -103,6 +104,7 @@ define(function(require) {
if
(
self
.
selectedMap
[
itemName
])
{
totalSelected
++
;
totalValue
+=
+
data
[
i
].
value
;
maxValue
=
Math
.
max
(
maxValue
,
+
data
[
i
].
value
)
}
}
...
...
@@ -112,6 +114,9 @@ define(function(require) {
var
minAngle
=
serie
.
minAngle
;
var
totalAngle
=
360
-
(
minAngle
*
totalSelected
);
var
defaultColor
;
var
roseType
=
serie
.
roseType
;
var
r0
;
// 扇形内半径
var
r1
;
// 扇形外半径
for
(
var
i
=
0
,
l
=
data
.
length
;
i
<
l
;
i
++
){
itemName
=
data
[
i
].
name
;
...
...
@@ -129,12 +134,31 @@ define(function(require) {
}
percent
=
data
[
i
].
value
/
totalValue
;
endAngle
=
(
percent
*
totalAngle
+
startAngle
+
minAngle
)
.
toFixed
(
2
)
-
0
;
if
(
roseType
!=
'
area
'
)
{
endAngle
=
(
percent
*
totalAngle
+
startAngle
+
minAngle
)
.
toFixed
(
2
)
-
0
;
}
else
{
endAngle
=
(
totalAngle
/
l
+
startAngle
+
minAngle
)
.
toFixed
(
2
)
-
0
;
}
percent
=
(
percent
*
100
).
toFixed
(
2
);
r0
=
+
serie
.
radius
[
0
];
r1
=
+
serie
.
radius
[
1
];
if
(
roseType
==
'
radius
'
)
{
r1
=
data
[
i
].
value
/
maxValue
*
(
r1
-
r0
)
*
0.8
+
(
r1
-
r0
)
*
0.2
+
r0
;
}
else
if
(
roseType
==
'
area
'
)
{
r1
=
Math
.
sqrt
(
data
[
i
].
value
/
maxValue
)
*
(
r1
-
r0
)
+
r0
;
}
_buildItem
(
seriesIndex
,
i
,
percent
,
data
[
i
].
selected
,
r0
,
r1
,
startAngle
,
endAngle
,
defaultColor
);
startAngle
=
endAngle
;
...
...
@@ -146,11 +170,13 @@ define(function(require) {
*/
function
_buildItem
(
seriesIndex
,
dataIndex
,
percent
,
isSelected
,
r0
,
r1
,
startAngle
,
endAngle
,
defaultColor
)
{
// 扇形
var
sector
=
_getSector
(
seriesIndex
,
dataIndex
,
percent
,
isSelected
,
r0
,
r1
,
startAngle
,
endAngle
,
defaultColor
);
// 图形需要附加的私有数据
...
...
@@ -177,6 +203,7 @@ define(function(require) {
// 文本标签视觉引导线,需要显示则会有返回
var
labelLine
=
_getLabelLine
(
seriesIndex
,
dataIndex
,
r0
,
r1
,
startAngle
,
endAngle
,
defaultColor
,
false
);
...
...
@@ -191,6 +218,7 @@ define(function(require) {
*/
function
_getSector
(
seriesIndex
,
dataIndex
,
percent
,
isSelected
,
r0
,
r1
,
startAngle
,
endAngle
,
defaultColor
)
{
var
serie
=
series
[
seriesIndex
];
...
...
@@ -214,8 +242,8 @@ define(function(require) {
style
:
{
x
:
serie
.
center
[
0
],
// 圆心横坐标
y
:
serie
.
center
[
1
],
// 圆心纵坐标
r0
:
serie
.
radius
[
0
]
,
// 圆环内半径
r
:
serie
.
radius
[
1
]
,
// 圆环外半径
r0
:
r0
,
// 圆环内半径
r
:
r1
,
// 圆环外半径
startAngle
:
startAngle
,
endAngle
:
endAngle
,
brushType
:
'
both
'
,
...
...
@@ -281,12 +309,12 @@ define(function(require) {
)
||
'
middle
'
;
sector
.
style
.
textX
=
Math
.
round
(
serie
.
center
[
0
]
+
(
serie
.
radius
[
1
]
+
serie
.
radius
[
0
]
)
/
2
+
(
r1
+
r0
)
/
2
*
zrMath
.
cos
((
startAngle
+
endAngle
)
/
2
,
true
)
);
sector
.
style
.
textY
=
Math
.
round
(
serie
.
center
[
1
]
-
(
serie
.
radius
[
1
]
+
serie
.
radius
[
0
]
)
/
2
-
(
r1
+
r0
)
/
2
*
zrMath
.
sin
((
startAngle
+
endAngle
)
/
2
,
true
)
);
sector
.
style
.
textFont
=
self
.
getFont
(
self
.
deepQuery
(
...
...
@@ -319,12 +347,12 @@ define(function(require) {
)
||
'
middle
'
;
sector
.
highlightStyle
.
textX
=
Math
.
round
(
serie
.
center
[
0
]
+
(
serie
.
radius
[
1
]
+
serie
.
radius
[
0
]
)
/
2
+
(
r1
+
r0
)
/
2
*
zrMath
.
cos
((
startAngle
+
endAngle
)
/
2
,
true
)
);
sector
.
highlightStyle
.
textY
=
Math
.
round
(
serie
.
center
[
1
]
-
(
serie
.
radius
[
1
]
+
serie
.
radius
[
0
]
)
/
2
-
(
r1
+
r0
)
/
2
*
zrMath
.
sin
((
startAngle
+
endAngle
)
/
2
,
true
)
);
sector
.
highlightStyle
.
textFont
=
self
.
getFont
(
self
.
deepQuery
(
...
...
@@ -377,8 +405,8 @@ define(function(require) {
if
(
labelControl
.
position
==
'
outer
'
)
{
// 外部显示,默认
radius
=
serie
.
radius
[
1
]
+
itemStyle
[
status
].
labelLine
.
length
+
textStyle
.
fontSize
;
-
-
itemStyle
[
status
].
labelLine
.
length
-
-
textStyle
.
fontSize
;
textAlign
=
(
midAngle
>=
150
&&
midAngle
<=
210
)
?
'
right
'
:
((
midAngle
<=
30
||
midAngle
>=
330
)
...
...
@@ -490,6 +518,7 @@ define(function(require) {
*/
function
_getLabelLine
(
seriesIndex
,
dataIndex
,
r0
,
r1
,
startAngle
,
endAngle
,
defaultColor
,
isEmphasis
)
{
...
...
@@ -516,9 +545,9 @@ define(function(require) {
var
centerX
=
serie
.
center
[
0
];
// 圆心横坐标
var
centerY
=
serie
.
center
[
1
];
// 圆心纵坐标
// 视觉引导线起点半径
var
midRadius
=
serie
.
radius
[
1
]
;
var
midRadius
=
r1
;
// 视觉引导线终点半径
var
maxRadius
=
midRadius
+
labelLineControl
.
length
;
var
maxRadius
=
serie
.
radius
[
1
]
-
-
labelLineControl
.
length
;
var
midAngle
=
((
endAngle
+
startAngle
)
/
2
)
%
360
;
// 角度中值
var
cosValue
=
zrMath
.
cos
(
midAngle
,
true
);
var
sinValue
=
zrMath
.
sin
(
midAngle
,
true
);
...
...
@@ -1082,7 +1111,10 @@ define(function(require) {
var
startAngle
=
shape
.
style
.
startAngle
;
var
endAngle
=
shape
.
style
.
endAngle
;
var
defaultColor
=
shape
.
highlightStyle
.
color
;
var
r0
=
+
series
[
seriesIndex
].
radius
[
0
];
// 扇形内半径
var
r1
=
+
series
[
seriesIndex
].
radius
[
1
];
// 扇形外半径
// 文本标签,需要显示则会有返回
var
label
=
_getLabel
(
seriesIndex
,
dataIndex
,
percent
,
...
...
@@ -1092,10 +1124,10 @@ define(function(require) {
if
(
label
)
{
zr
.
addHoverShape
(
label
);
}
// 文本标签视觉引导线,需要显示则会有返回
var
labelLine
=
_getLabelLine
(
seriesIndex
,
dataIndex
,
shape
.
style
.
r0
,
shape
.
style
.
r
,
startAngle
,
endAngle
,
defaultColor
,
true
);
...
...
src/config.js
浏览文件 @
ab3872d5
...
...
@@ -537,6 +537,7 @@ define(function() {
minAngle
:
5
,
selectedOffset
:
10
,
// 选中是扇区偏移量
// selectedMode: false, // 选择模式,默认关闭,可选single,multiple
// roseType : null, // 南丁格尔玫瑰图模式,'radius'(半径) | 'area'(面积)
itemStyle
:
{
normal
:
{
label
:
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录