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 }
随机推荐
- 3.python中的基本概念
注释: 单行注释 # 多行注释 """ ''' 变量: 把程序运行中产生的值,暂时存储在内存,方便后面的程序调用. 变量命名的规则: 1.用数字.字母.下划线组成. 2. ...
- 在IDEA中实战Git-branch
工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁 场景一:小张创建项目并提交到远程Git仓库 场景二:小袁从远程Git仓库上获取项目源码 场景三:小 ...
- edgedb 强大的对象关系数据库
edgedb 是一个强大的对象关系数据库,构建在pg 之上. 包含的特性: 严格的强类型模式; 强大而富有表现力的查询语言; 丰富的标准库; 内置支持模式迁移; 本机GraphQL支持. 数据模型 从 ...
- 解决Visual Studio禁止使用strlen函数的问题
问题描述: 在学习C++的复制构造函数以及复制赋值运算符的重载时,需要用到使用C风格的字符串作为引入,由于我用的是VS2015(社区版),在编译时出错.编译器提醒strcpy函数是不安全的,建议改用s ...
- 学会数据库读写分离、分表分库——用Mycat
系统开发中,数据库是非常重要的一个点.除了程序的本身的优化,如:SQL语句优化.代码优化,数据库的处理本身优化也是非常重要的.主从.热备.分表分库等都是系统发展迟早会遇到的技术问题问题.Mycat是一 ...
- Delphi2009之TImage
TPngImage原来是SourceFroge上的一个开源项目,现在突然消失了,为什么呢?Nick 在他的博客上写到:TPNGImage被CodeGear/Embarcadero收购了,现在直接就是D ...
- 滑雪(dp)
问题 H: [例9.24]滑雪 时间限制: 1 Sec 内存限制: 128 MB提交: 21 解决: 13 题目描述 小明喜欢滑雪,因为滑雪的确很刺激,可是为了获得速度,滑的区域必须向下倾斜,当小 ...
- 6.8 出口条件循环:do while
while循环和for循环都是入口条件循环,即在循环的每次迭代之前检查测试条件,所以有可能根本不执行循环体中的内容.C语言还有出口条件循环(exit-condition loop),即在循环的每次迭代 ...
- Python全栈开发记录_第一篇(循环练习及杂碎的知识点)
Python全栈开发记录只为记录全栈开发学习过程中一些难和重要的知识点,还有问题及课后题目,以供自己和他人共同查看.(该篇代码行数大约:300行) 知识点1:优先级:not>and 短路原则:a ...
- python学习笔记_week27
search import time import random def cal_time(func): def wrapper(*args, **kwargs): t1 = time.time() ...