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. asp.net 动态更改 Request.Header

    public class Dev_Sim: IHttpModule { public void Init(HttpApplication app) { app.BeginRequest += dele ...

  2. PythonStudy——字符串类型 String type

    # 1.定义# 需求:你是"好学生" s1 = "你是\"好学生\"" print(s1) # 可以通过引号的嵌套,使内部不同的引号在不转义 ...

  3. python logging配置时间或大小轮转

    python中的很多模块是非常牛X的,之前提到过logging模块(其功能类似于java下的Log4j ),由于最近一个涉及网络排障的脚本需要日志输出,这里就使用了python的logging模块去实 ...

  4. python实现Content-Type类型为application/x-www-form-urlencoded发送POST请求

    周日晚上接到公司的电话需要通过新榜的接口拿下微博热搜数据,拿到接口文档看了下很简单的一个post请求,主要根据时间段来获取热搜数据. 在实际编码的过程中经常遇到header的Content-Type的 ...

  5. Excel技巧--文件批处理

    先认识几个dos命令: ren 旧文件名 新文件名:更改文件名: dir 文件路径 /b > 目标路径/表名.xls:查询指定文件路径下的所有文件,写入到目标路径下的excel文件中: md 新 ...

  6. Hash 1.04 右键

    http://keir.net/hash.html Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Hash 1.04\ ...

  7. 涂抹mysql笔记-搭建mysql高可用体系

    mysql的高可用体系<>追求更高稳定性的服务体系 可扩展性:横向扩展(增加节点).纵向扩展(增加节点的硬件配置) 高可用性<>Slave+LVS+Keepalived实现高可 ...

  8. 第三章 FFmpeg转封装

    3.1 音视频文件转MP4格式 在互联网常见的格式中,跨平台最好的应该是MP4文件. 3.1.1 MP4格式标准介绍 MP4文件由多个Box与FullBox组成 每个Box由Header和Data两部 ...

  9. 表单enctype不对导致action中无法接受数据

    表单enctype不对导致action中无法接受数据 描述:在用ssh开发项目的时候,可能会遇到一个问题, 那就是明明我的表单字段和JavaBean类中的字段都是一一对应的,而且action也实现了模 ...

  10. How to identify safari in Mac?

    How to identify safari in Mac?in userAgent, find keywords below1) and: Macintosh, Mac OS X, AppleWeb ...