option = {
backgroundColor: '#0e0b2a',
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'个性化仪表盘',
type:'gauge',
center : ['50%', '50%'], // 默认全局居中
radius : [0, '55%'],
startAngle: -180,
endAngle : -360,
min: 0, // 最小值
max: 1000, // 最大值
precision: 0, // 小数精度,默认为0,无小数点
splitNumber: 5, // 分割段数,默认为5
axisLine: { // 坐标轴线
show: false, // 默认显示,属性show控制显示与否
},
axisTick: { // 坐标轴小标记
show: false, // 属性show控制显示与否,默认不显示
},
axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
show: true, formatter: function(v){
switch (v+''){
case '0': return '0';
case '200': return '200';
case '400': return '400';
case '600': return '600';
case '800': return '800';
case '1000': return '1000';
default: return "";
}
},
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#13b4eb',
fontSize:12,
}
},
splitLine: { // 分隔线
show: false, // 默认显示,属性show控制显示与否
},
pointer : {
show:false,
},
title : {
show : false,
},
detail : {
show : false,
},
data:[]
}, {
name:'机组频率(HZ)',
type:'gauge',
center : ['50%', '50%'], // 默认全局居中
radius : [0, '28%'],
startAngle: -180,
endAngle : -360,
min: 0, // 最小值
max: 1000, // 最大值
precision: 0, // 小数精度,默认为0,无小数点
splitNumber: 5, // 分割段数,默认为5
axisLine: { // 坐标轴线
show: true, // 默认显示,属性show控制显示与否
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.6, (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0,0,0, 1000,[[0, '#3740d5'],[0.3, '#13b4eb']])})(),]
,[1, 'transparent']],
width: 12
}
},
axisTick: { // 坐标轴小标记
show: false, // 属性show控制显示与否,默认不显示
},
axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
show: false,
},
splitLine: { // 分隔线
show: false, // 默认显示,属性show控制显示与否
},
pointer : {
show:true,
length : '40%',
width : 4,
color : '#13b4eb'
},
title : {
show : false,
offsetCenter: ['-65%', -10], // x, y,单位px
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#333',
fontSize : 15
}
},
detail : {
show : true,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: '#ccc',
width: 100,
height: 40,
offsetCenter: ['0%', 8], // x, y,单位px
formatter:'{value}',
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#13b4eb',
fontSize : 26
}
},
data:[{value: 50.01, name: '频率'}]
}
]
}; clearInterval(timeTicket);
timeTicket = setInterval(function (){
option.series[1].data[0].value = (Math.random()*1000).toFixed(2) - 0;
myChart.setOption(option, true);
},2000)

  运行效果:

echarts2.0仪表盘的更多相关文章

  1. vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图,折线图)

    一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使 ...

  2. echarts3.0 仪表盘实例更改完成占用率实例

    需要完成的项目效果 官方实例效果 基本思路: 首先引入jquery和echarts3.0库. 需要两个仪表盘,一个仪表盘是纯色灰色,在底部.startAngle 和endAngle永远是最大值,默认为 ...

  3. Echarts3.0 引入百度地图(转载)

    转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...

  4. Echarts关于仪表盘

    https://blog.csdn.net/zc763375777/article/details/53837391 来无事,制作不一样的图标一发,领导让把仪表盘做成百分条,我TM也是醉了,大体样式如 ...

  5. 百度echarts 3.0版本和2.0版本的兼容问题

    前一段时间,项目中要用到统计图表,之前也用过jqplot的图表插件,这次开发的内容中基于地图的展示还很多,所以后来选择了百度的echarts插件(echarts.baidu.com).刚开始用的时候, ...

  6. eCharts使用图表简单示例

    https://blog.csdn.net/hlbt0112/article/details/48862427 1. eCharts官网 http://echarts.baidu.com/index. ...

  7. 可能是史上最强大的js图表库——ECharts带你入门

    PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 StanZhai 两位仁兄让我试试 ECharts ,去主页看到<Why ECharts ?&g ...

  8. 史上最强大的js图表库——ECharts带你入门(转)

    出处:http://www.cnblogs.com/zrtqsk/p/4019412.html PS:之前的那篇博客Highcharts——让你的网页上图表画的飞起 ,评论中,花儿笑弯了腰 和 Sta ...

  9. R(四): R开发实例-map分布图

    前几章对R语言的运行原理.基本语法.数据类型.环境部署等基础知识作了简单介绍,本节将结合具体案例进行验证测试. 案例场景:从互联网下载全国三甲医院数据,以地图作为背景,展现各医院在地图上的分布图.全国 ...

随机推荐

  1. Django(序列化、SweetAlert插件)

    day72 参考:https://www.cnblogs.com/liwenzhou/p/8718861.html#autoid-6-1-2 前端序列化 后端序列化 day73中 补充一个SweetA ...

  2. css3 动画与display:none冲突的解决方案

    概述 css不能在display:none和display:block之间进行动画,并且也不能在height:0和height:auto之间进行动画.这里我研究了一下在display:none和dis ...

  3. Swift5 语言指南(十五) 继承

    类可以从另一个类继承方法,属性和其他特性.当一个类继承自另一个类时,继承类称为子类,它继承的类称为其超类.继承是一种基本行为,它将类与Swift中的其他类型区分开来. Swift中的类可以调用和访问属 ...

  4. Shell - Shell脚本调试方法

    Shell脚本调试选项 Shell本身提供一些调试方法选项: -n,读一遍脚本中的命令但不执行,用于检查脚本中的语法错误. -v,一边执行脚本,一边将执行过的脚本命令打印到标准输出. -x,提供跟踪执 ...

  5. iOS开发笔记-一种任意字体、颜色混排UILabel的实现

    最近开发新App,射妓狮给的图上出现一种不同大小字体混排的Label,就像下面这种: 想了想,最简单的方法是使用多个UILabel排列显示,但是这样不仅麻烦而且效果也不好,索性自定义UILabel来尽 ...

  6. 测试工具之RobotFramework界面基本功能使用

    安装好RobotFramework后,直接在运行或者命令行中执行ride.py即可启动RF 启动完成后的界面如下: 界面很简洁,然后我们开始点击file并创建project: 接下来右键project ...

  7. Python解析HDF文件 分类: Python 2015-06-25 00:16 743人阅读 评论(0) 收藏

    前段时间因为一个业务的需求需要解析一个HDF格式的文件.在这之前也不知道到底什么是HDF文件.百度百科的解释如下: HDF是用于存储和分发科学数据的一种自我描述.多对象文件格式.HDF是由美国国家超级 ...

  8. TCP/IP 笔记 - 链路层

    链路层的目的是为IP模块发送和接收IP数据报. 以太网和IEEE 802局域网标准 以太网指的是一套标准,有DEC.Intel公司和Xerox公司在1980年首次发布,并在1982年加以修订.第一个常 ...

  9. LoadRuner12.53教程(一)

    LoadRunner教程 L   o   a   d   R   u   n   n   e   r   jiào教   chéng程 Welcome to the LoadRunner tutori ...

  10. 简单的端口扫描器(TCP connect)

    端口扫描器原理相对简单,采用的是TCP connect状态判断.具体来说:TCP connect方式使用系统网络API connect向目标主机的端口发起连接,如果无法连接,说明该端口关闭.该方式扫描 ...