Echarts关于仪表盘
https://blog.csdn.net/zc763375777/article/details/53837391
来无事,制作不一样的图标一发,领导让把仪表盘做成百分条,我TM也是醉了,大体样式如下图:(图标是没2秒变化的)
<div id="main" style="width: 400px;height: 300px;"></div>
<script>
var myChart = echarts.init(document.getElementById("main"));
option = {
//提示框组件。开发实际中去掉了指针,提示框可以不用设置。
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
//工具栏。本次好像也没用到,刷新,下载,我觉得还是挺实用的,具体开需求!
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
//下面属性才是仪表盘的核心!!反正我是这么认为的!!!
series: [{
//类型
type: 'gauge',
//半径
radius: 150,
//起始角度。圆心 正右手侧为0度,正上方为90度,正左手侧为180度。
startAngle: 180,
//结束角度。
endAngle: 0,
center: ['50%', '90%'],
//仪表盘轴线相关配置。
axisLine: {
show:true,
// 属性lineStyle控制线条样式
lineStyle: {
width: 60,
color:[[1, '#63869e']]
}
},
//分隔线样式。
splitLine: {
show: false,
},
//刻度样式。
axisTick: {
show: false,
},
//刻度标签。
axisLabel: {
show:false,
},
//仪表盘指针。
pointer: {
//这个show属性好像有问题,因为在这次开发中,需要去掉指正,我设置false的时候,还是显示指针,估计是BUG吧,我用的echarts-3.2.3;希望改进。最终,我把width属性设置为0,成功搞定!
show: false,
//指针长度
length:'90%',
width:0,
},
//仪表盘标题。
title: {
show: true,
offsetCenter: [0, '-40%'], // x, y,单位px
textStyle: {
color: '#hhh',
fontSize: 30
}
},
//仪表盘详情,用于显示数据。
detail: {
show: true,
offsetCenter: [0, '-10%'],
formatter: '{value}%',
textStyle: {
fontSize: 30
}
},
data: [{
value: 0,
name: '存储量'
}]
}]
};
myChart.setOption(option);
//设置定时,加载随机数据,可以直观显示
timeTicket = setInterval(function() {
var random=(Math.random() * 100).toFixed(2);
var color=[[random/100, '#63869e'], [1, '#c23531']];
option.series[0].axisLine.lineStyle.color=color;
option.series[0].data[0].value =random ;
myChart.setOption(option, true);
}, 200)
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 仪表盘默认是三个区域,此次百分比显示,只能设置两个区域。
- 通过改变axisLine(仪表盘轴线相关配置)中的lineStyle中color数组,默认是3个。
- 本次,我初始化的时候是1个,然后定时加载显示2个,用百分比隔开,成功显示进度条样式。
- 图标是动态变化的,开发的时候可以根据需求设置,在此次样例中,我设置了随机数
Echarts关于仪表盘的更多相关文章
- Echarts——更改仪表盘方向和颜色
做小项目需要用到仪表盘,官方给出的颜色设置如下: 而我想要如下样式的: 最后,经过一番折腾算是搞成了如下样式效果: 要达到上面效果关键在于设置Echarts的如下两处js代码: 1.大小值要颠倒,因为 ...
- echarts实现仪表盘(自己动起来,没有后端,顺便重温math.random
let a = parseInt(Math.random() * (2 + 1), 10); let arr = []; arr.push(res[a]); let option = { toolti ...
- echarts gauge 仪表盘去除外发光效果
textStyle中加shadow选项: textStyle: { shadowColor : '#000', //默认透明 shadowBlur: 0 }
- ECharts学习(4)--仪表盘
1. ECharts中的仪表盘,要使用这个图表时把series中的type属性修改成'gauge',然后在detail中设置仪表盘详情,用于显示数据.最常用的是formatter(格式化函数或者字符串 ...
- echarts仪表盘如何设置图例(legend)
echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能: 不同段的颜色是通过axisLine->lineS ...
- Echarts CPU监控 (折线仪表盘,图例混搭)
https://blog.csdn.net/mengxiangfeiyang/article/details/44802939 CPU page <script type="tex ...
- 使用echarts绘制漂亮的渐变键盘仪表盘
echarts官方示例和默认样式都比较难看,经过一顿捣鼓实现比较漂亮的渐变仪表盘. 第一步:设置轴线 将图表轴线.label.分割线.隐藏,只保留刻度,然后修改刻度样式达到最终效果.不过要注意的是ax ...
- echarts仪表盘配置参数
require.config({ paths:{ echarts:"js/chart" } }); require([ 'echarts', 'echarts/chart/gaug ...
- echarts仪表盘
echarts链接:https://gallery.echartsjs.com/editor.html?c=xkasbcOqh0 代码: var axislineColor = new echarts ...
随机推荐
- tensorflow实现基于LSTM的文本分类方法
tensorflow实现基于LSTM的文本分类方法 作者:u010223750 引言 学习一段时间的tensor flow之后,想找个项目试试手,然后想起了之前在看Theano教程中的一个文本分类的实 ...
- python爬虫之初始Selenium
1.初始 Selenium[1] 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Moz ...
- Linux基础学习(14)--日志管理
第十四章——日志管理 一.日志管理简介 1.日志服务: 2.常见日志的作用: 二. rsyslogd日志服务 1.日志文件格式: 2./etc/rsyslog.conf配置文件: 三.日志轮替 1.日 ...
- React Router 4.0 ---- 嵌套路由和动态路由
嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...
- No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK问题解决
Maven构建项目报错: 解决办法: 1.eclipse菜单 - Window - Preferences- Java - Installed JREs 将配置的JRE定位到JDK,例如JRE ho ...
- 前端使用Javascrip实现图片轮播
Javascript实现网页图片自动轮播 1.创建一个img标签 设置默认图片,以及图片的高度和宽度,为了大家方便,我将CSS样式和JS语句都写在一个html文件中,演示用的图片来自小明官网:'htt ...
- sws_getContext函数参数介绍
原型: SwsContext *sws_getContext(int srcW, int srcH, enum AVPixelFormat srcFormat, int dstW, int dstH, ...
- Java中的CopyOnWrite
CopyOnWrite简称COW,是一种程序设计的一种优化的策略方法,他开始的思想就是大家一起共享一件东西或商品,当一个人想要改这个事物原有的状态时,会重新复制一份出去,然后再新的事物上面改他所需要的 ...
- Python字符串和列表的内置方法
一.字符串内置方法 1.strip() 删除开头和结尾的字符串 s.strip(rm) 删除s字符串中开头,结尾处,位于rm删除序列的字符串 s.lstrip(rm) 删除s字符串中开头位于rm删除 ...
- HDU4625 JZPTREE 【树形DP】【第二类斯特林数】
题目大意: 对1到n求题目中描述的那个式子. 题目分析: 幂不好处理,转化为斯特林数. 根据$ n^k= \sum_ { i=0 }^k S(k,i)×i!×C(n,i) $. 我们可以将问题转化为对 ...