Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 30d3b35e 编写于 作者: K kener
浏览文件
操作

gauge shadow支持 新增例子

上级 17db0b51
隐藏空白更改
内联 并排
Showing with 946 addition and 38 deletion
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 &amp; 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>&copy; 2014 <a href="http://efe.baidu.com" target="_blank">EFE</a> &middot; <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">License</a> &middot; <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 &amp; 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>&copy; 2014 <a href="http://efe.baidu.com" target="_blank">EFE</a> &middot; <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">License</a> &middot; <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 &amp; 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>&copy; 2014 <a href="http://efe.baidu.com" target="_blank">EFE</a> &middot; <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">License</a> &middot; <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.axisLine.show) {
if (!serie.splitLine.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 >= 100 && angle <= 260)
textAlign : (angle >= 110 && angle <= 250)
? 'left'
: (angle <= 80 || angle >= 280)
: (angle <= 70 || angle >= 290)
? '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.
先完成此消息的编辑！
想要评论请 注册 或