Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
x649585723
incubator-echarts
提交
30d3b35e
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,发现更多精彩内容 >>
提交
30d3b35e
编写于
6月 09, 2014
作者:
K
kener
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
gauge shadow支持 新增例子
上级
17db0b51
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
946 addition
and
38 deletion
+946
-38
doc/example/gauge3.html
doc/example/gauge3.html
+185
-0
doc/example/gauge4.html
doc/example/gauge4.html
+299
-0
doc/example/gauge5.html
doc/example/gauge5.html
+391
-0
src/chart/gauge.js
src/chart/gauge.js
+69
-36
src/config.js
src/config.js
+2
-2
未找到文件。
doc/example/gauge3.html
0 → 100644
浏览文件 @
30d3b35e
<!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 = {
tooltip : {
formatter: "{a}
<br/>
{b} : {c}%"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'业务指标',
type:'gauge',
startAngle: 180,
endAngle: 0,
center : ['50%', '90%'], // 默认全局居中
radius : 320,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 200
}
},
axisTick: { // 坐标轴小标记
splitNumber: 10, // 每份split细分多少段
length :12, // 属性length控制线长
},
axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
formatter: function(v){
switch (v+''){
case '10': return '低';
case '50': return '中';
case '90': return '高';
default: return '';
}
},
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#fff',
fontSize: 15,
fontWeight: 'bolder'
}
},
pointer: {
width:50,
length: '90%',
color: 'rgba(255, 255, 255, 0.8)'
},
title : {
show : true,
offsetCenter: [0, '-60%'], // x, y,单位px
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#fff',
fontSize: 30
}
},
detail : {
show : true,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: '#ccc',
width: 100,
height: 40,
offsetCenter: [0, -40], // x, y,单位px
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontSize : 50
}
},
data:[{value: 50, name: '完成率'}]
}
]
};
clearInterval(timeTicket);
timeTicket = setInterval(function (){
option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
myChart.setOption(option);
},2000)
</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>
©
2014
<a
href=
"http://efe.baidu.com"
target=
"_blank"
>
EFE
</a>
·
<a
href=
"https://github.com/ecomfe/echarts/blob/master/LICENSE.txt"
target=
"_blank"
>
License
</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
type=
"text/javascript"
>
var
timeTicket
;
</script>
<script
src=
"../asset/js/echartsExample.js"
></script>
</body>
</html>
\ No newline at end of file
doc/example/gauge4.html
0 → 100644
浏览文件 @
30d3b35e
<!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 = {
tooltip : {
formatter: "{a}
<br/>
{c} {b}"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'速度',
type:'gauge',
min:0,
max:220,
splitNumber:11,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10
}
},
axisTick: { // 坐标轴小标记
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length :20, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
title : {
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic'
}
},
detail : {
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder'
}
},
data:[{value: 40, name: 'km/h'}]
},
{
name:'转速',
type:'gauge',
center : ['25%', '55%'], // 默认全局居中
radius : '50%',
min:0,
max:7,
endAngle:45,
splitNumber:7,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8
}
},
axisTick: { // 坐标轴小标记
length :12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length :20, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
pointer: {
width:5
},
title : {
offsetCenter: [0, '-30%'], // x, y,单位px
},
detail : {
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder'
}
},
data:[{value: 1.5, name: 'x1000 r/min'}]
},
{
name:'油表',
type:'gauge',
center : ['75%', '50%'], // 默认全局居中
radius : '50%',
min:0,
max:2,
startAngle:135,
endAngle:45,
splitNumber:2,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']],
width: 8
}
},
axisTick: { // 坐标轴小标记
splitNumber:5,
length :10, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: {
formatter:function(v){
switch (v + '') {
case '0' : return 'E';
case '1' : return 'Gas';
case '2' : return 'F';
}
}
},
splitLine: { // 分隔线
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
pointer: {
width:2
},
title : {
show: false
},
detail : {
show: false
},
data:[{value: 0.5, name: 'gas'}]
},
{
name:'水表',
type:'gauge',
center : ['75%', '50%'], // 默认全局居中
radius : '50%',
min:0,
max:2,
startAngle:315,
endAngle:225,
splitNumber:2,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']],
width: 8
}
},
axisTick: { // 坐标轴小标记
show: false
},
axisLabel: {
formatter:function(v){
switch (v + '') {
case '0' : return 'H';
case '1' : return 'Water';
case '2' : return 'C';
}
}
},
splitLine: { // 分隔线
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: 'auto'
}
},
pointer: {
width:2
},
title : {
show: false
},
detail : {
show: false
},
data:[{value: 0.5, name: 'gas'}]
}
]
};
clearInterval(timeTicket);
timeTicket = setInterval(function (){
option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
myChart.setOption(option);
},2000)
</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>
©
2014
<a
href=
"http://efe.baidu.com"
target=
"_blank"
>
EFE
</a>
·
<a
href=
"https://github.com/ecomfe/echarts/blob/master/LICENSE.txt"
target=
"_blank"
>
License
</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
type=
"text/javascript"
>
var
timeTicket
;
</script>
<script
src=
"../asset/js/echartsExample.js"
></script>
</body>
</html>
\ No newline at end of file
doc/example/gauge5.html
0 → 100644
浏览文件 @
30d3b35e
<!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 = {
backgroundColor: '#1b1b1b',
tooltip : {
formatter: "{a}
<br/>
{c} {b}"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'速度',
type:'gauge',
min:0,
max:220,
splitNumber:11,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
width: 3,
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
splitLine: { // 分隔线
length :25, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
width:3,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer: { // 分隔线
shadowColor : '#fff', //默认透明
shadowBlur: 5
},
title : {
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
detail : {
backgroundColor: 'rgba(30,144,255,0.8)',
borderWidth: 1,
borderColor: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 5,
offsetCenter: [0, '50%'], // x, y,单位px
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder',
color: '#fff'
}
},
data:[{value: 40, name: 'km/h'}]
},
{
name:'转速',
type:'gauge',
center : ['25%', '55%'], // 默认全局居中
radius : '50%',
min:0,
max:7,
endAngle:45,
splitNumber:7,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],
width: 2,
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length :12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
splitLine: { // 分隔线
length :20, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
width:3,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer: {
width:5,
shadowColor : '#fff', //默认透明
shadowBlur: 5
},
title : {
offsetCenter: [0, '-30%'], // x, y,单位px
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder',
fontStyle: 'italic',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
detail : {
//backgroundColor: 'rgba(30,144,255,0.8)',
// borderWidth: 1,
borderColor: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 5,
width: 80,
height:30,
offsetCenter: [25, '20%'], // x, y,单位px
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontWeight: 'bolder',
color: '#fff'
}
},
data:[{value: 1.5, name: 'x1000 r/min'}]
},
{
name:'油表',
type:'gauge',
center : ['75%', '50%'], // 默认全局居中
radius : '50%',
min:0,
max:2,
startAngle:135,
endAngle:45,
splitNumber:2,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
width: 2,
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length :12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisLabel: {
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
},
formatter:function(v){
switch (v + '') {
case '0' : return 'E';
case '1' : return 'Gas';
case '2' : return 'F';
}
}
},
splitLine: { // 分隔线
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
width:3,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer: {
width:2,
shadowColor : '#fff', //默认透明
shadowBlur: 5
},
title : {
show: false
},
detail : {
show: false
},
data:[{value: 0.5, name: 'gas'}]
},
{
name:'水表',
type:'gauge',
center : ['75%', '50%'], // 默认全局居中
radius : '50%',
min:0,
max:2,
startAngle:315,
endAngle:225,
splitNumber:2,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
width: 2,
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
show: false
},
axisLabel: {
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
},
formatter:function(v){
switch (v + '') {
case '0' : return 'H';
case '1' : return 'Water';
case '2' : return 'C';
}
}
},
splitLine: { // 分隔线
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
width:3,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer: {
width:2,
shadowColor : '#fff', //默认透明
shadowBlur: 5
},
title : {
show: false
},
detail : {
show: false
},
data:[{value: 0.5, name: 'gas'}]
}
]
};
clearInterval(timeTicket);
timeTicket = setInterval(function (){
option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
myChart.setOption(option);
},2000)
</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>
©
2014
<a
href=
"http://efe.baidu.com"
target=
"_blank"
>
EFE
</a>
·
<a
href=
"https://github.com/ecomfe/echarts/blob/master/LICENSE.txt"
target=
"_blank"
>
License
</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
type=
"text/javascript"
>
var
timeTicket
;
</script>
<script
src=
"../asset/js/echartsExample.js"
></script>
</body>
</html>
\ No newline at end of file
src/chart/gauge.js
浏览文件 @
30d3b35e
...
...
@@ -106,7 +106,8 @@ define(function (require) {
var
startAngle
=
params
.
startAngle
;
var
totalAngle
=
params
.
totalAngle
;
var
colorArray
=
params
.
colorArray
;
var
lineWidth
=
serie
.
axisLine
.
lineStyle
.
width
;
var
lineStyle
=
serie
.
axisLine
.
lineStyle
;
var
lineWidth
=
lineStyle
.
width
;
var
r
=
params
.
radius
[
1
];
var
r0
=
r
-
lineWidth
;
...
...
@@ -118,9 +119,10 @@ define(function (require) {
newAngle
=
startAngle
-
totalAngle
*
colorArray
[
i
][
0
]
/
total
;
sectorShape
=
this
.
_getSector
(
center
,
r0
,
r
,
newAngle
,
// startAngle
lastAngle
,
// endAngle
colorArray
[
i
][
1
]
// color
newAngle
,
// startAngle
lastAngle
,
// endAngle
colorArray
[
i
][
1
],
// color
lineStyle
);
lastAngle
=
newAngle
;
sectorShape
.
_animationAdd
=
'
r
'
;
...
...
@@ -133,7 +135,7 @@ define(function (require) {
// 坐标轴分割线
_buildSplitLine
:
function
(
seriesIndex
)
{
var
serie
=
this
.
series
[
seriesIndex
];
if
(
!
serie
.
axis
Line
.
show
)
{
if
(
!
serie
.
split
Line
.
show
)
{
return
}
...
...
@@ -142,10 +144,8 @@ define(function (require) {
var
total
=
serie
.
max
-
min
;
var
splitLine
=
serie
.
splitLine
;
var
length
=
splitLine
.
length
;
var
lineType
=
splitLine
.
lineStyle
.
type
;
var
lineWidth
=
splitLine
.
lineStyle
.
width
;
var
color
=
splitLine
.
lineStyle
.
color
;
var
lineStyle
=
splitLine
.
lineStyle
;
var
color
=
lineStyle
.
color
;
var
params
=
this
.
paramsMap
[
seriesIndex
];
var
center
=
params
.
center
;
var
startAngle
=
params
.
startAngle
*
Math
.
PI
/
180
;
...
...
@@ -172,8 +172,12 @@ define(function (require) {
strokeColor
:
color
==
'
auto
'
?
this
.
_getColor
(
seriesIndex
,
min
+
total
/
splitNumber
*
i
)
:
color
,
lineType
:
lineType
,
lineWidth
:
lineWidth
lineType
:
lineStyle
.
type
,
lineWidth
:
lineStyle
.
width
,
shadowColor
:
lineStyle
.
shadowColor
,
shadowBlur
:
lineStyle
.
shadowBlur
,
shadowOffsetX
:
lineStyle
.
shadowOffsetX
,
shadowOffsetY
:
lineStyle
.
shadowOffsetY
}
}));
}
...
...
@@ -192,9 +196,8 @@ define(function (require) {
var
axisTick
=
serie
.
axisTick
;
var
tickSplit
=
axisTick
.
splitNumber
;
var
length
=
axisTick
.
length
;
var
lineType
=
axisTick
.
lineStyle
.
type
;
var
lineWidth
=
axisTick
.
lineStyle
.
width
;
var
color
=
axisTick
.
lineStyle
.
color
;
var
lineStyle
=
axisTick
.
lineStyle
;
var
color
=
lineStyle
.
color
;
var
params
=
this
.
paramsMap
[
seriesIndex
];
var
center
=
params
.
center
;
...
...
@@ -225,8 +228,12 @@ define(function (require) {
strokeColor
:
color
==
'
auto
'
?
this
.
_getColor
(
seriesIndex
,
min
+
total
/
l
*
i
)
:
color
,
lineType
:
lineType
,
lineWidth
:
lineWidth
lineType
:
lineStyle
.
type
,
lineWidth
:
lineStyle
.
width
,
shadowColor
:
lineStyle
.
shadowColor
,
shadowBlur
:
lineStyle
.
shadowBlur
,
shadowOffsetX
:
lineStyle
.
shadowOffsetX
,
shadowOffsetY
:
lineStyle
.
shadowOffsetY
}
}));
}
...
...
@@ -263,16 +270,16 @@ define(function (require) {
cosAngle
=
Math
.
cos
(
angle
*
Math
.
PI
/
180
);
angle
=
(
angle
+
360
)
%
360
;
this
.
shapeList
.
push
(
new
TextShape
({
zlevel
:
this
.
_zlevelBase
,
zlevel
:
this
.
_zlevelBase
+
1
,
hoverable
:
false
,
style
:
{
x
:
center
[
0
]
+
cosAngle
*
r0
,
y
:
center
[
1
]
-
sinAngle
*
r0
,
color
:
color
==
'
auto
'
?
this
.
_getColor
(
seriesIndex
,
value
)
:
color
,
text
:
this
.
_getLabelText
(
serie
.
axisLabel
.
formatter
,
value
),
textAlign
:
(
angle
>=
1
00
&&
angle
<=
26
0
)
textAlign
:
(
angle
>=
1
10
&&
angle
<=
25
0
)
?
'
left
'
:
(
angle
<=
80
||
angle
>=
28
0
)
:
(
angle
<=
70
||
angle
>=
29
0
)
?
'
right
'
:
'
center
'
,
textBaseline
:
(
angle
>=
10
&&
angle
<=
170
)
...
...
@@ -280,7 +287,11 @@ define(function (require) {
:
(
angle
>=
190
&&
angle
<=
350
)
?
'
bottom
'
:
'
middle
'
,
textFont
:
textFont
textFont
:
textFont
,
shadowColor
:
textStyle
.
shadowColor
,
shadowBlur
:
textStyle
.
shadowBlur
,
shadowOffsetX
:
textStyle
.
shadowOffsetX
,
shadowOffsetY
:
textStyle
.
shadowOffsetY
}
}));
}
...
...
@@ -290,7 +301,6 @@ define(function (require) {
var
serie
=
this
.
series
[
seriesIndex
];
var
total
=
serie
.
max
-
serie
.
min
;
var
pointer
=
serie
.
pointer
;
var
lineWidth
=
pointer
.
width
;
var
params
=
this
.
paramsMap
[
seriesIndex
];
var
length
=
number
.
parsePercent
(
pointer
.
length
,
params
.
radius
[
1
]);
...
...
@@ -303,7 +313,7 @@ define(function (require) {
?
this
.
_getColor
(
seriesIndex
,
value
)
:
pointer
.
color
;
var
pointShape
=
new
GaugePointerShape
({
zlevel
:
this
.
_zlevelBase
,
zlevel
:
this
.
_zlevelBase
+
1
,
style
:
{
x
:
center
[
0
],
y
:
center
[
1
],
...
...
@@ -311,7 +321,11 @@ define(function (require) {
startAngle
:
params
.
startAngle
*
Math
.
PI
/
180
,
angle
:
angle
,
color
:
color
,
width
:
pointer
.
width
width
:
pointer
.
width
,
shadowColor
:
pointer
.
shadowColor
,
shadowBlur
:
pointer
.
shadowBlur
,
shadowOffsetX
:
pointer
.
shadowOffsetX
,
shadowOffsetY
:
pointer
.
shadowOffsetY
},
highlightStyle
:
{
brushType
:
'
fill
'
,
...
...
@@ -329,7 +343,7 @@ define(function (require) {
this
.
shapeList
.
push
(
pointShape
);
this
.
shapeList
.
push
(
new
CircleShape
({
zlevel
:
this
.
_zlevelBase
+
1
,
zlevel
:
this
.
_zlevelBase
+
2
,
hoverable
:
false
,
style
:
{
x
:
center
[
0
],
...
...
@@ -351,10 +365,11 @@ define(function (require) {
if
(
name
!==
''
)
{
var
title
=
serie
.
title
;
var
offsetCenter
=
title
.
offsetCenter
;
var
textColor
=
title
.
textStyle
.
color
;
var
textStyle
=
title
.
textStyle
;
var
textColor
=
textStyle
.
color
;
var
params
=
this
.
paramsMap
[
seriesIndex
];
this
.
shapeList
.
push
(
new
TextShape
({
zlevel
:
this
.
_zlevelBase
,
zlevel
:
this
.
_zlevelBase
+
1
,
hoverable
:
false
,
style
:
{
x
:
params
.
center
[
0
]
...
...
@@ -364,7 +379,11 @@ define(function (require) {
color
:
textColor
==
'
auto
'
?
this
.
_getColor
(
seriesIndex
)
:
textColor
,
text
:
name
,
textAlign
:
'
center
'
,
textFont
:
this
.
getFont
(
title
.
textStyle
)
textFont
:
this
.
getFont
(
title
.
textStyle
),
shadowColor
:
textStyle
.
shadowColor
,
shadowBlur
:
textStyle
.
shadowBlur
,
shadowOffsetX
:
textStyle
.
shadowOffsetX
,
shadowOffsetY
:
textStyle
.
shadowOffsetY
}
}));
}
...
...
@@ -379,18 +398,23 @@ define(function (require) {
var
detail
=
serie
.
detail
;
var
offsetCenter
=
detail
.
offsetCenter
;
var
color
=
detail
.
backgroundColor
;
var
textColor
=
detail
.
textStyle
.
color
;
var
textStyle
=
detail
.
textStyle
;
var
textColor
=
textStyle
.
color
;
var
params
=
this
.
paramsMap
[
seriesIndex
];
var
value
=
this
.
_getValue
(
seriesIndex
);
var
x
=
params
.
center
[
0
]
-
detail
.
width
/
2
+
number
.
parsePercent
(
offsetCenter
[
0
],
params
.
radius
[
1
]);
var
y
=
params
.
center
[
1
]
+
number
.
parsePercent
(
offsetCenter
[
1
],
params
.
radius
[
1
]);
this
.
shapeList
.
push
(
new
RectangleShape
({
zlevel
:
this
.
_zlevelBase
,
zlevel
:
this
.
_zlevelBase
+
(
Math
.
abs
(
x
+
detail
.
width
/
2
-
params
.
center
[
0
])
+
Math
.
abs
(
y
+
detail
.
height
/
2
-
params
.
center
[
1
]))
<
textStyle
.
fontSize
?
2
:
1
,
hoverable
:
false
,
style
:
{
x
:
params
.
center
[
0
]
-
detail
.
width
/
2
+
number
.
parsePercent
(
offsetCenter
[
0
],
params
.
radius
[
1
]),
y
:
params
.
center
[
1
]
+
number
.
parsePercent
(
offsetCenter
[
1
],
params
.
radius
[
1
]),
x
:
x
,
y
:
y
,
width
:
detail
.
width
,
height
:
detail
.
height
,
brushType
:
'
both
'
,
...
...
@@ -398,8 +422,13 @@ define(function (require) {
lineWidth
:
detail
.
borderWidth
,
strokeColor
:
detail
.
borderColor
,
shadowColor
:
detail
.
shadowColor
,
shadowBlur
:
detail
.
shadowBlur
,
shadowOffsetX
:
detail
.
shadowOffsetX
,
shadowOffsetY
:
detail
.
shadowOffsetY
,
text
:
this
.
_getLabelText
(
detail
.
formatter
,
value
),
textFont
:
this
.
getFont
(
detail
.
textStyle
),
textFont
:
this
.
getFont
(
textStyle
),
textPosition
:
'
inside
'
,
textColor
:
textColor
==
'
auto
'
?
this
.
_getColor
(
seriesIndex
,
value
)
:
textColor
}
...
...
@@ -449,7 +478,7 @@ define(function (require) {
/**
* 构建扇形
*/
_getSector
:
function
(
center
,
r0
,
r
,
startAngle
,
endAngle
,
color
)
{
_getSector
:
function
(
center
,
r0
,
r
,
startAngle
,
endAngle
,
color
,
lineStyle
)
{
return
new
SectorShape
({
zlevel
:
this
.
_zlevelBase
,
hoverable
:
false
,
...
...
@@ -461,7 +490,11 @@ define(function (require) {
startAngle
:
startAngle
,
endAngle
:
endAngle
,
brushType
:
'
fill
'
,
color
:
color
color
:
color
,
shadowColor
:
lineStyle
.
shadowColor
,
shadowBlur
:
lineStyle
.
shadowBlur
,
shadowOffsetX
:
lineStyle
.
shadowOffsetX
,
shadowOffsetY
:
lineStyle
.
shadowOffsetY
}
});
},
...
...
src/config.js
浏览文件 @
30d3b35e
...
...
@@ -882,7 +882,7 @@ define(function() {
gauge
:
{
center
:
[
'
50%
'
,
'
50%
'
],
// 默认全局居中
radius
:
[
0
,
'
75%
'
]
,
radius
:
'
75%
'
,
startAngle
:
225
,
endAngle
:
-
45
,
min
:
0
,
// 最小值
...
...
@@ -910,7 +910,7 @@ define(function() {
show
:
true
,
// formatter: null,
textStyle
:
{
// 其余属性默认使用全局文本样式,详见TEXTSTYLE
color
:
'
#333
'
color
:
'
auto
'
}
},
splitLine
:
{
// 分隔线
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录