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仪表盘的更多相关文章

  1. echarts仪表盘如何设置图例(legend)

    echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能: 不同段的颜色是通过axisLine->lineS ...

  2. echarts仪表盘配置参数

    require.config({ paths:{ echarts:"js/chart" } }); require([ 'echarts', 'echarts/chart/gaug ...

  3. ECharts学习(4)--仪表盘

    1. ECharts中的仪表盘,要使用这个图表时把series中的type属性修改成'gauge',然后在detail中设置仪表盘详情,用于显示数据.最常用的是formatter(格式化函数或者字符串 ...

  4. Echarts CPU监控 (折线仪表盘,图例混搭)

    https://blog.csdn.net/mengxiangfeiyang/article/details/44802939 CPU page   <script type="tex ...

  5. Echarts关于仪表盘

    https://blog.csdn.net/zc763375777/article/details/53837391 来无事,制作不一样的图标一发,领导让把仪表盘做成百分条,我TM也是醉了,大体样式如 ...

  6. 使用echarts绘制漂亮的渐变键盘仪表盘

    echarts官方示例和默认样式都比较难看,经过一顿捣鼓实现比较漂亮的渐变仪表盘. 第一步:设置轴线 将图表轴线.label.分割线.隐藏,只保留刻度,然后修改刻度样式达到最终效果.不过要注意的是ax ...

  7. Echarts——更改仪表盘方向和颜色

    做小项目需要用到仪表盘,官方给出的颜色设置如下: 而我想要如下样式的: 最后,经过一番折腾算是搞成了如下样式效果: 要达到上面效果关键在于设置Echarts的如下两处js代码: 1.大小值要颠倒,因为 ...

  8. echarts实现仪表盘(自己动起来,没有后端,顺便重温math.random

    let a = parseInt(Math.random() * (2 + 1), 10); let arr = []; arr.push(res[a]); let option = { toolti ...

  9. echarts gauge 仪表盘去除外发光效果

    textStyle中加shadow选项: textStyle: { shadowColor : '#000', //默认透明 shadowBlur: 0 }

随机推荐

  1. 转载:python list和set的性能比较+两者转换

    两者性能比较(转自http://www.linuxidc.com/Linux/2012-07/66404.htm) 本来是知道在Python中使用Set是比较高效,但是没想到竟然有这么大的差距: ~$ ...

  2. JS 格式化日期时间

    方法一: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1 ...

  3. 让docker容器开机启动

    网上有些文章说,要让docker 的容器自动在开机启动,是写脚本,比如在 rc.local 中写.其实完全没必要这么麻烦,docker 有相关指令,docker run 指令中加入 --restart ...

  4. 3.2-1937 Problem D

    #include <stdio.h> ; }; }; int main(void) { int n; while(scanf("%d", &n) != EOF) ...

  5. 中文分词算法工具hanlp源码解析

    词图 词图指的是句子中所有词可能构成的图.如果一个词A的下一个词可能是B的话,那么A和B之间具有一条路径E(A,B).一个词可能有多个后续,同时也可能有多个前驱,它们构成的图我称作词图. 需要稀疏2维 ...

  6. 【转】C++中嵌入python程序——参数传递

    C++中嵌入python程序——参数传递 前面两篇博客已经介绍如何在C++中嵌套使用 python,但是在实际使用中,我们需要向python传递各种各样的参数,这样的程序才具有更高的灵活性.下面简单介 ...

  7. LINUX 查看当前系统的内存使用情况 vmstat

    Linux vmstat 命令 Vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况. 相比 ...

  8. Kong管理UI -kong-dashboard

    本文仍然是在ubuntu18的环境下进行 https://github.com/PGBI/kong-dashboard kong dashboart如果要正常使用管理UI,前提为kong已经正常run ...

  9. finstrument-functions

    2017-12-03 23:59:16 参考 如何快速地在每个函数入口处加入相同的语句? https://www.zhihu.com/question/56132218 做个存档 scj@scjCom ...

  10. studio--常见设置

    13.Butterknife插件:zelezny 12.android studio怎么设置打开项目时打开项目列表? 11.stuido   代码背景颜色设置为护眼模式 ======== 13.But ...