首页 > 代码库 > CSDN开源夏令营 百度数据可视化实践 ECharts(3)
CSDN开源夏令营 百度数据可视化实践 ECharts(3)
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)控制文本样式 |
(3)实例操作
实现用ECharts做出下面这个仪表盘:(MPH是英里每小时,km/h是公里每小时)下图063572换成当前的MPH值,实现很精美的仪表盘。
(5)
实现代码:
<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>
最终实现结果:
项目代码在上传在code中:
https://code.csdn.net/dashboard/index
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。