ECharts学习（4）--仪表盘
1. ECharts中的仪表盘，要使用这个图表时把series中的type属性修改成‘gauge’，然后在detail中设置仪表盘详情，用于显示数据。最常用的是formatter(格式化函数或者字符串)，然后可以设置data属性用来表示指针的指向。下面我们可以设置value的值为每隔2秒就随机生成一个数，然后就可以模拟显示指针的动态显示。
2. 代码展示：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>ECharts练习</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
</head> <body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var option = {
title: {
text: '业务指标', //标题文本内容
},
toolbox: { //可视化的工具箱
show: true,
feature: {
restore: { //重置
show: true
},
saveAsImage: {//保存图片
show: true
}
}
},
tooltip: { //弹窗组件
formatter: "{a} <br/>{b} : {c}%"
},
series: [{
name: '业务指标',
type: 'gauge',
detail: {formatter:'{value}%'},
data: [{value: 45, name: '完成率'}]
}] }; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); setInterval(function(){//把option.series[0].data[0].value的值使用random()方法获取一个随机数
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
}, 2000);
</script>
</body> </html>
3. 效果展示：
4. 这里只是最简单的实现了仪表盘，如果我们要实现更加复杂的功能，可以参考API文档中的其他参数进行设置，在官网的案例中做了一个十分酷炫的汽车的夜间仪表盘，下面我粘贴下代码，大家可以自己研究下，不懂得参数可以查看文档：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>ECharts练习</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
</head> <body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
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',
min: 0,
max: 220,
splitNumber: 11,
radius: '50%',
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[0.09, 'lime'],
[0.82, '#1e90ff'],
[1, '#ff4500']
],
width: 3,
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
}
},
splitLine: { // 分隔线
length: 25, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width: 3,
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
pointer: { // 分隔线
shadowColor: '#fff', //默认透明
shadowBlur: 5
},
title: {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic',
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
detail: {
backgroundColor: 'rgba(30,144,255,0.8)',
borderWidth: 1,
borderColor: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 5,
offsetCenter: [0, '50%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
color: '#fff'
}
},
data: [{
value: 40,
name: 'km/h'
}]
},
{
name: '转速',
type: 'gauge',
center: ['25%', '55%'], // 默认全局居中
radius: '30%',
min: 0,
max: 7,
endAngle: 45,
splitNumber: 7,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[0.29, 'lime'],
[0.86, '#1e90ff'],
[1, '#ff4500']
],
width: 2,
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length: 12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width: 3,
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
pointer: {
width: 5,
shadowColor: '#fff', //默认透明
shadowBlur: 5
},
title: {
offsetCenter: [0, '-30%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontStyle: 'italic',
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
detail: {
//backgroundColor: 'rgba(30,144,255,0.8)',
// borderWidth: 1,
borderColor: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 5,
width: 80,
height: 30,
offsetCenter: [25, '20%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
color: '#fff'
}
},
data: [{
value: 1.5,
name: 'x1000 r/min'
}]
},
{
name: '油表',
type: 'gauge',
center: ['75%', '50%'], // 默认全局居中
radius: '30%',
min: 0,
max: 2,
startAngle: 135,
endAngle: 45,
splitNumber: 2,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[0.2, 'lime'],
[0.8, '#1e90ff'],
[1, '#ff4500']
],
width: 2,
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length: 12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
axisLabel: {
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
},
formatter: function(v) {
switch(v + '') {
case '0':
return 'E';
case '1':
return 'Gas';
case '2':
return 'F';
}
}
},
splitLine: { // 分隔线
length: 15, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width: 3,
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
pointer: {
width: 2,
shadowColor: '#fff', //默认透明
shadowBlur: 5
},
title: {
show: false
},
detail: {
show: false
},
data: [{
value: 0.5,
name: 'gas'
}]
},
{
name: '水表',
type: 'gauge',
center: ['75%', '50%'], // 默认全局居中
radius: '30%',
min: 0,
max: 2,
startAngle: 315,
endAngle: 225,
splitNumber: 2,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [
[0.2, 'lime'],
[0.8, '#1e90ff'],
[1, '#ff4500']
],
width: 2,
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
show: false
},
axisLabel: {
textStyle: { // 属性lineStyle控制线条样式
fontWeight: 'bolder',
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
},
formatter: function(v) {
switch(v + '') {
case '0':
return 'H';
case '1':
return 'Water';
case '2':
return 'C';
}
}
},
splitLine: { // 分隔线
length: 15, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width: 3,
color: '#fff',
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
pointer: {
width: 2,
shadowColor: '#fff', //默认透明
shadowBlur: 5
},
title: {
show: false
},
detail: {
show: false
},
data: [{
value: 0.5,
name: 'gas'
}]
}]
}; myChart.setOption(option); setInterval(function() {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
myChart.setOption(option);
}, 2000)
</script>
</body> </html>
ECharts学习（4）--仪表盘的更多相关文章
- echarts学习总结
ECharts学习总结使用步骤1 引入ECharts <script src="echarts.min.js"></script>2 绘制一个简单的图表 为 ...
- Echarts学习记录——如何去掉网格线及网格区域颜色
关键属性 splitLine和splitArea,可以设置相关的属性 示例代码 <!DOCTYPE html> <html lang="en"> <h ...
- Echarts学习记录——如何给x轴文字标签添加事件
Echarts学习记录——如何给x轴文字标签添加事件 关键属性 axisLabel下属性clickable:true 并给图表添加单击事件 根据返回值判断点击的是哪里 感觉自己的方法有点变扭,有更好办 ...
- echarts学习（上）
echarts 学习之路 学习思路 初识echarts 编写自己的echarts图表 根据需求编写工作中的echarts图表[进阶篇] github地址:https://github.com/liso ...
- echarts学习笔记(一)
echarts学习笔记(一) echarts开发步骤 创建一个新的html文件 在html文件head头部信息中导入echarts 声明一个容器(可以理解为画布),用于存放echarts 实例化ech ...
- echarts学习思路及常用属性记录
此篇博文分享自己对于入门学习echart的思路及对常见组件的用法记录,如serise.data和坐标轴对应关系,多个坐标轴,多个grid的对齐,tooltip的超出处理,坐标轴/toolti ...
- ECharts学习（3）--toolbox（工具栏）
1. toolbox:这是ECharts中的工具栏.内置有导出图片.数据视图.动态类型切换.数据区域缩放.重置五个工具. 2. toolbox中的属性,不包含五个工具.里面最主要的就是feature这 ...
- echarts学习网站
echarts : http://echarts.baidu.com/echarts2/doc/example.html 相关脚本学习网站:http://www.jb51.net/html/list/ ...
- ECharts学习（1）--toolbox（工具栏）
1. toolbox:这是ECharts中的工具栏.内置有导出图片.数据视图.动态类型切换.数据区域缩放.重置五个工具. 2. toolbox中的属性,不包含五个工具.里面最主要的就是feature这 ...
随机推荐
- C#——this关键字（2，3）（含求助贴）
这次来看一看this关键字的第二个用法:将对象作为参数传递到其他方法 ----------------------------------------------------------------- ...
- C#、JAVA操作Hadoop（HDFS、Map/Reduce）真实过程概述。组件、源码下载。无法解决：Response status code does not indicate success: 500。
一.Hadoop环境配置概述 三台虚拟机,操作系统为:Ubuntu 16.04. Hadoop版本:2.7.2 NameNode:192.168.72.132 DataNode:192.168.72. ...
- Web Service随笔
什么是Web Service? WebService是一个SOA(面向服务的编程)的架构,它是不依赖于语言,不依赖于平台,可以实现不同的语言间的相互调用,通过Internet进行基于Http协议的网络 ...
- JavaScript--面向对象--猜拳游戏
//html代码 <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- vue2.0 非父子组件如何通信
1 利用父组件传递 A组件传递到父组件,再由父组件传递到B组件 2 利用新的vue实例 var bus = new Vue() // 触发组件 A 中的事件 bus.$emit('id-selecte ...
- asp.net获取数据库的连接字符串
1.添加引用 using System.Configuration; 2.代码 string strConnectionString=ConfigurationManager.AppSettings[ ...
- 记录下UIButton的图文妙用和子控件的优先显示
UIButton的用处特别多,这里只记录下把按钮应用在图文显示的场景,和需要把图片作为按钮的背景图片显示场景: 另外记录下在父控件的子控件优先显示方法(控件置于最前面和置于最后面). 先上效果图: 1 ...
- Javascript不同浏览器差异及兼容方法
原文链接:http://caibaojian.com/js-ie-different-from-firefox.html javascript的各种兼容就是为了解决不同浏览器的差异性,了解其中的差异能 ...
- 转载 NPOI.dll 用法。单元格，样式，字体，颜色，行高，宽度。读写excel
我用的版本是1.25的.每个版本用法有一点不同 using System; using System.Collections.Generic; using System.ComponentModel; ...
- Bluemix中国版体验（一）
很高兴终于拿到了中国版Bluemix的账号!中国版的Bluemix是由世纪互联运营的,这也是世纪互联继Microsoft Azure,Office 365之后运营的又一个国际一线大品牌的云服务. 中国 ...