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. common-io 文件监听例子

    package com.junge.spring.demo.commonio; import org.apache.commons.io.monitor.FileAlterationListenerA ...

  2. Dynamic Programming | Set 4 (Longest Common Subsequence)

    首先来看什么是最长公共子序列:给定两个序列,找到两个序列中均存在的最长公共子序列的长度.子序列需要以相关的顺序呈现,但不必连续.例如,"abc", "abg", ...

  3. mysql快熟入门

    前提:假设我们的电脑或服务器已经正确安装了mysql服务器 一:连接和断开mysql服务器 1.1连接数据库服务器 shell> mysql -u user -p (user用户名通常为root ...

  4. Http请求-get和post的区别

    GET和POST是HTTP请求的两种基本方法. 最直观的区别就是GET把参数包含在URL中,以?的方式来进行拼接,POST通过request body传递参数.并且GET请求在URL中传送的参数是有长 ...

  5. 【Redis面试题】Redis的字符串是怎么实现的?

    年前本人在找工作面试时在Redis相关问题上可栽了跟头.在面试前按常规套路准备了一下,比如 Redis 的常用5种数据结构,Redis持久化策略,Redis实现分布式锁,简单发布订阅等等都准备了,当时 ...

  6. [每天解决一问题系列 - 0005] WiX Burn 如何校验chained package的合法性

    问题描述: 项目中使用Wix burn打包,内部包含了多个MSI.有时候会遇到如下错误 Error 0x80091007: Failed to verify hash of payload: Setu ...

  7. 如何才能够系统地学习Java并发技术?

    微信公众号[Java技术江湖]一位阿里Java工程师的技术小站 Java并发编程一直是Java程序员必须懂但又是很难懂的技术内容. 这里不仅仅是指使用简单的多线程编程,或者使用juc的某个类.当然这些 ...

  8. 高可用Hadoop平台-Oozie工作流之Hadoop调度

    1.概述 在<高可用Hadoop平台-Oozie工作流>一篇中,给大家分享了如何去单一的集成Oozie这样一个插件.今天为大家介绍如何去使用Oozie创建相关工作流运行与Hadoop上,已 ...

  9. 图像处理之Retinex增强算法(SSR、MSR、MSRCR)

    视网膜-大脑皮层(Retinex)理论认为世界是无色的,人眼看到的世界是光与物质相互作用的结果,也就是说,映射到人眼中的图像和光的长波(R).中波(G).短波(B)以及物体的反射性质有关 其中I是人眼 ...

  10. 安装clickhouse缺少依赖libicudata.so.50()(64bit)

    root@localhost ]# rpm -ivh clickhouse-common--.el7.x86_64.rpm 错误:依赖检测失败: libicudata.so.()(64bit) 被 c ...