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的面向对象方法以及差别
Mar 31 Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
原生js实现trigger方法示例代码
May 22 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 读取文件的正确方法
2009/04/29 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
Python正则表达式教程之一:基础篇
2017/03/02 Python
python实现图片批量压缩程序
2018/07/23 Python
Python类的继承用法示例
2019/01/31 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
简单了解django文件下载方式
2020/02/10 Python
最小二乘法及其python实现详解
2020/02/24 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python实现爬取并分析电商评论
2020/06/19 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
英国家电直销:Appliances Direct
2016/09/22 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
怎样写好自荐信和推荐信
2013/12/26 职场文书
办护照工作证明范本
2014/01/14 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书