标签：百度 数据可视化 echarts zrender csdn
Echarts 仪表盘
这里主要讲一讲series（仪表盘）的用法，驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据
功能丰富，可以做出很漂亮的东西来。
（1）首先讲一下仪表盘的基本属性
其中最常用的属性：
center 圆心坐标，支持绝对值(px)和百分比,百分比计算min(width,height)*50%,radius 半径大小，支持绝对值（px），百分比计算。
radius：半径属性，可以调控半径的大小，支持绝对路径和百分比。
（2）全部属性：
| 名称 | 默认值 | 描述 |
|---|---|---|
| {Array} center | [‘50%‘, ‘50%‘] | 圆心坐标，支持绝对值（px）和百分比，百分比计算min(width, height) * 50% |
| {number | Array}radius | [0, ‘75%‘] | 半径，支持绝对值（px）和百分比，百分比计算比，min(width, height) / 2 * 75%， 传数组实现环形图，[内半径，外半径] |
| {number}startAngle | 225 | 开始角度, 饼图（90）、仪表盘（225），有效输入范围：[-360,360] |
| {number}endAngle | -45 | 结束角度,有效输入范围：[-360,360]，保证startAngle - endAngle为正值 |
| {number} min | 0 | 指定的最小值 |
| {number} max | 100 | 指定的最大值 |
| {number}precision | 0 | 小数精度，默认为0，无小数点 |
| {number}splitNumber | 10 | 分割段数，默认为5，为0时为线性渐变，calculable为true是默认均分100份 |
| {Object} axisLine |
{
show: true,
lineStyle: {
color: [
[0.2, ‘#228b22‘],
[0.8, ‘#48b‘],
[1, ‘#ff4500‘]
],
width: 30
}
}
|
坐标轴线，默认显示 属性show控制显示与否， 属性lineStyle（详见lineStyle）控制线条样式， 比较特殊的是这里的lineStyle.color是一个二维数组，用于把仪表盘轴线分成若干份， 并且可以给每一份指定具体的颜色，格式为:[[百分比, 颜色值], [...]] |
| {Object} axisTick |
{
show: true,
splitNumber: 5,
length :8,
lineStyle: {
color: ‘#eee‘,
width: 1,
type: ‘solid‘
}
}
|
坐标轴小标记，默认显示 属性show控制显示与否， 属性lineStyle（详见lineStyle）控制线条样式， 属性splitNumber控制每份split细分多少段 属性length控制线长 |
| {Object} axisLabel |
{
show: true,
formatter: null,
textStyle: {
color: ‘auto‘
}
}
|
坐标轴文本标签（详见axis.axislabel） 属性formatter可以格式化文本标签， 属性textStyle（详见textStyle）控制文本样式 |
| {Object} splitLine |
{
show: true,
length :30,
lineStyle: {
color: ‘#eee‘,
width: 2,
type: ‘solid‘
}
}
|
主分隔线，默认显示 属性show控制显示与否， 属性length控制线长 属性lineStyle（详见lineStyle）控制线条样式， |
| {Object} pointer |
{
length : ‘80%‘,
width : 8,
color : ‘auto‘
}
|
指针样式 属性length控制线长，百分比相对的是仪表盘的外半径 属性width控制指针最宽处， 属性color控制指针颜色 |
| {Object} title |
{
show : true,
offsetCenter: [0, ‘-40%‘],
textStyle: {
color: ‘#333‘,
fontSize : 15
}
}
|
仪表盘标题 属性show控制显示与否， 属性offsetCenter用于标题定位，数组为横纵相对仪表盘圆心坐标偏移，支持百分比（相对外半径）， 属性textStyle（详见textStyle）控制文本样式 |
| {Object} detail |
{
show : true,
backgroundColor: ‘rgba(0,0,0,0)‘,
borderWidth: 0,
borderColor: ‘#ccc‘,
width: 100,
height: 40,
offsetCenter: [0, ‘40%‘],
formatter: null,
textStyle: {
color: ‘auto‘,
fontSize : 30
}
}
|
仪表盘详情 属性show控制显示与否， 属性backgroundColor控制边框颜色， 属性borderWidth控制边框线宽， 属性borderColor控制边框颜色， 属性width控制详情宽度， 属性height控制详情高度， 属性offsetCenter用于详情定位，数组为横纵相对仪表盘圆心坐标偏移，支持百分比（相对外半径）， 属性formatter可以格式化文本， 属性textStyle（详见textStyle）控制文本样式 |
<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="linzhifeng@baidu.com">
<title>ECharts · Example</title>
<link rel="shortcut icon" href="../asset/ico/favicon.png">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="../asset/css/bootstrap.css" rel="stylesheet">
<link href="../asset/css/carousel.css" rel="stylesheet">
<link href="../asset/css/echartsHome.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<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/codemirror.css" rel="stylesheet">
<link href="../asset/css/monokai.css" rel="stylesheet">
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>
<div class="container-fluid">
<div class="row-fluid example">
<div id="sidebar-code" class="col-md-4">
<div class="well sidebar-nav">
<div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-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',
center:['50%','50%'],
radius:'85%',
min:0,
max:120,
startAngle:180,
endAngle:-45,
splitNumber:12,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.09, '#1e90ff'],[0.82, '#1e90ff'],[1, '#1e90ff']],
width: 0,
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,
width:3
}
},
splitLine: { // 分隔线
length :20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:3,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer: { // 分隔线
shadowColor : '#fff', //默认透明
shadowBlur: 5,
width:5
},
title : {
show:true,
offsetCenter:['-95%','30'],
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
detail : {
show:true,
offsetCenter: ['-100%', '40%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
color: '#fff'
}
},
data:[{value: 40, name: 'MPH'}]
},
{
name:'内圈',
type:'gauge',
center:['50%','50%'],
radius:'40%',
min:0,
max:180,
startAngle:180,
endAngle:-45,
splitNumber:9,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.09, '#228b22'],[0.82, '#228b22'],[1, '#228b22']],
width: 0,
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: {
splitNumber:2, // 坐标轴小标记
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
width:3,
color: '#00FFFF',
shadowColor : '#00FFFF',
shadowBlur: 10
}
},
splitLine: { // 分隔线
length :15, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:3,
color: '#00FFFF',
shadowColor : '#00FFFF',
shadowBlur: 10
}
},
pointer: { // 分隔线
shadowColor : '#fff', //默认透明
shadowBlur: 5,
width:5
},
title : {
show:true,
offsetCenter:['-95%','30'],
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 15,
fontStyle: 'italic',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
detail : {
show:false,
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
color: '#fff'
}
},
data:[{value: 60, name: 'km/h'}]
},
{
name:'内内圈',
type:'gauge',
center:['50%','50%'],
radius:'7%',
startAngle:360,
endAngle:-360,
axisLine: {
lineStyle: {
color: [[0.09, '#00FFFF'],[0.82, '#00FFFF'],[1, '#00FFFF']],
width: 2,
shadowColor : '#fff',
shadowBlur: 5
}
},
axisLabel: {
show:false
},
axisTick: {
show:false
},
splitLine: {
show:false
},
title : {
show:false
},
pointer: {
show:false
},
detail : {
show:false
},
data:[{value: 60, name: 'km/h'}]
}
]
};
clearInterval(timeTicket);
timeTicket = setInterval(function (){
var values=(Math.random()*100).toFixed(2) - 0;
option.series[0].data[0].value = (values*0.6214).toFixed(2)-0;
option.series[1].data[0].value = (option.series[0].data[0].value)*3/2;
myChart.setOption(option,true);
},2000)
</textarea>
</div><!--/.well -->
</div><!--/span-->
<div id="graphic" class="col-md-8">
<div id="main" class="main"></div>
<div>
<button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
<span id='wrong-message' style="color:red"></span>
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
<footer id="footer"></footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../asset/js/jquery.min.js"></script>
<script type="text/javascript" src="../asset/js/echartsHome.js"></script>
<script src="../asset/js/bootstrap.min.js"></script>
<script type="text/javascript">var timeTicket;</script>
<script src="../asset/js/echartsExample.js"></script>
</body>
</html>
</span>
CSDN开源夏令营 百度数据可视化实践 ECharts（3）,布布扣,bubuko.com
CSDN开源夏令营 百度数据可视化实践 ECharts（3）
标签：百度 数据可视化 echarts zrender csdn
原文地址：http://blog.csdn.net/u013476464/article/details/38115179
