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 相关文章推荐
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
简单的JS轮播图代码
Jul 18 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
基于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音乐采集(部分代码)
2007/02/14 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
php中错误处理操作实例分析
2019/08/23 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
python双向链表原理与实现方法详解
2019/12/03 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
Android interview questions
2016/12/25 面试题
个人社会实践自我鉴定
2014/03/24 职场文书
学生会干部任命书
2015/09/21 职场文书