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. DataBrewery Cubes 连接Kylin

    问题背景 Kylin作为一个极其优秀的MOLAP,提供了完整的Cube创建.更新流程.同时提供了Sql查询.功能上看没有问题,但是在提供查询服务的时候还是有些不友好. sql查询需要常常需要关联Hiv ...

  2. GC垃圾回收机制,iOS内存管理。

    问题: MRC中通过调用静态方法创建的新对象,不再使用时需要对其发送release消息吗? 不需要,因为约定静态方法创建的对象会自动将其放入自动释放池,即已对其发送autorelease消息,因此不可 ...

  3. Java正则表达式API详解

    1. Pattern类 public class PatternExample { /** * public static String quote(String s) * 返回指定字符串的字面值模式 ...

  4. JavaCV 学习(一):JavaCV 初体验

    最近工作中因为项目的原因边学边用,接触并使用JavaCV做了一些相关的产品,目前觉得,JavaCV在图形图像(人家本身就是一个视觉库)的功能真的挺强大,而且使用起来避免了复杂的平台处理.下面整理一下对 ...

  5. 如何用impress.js写有逼格的ppt

    概述 这是我学习课程impress让你的内容"舞"起来而做的总结和练手. 你可以点这里在线预览我做的ppt 注意:等加载完了之后,点击空格键翻页! 简化模板 下面是一个简化的模板 ...

  6. LeetCode:94_Binary Tree Inorder Traversal | 二叉树中序遍历 | Medium

    题目:Binary Tree Inorder Traversal 二叉树的中序遍历,和前序.中序一样的处理方式,代码见下: struct TreeNode { int val; TreeNode* l ...

  7. Ubuntu 13.10下安装ns2 2.35遇到的小问题

    前面下载安装的环节我就不多说了,网上已经有很多的例子,最全的是一个新浪网友写的博客:http://blog.sina.com.cn/s/blog_785a23ae0100xraq.html.他使用的是 ...

  8. PyTorch(二)Intermediate

    Convolutional Neural Network import torch import torch.nn as nn import torchvision import torchvisio ...

  9. [源码]Dephi溢出demo( Shellcode for XP)

    [源码]Dephi溢出demo( Shellcode for XP) unit Unit1; interface uses Windows, Messages, SysUtils, Variants, ...

  10. python之函数参数问题(参数为可变对象)

    今天看到一段代码,其中函数入参有一个参数为list,类似如下: def linux_monitor(pid=0,pidlist = []): pidlist.append(pid) 通过测试发现是有问 ...