echarts仪表盘
echarts链接:https://gallery.echartsjs.com/editor.html?c=xkasbcOqh0
代码:
var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#87F3ED'
}, {
offset: 0.62,
color: 'yellow'
}, {
offset: 1,
color: '#FF0000'
}
]); var option = {
series: [{
type: 'gauge',
radius: '100%',
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 21,
color: [
[1, axislineColor]
],
}
},
axisTick: {
show: false
},
splitLine: { // 分隔线
show: false
},
axisLabel: {//是否显示数字
show: false
},
detail: { //百分比颜色
offsetCenter: [0, 240],
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: '#007FFF',
fontSize: 40,
fontWeight: 500
},
formatter: function(value) {
return value + '%';
},
},
itemStyle: { //指针颜色
normal: {
color: "#8492AA",
}
},
data: [{
value: 50,
name: ''
}]
}]
};
echarts仪表盘的更多相关文章
- echarts仪表盘如何设置图例(legend)
echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能: 不同段的颜色是通过axisLine->lineS ...
- echarts仪表盘配置参数
require.config({ paths:{ echarts:"js/chart" } }); require([ 'echarts', 'echarts/chart/gaug ...
- ECharts学习(4)--仪表盘
1. ECharts中的仪表盘,要使用这个图表时把series中的type属性修改成'gauge',然后在detail中设置仪表盘详情,用于显示数据.最常用的是formatter(格式化函数或者字符串 ...
- Echarts CPU监控 (折线仪表盘,图例混搭)
https://blog.csdn.net/mengxiangfeiyang/article/details/44802939 CPU page <script type="tex ...
- Echarts关于仪表盘
https://blog.csdn.net/zc763375777/article/details/53837391 来无事,制作不一样的图标一发,领导让把仪表盘做成百分条,我TM也是醉了,大体样式如 ...
- 使用echarts绘制漂亮的渐变键盘仪表盘
echarts官方示例和默认样式都比较难看,经过一顿捣鼓实现比较漂亮的渐变仪表盘. 第一步:设置轴线 将图表轴线.label.分割线.隐藏,只保留刻度,然后修改刻度样式达到最终效果.不过要注意的是ax ...
- 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 }
随机推荐
- Linux服务安装配置总结
- python 的 format 函数
python的格式化字符串方法之一------------format 函数 它通过{}和:来代替%. 数字 格式 输出 描述 3.1415926 {:.2f} 3.14 保留小数点后两位 3.141 ...
- java_lambda表达式
lambda表达式1 由来 概念 是通过策略模式来曲线实现的 lambda表达式2 语法详解 lambda表达式3 目标类型的概念 目标类型推断 ...
- grep init 与 grep [i]nit
看grep的知识点的时候,在XXX博客里看到一个这样的例子,一直在纠结,纠结,init与[i]nit 匹配到的东西不应该时一样的嘛,为什么一个匹配得出来,一个不行.后来在群里问了某位大哥,耐心的讲解, ...
- jenkines的工作区目录位置查找
先找到jenkines的主目录 系统-系统配置 然后工作区在主目录的workspace文件夹里面
- django的forms认证组件
django的forms认证组件 每个网站的注册界面都需要有相应的"认证"功能,比如说认证注册页面的用户名是否已被注册,二次输入的密码是否一致以及认证用户输入的用户名.邮箱.手机号 ...
- docker入门 什么是docker? 为什么使用docker?
1.什么是docker? 轻量级操作系统虚拟化解决方案 2.为什么使用docker? 1.docker的启动是秒级的,比传统虚拟机快很多 2.资源利用率高,一台主机上可同时运行数千个docker容器 ...
- (整理)MySQL_REHL6.5 安装MySQL5.5
1 根据系统选择Mysql版本 https://dev.mysql.com/downloads/mysql/5.5.html?os=31&version=5.1 在命令行的方式下,REHL/C ...
- JAVA使用log4j(另SSM框架中使用log4j)
1.引入jar包 log4j-1.2.13.jar 2.src下建立配置文件:log4j.properties #不+All,只写后一种LOG log4j.rootLogger =ALL,system ...
- 一个简单的通讯服务框架(大家发表意见一起研究)JAVA版本
最近研究下java语言,根据一般使用的情况,写了个连接通讯服务的框架: 框架结构 C-Manager-S; 把所有通讯内容抽取成三个方法接口:GetData,SetData,带返还的Get; 所有数据 ...