ECharts仪表盘实例代码(附源码下载)


Posted in Javascript onFebruary 18, 2016

大家在汽车驾驶舱里一眼就可以看到仪表盘,使用使用Echarts制作的仪表盘可以轻松展示用户的数据,清晰的看出某个指标值所在的范围,仪表盘形式的报表应用在各种统计系统中,本文结合实例讲解仪表盘在销售任务完成率的统计应用。

ECharts仪表盘实例代码(附源码下载)

效果演示      源码下载

HTML

首先引入Echarts,然后在需要放置图表的地方加上div#myChart,同时给它加上宽度和高度属性。

<script src="echarts.min.js"></script> 
<div id="myChart" style="width: 600px;height:400px;"></div>

Javascript

接下来要初始化echarts实例,然后设置选项,最后渲染图像。

var myChart = echarts.init(document.getElementById('myChart')); 
option = { 
tooltip : { 
formatter: "{a} <br/>{b} : {c}%" 
}, 
series : [ 
{ 
name:'业务指标', 
type:'gauge', 
detail : {formatter:'{value}%'}, //仪表盘显示数据 
axisLine: { //仪表盘轴线样式 
lineStyle: { 
width: 20 
} 
}, 
splitLine: { //分割线样式 
length: 20 
}, 
data:[{value: 50, name: '完成率'}] 
} 
] 
}; 
myChart.setOption(option);

选项设置中的tooltip是一个提示框组件,默认参数show:true是显示提示框的。参数formatter是提示框浮层内容格式,它支持字符串模板和回调函数两种形式。一般我们使用字符串模板,模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 'axis' 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。对饼图、仪表盘、漏斗图三种类型的图表参数含义为: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)。

选项中的series是系列列表。每个系列通过 type 决定自己的图表类型,它包含很多参数。其中参数name表示系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。参数type指图表类型,type:'gauge'即仪表盘。参数detail是指仪表盘详情,用于显示数据,可以定义数据显示的高宽大小,背景色,边框颜色等等,本例中定义了仪表盘的详情显示为百分数。参数axisLine可以定义仪表盘轴线相关配置,如轴线样式等。参数splitLine用来定义仪表盘中的分隔线样式,如线长、线的颜色、线宽等等。参数data则是用来展示数据的,可以设置仪表盘指标对应的值以及名称。

如果是一个动态变化的仪表盘,可以使用setInterval()定时变换仪表值,如以下代码。

clearInterval(timeTicket); 
var timeTicket = setInterval(function () { 
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; 
myChart.setOption(option, true); 
},2000);

以上内容给大家介绍了ECharts仪表盘实例代码,希望对大家有所帮助!

Javascript 相关文章推荐
文本加密解密
Jun 23 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
详解React中setState回调函数
Jun 14 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 #Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 #Javascript
Js实现简单的小球运动特效
Feb 18 #Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 #Javascript
js实现简单的省市县三级联动效果实例
Feb 18 #Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 #Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 #Javascript
You might like
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php无限遍历目录示例
2014/02/21 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
php常量详细解析
2015/10/27 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python中如何进行连乘计算
2020/05/28 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
Weblogc domain问题
2014/01/27 面试题
销售冠军获奖感言
2014/02/03 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
Python简易开发之制作计算器
2022/04/28 Python