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. Java_IO_文件的续写_小笔记

    package IO; import java.io.FileWriter; import java.io.IOException; class FileWrite_WenJianXuXie { /* ...

  2. 聊聊Java happens-before原则

    无论处理器.JVM.编译器都会都保证程序正确的前提下尽可能的对指令执行效率进行优化,进行指令重排等操作.而要保证程序的执行结果的正确,则必须要遵循JMM中规定的happens-before原则. 在J ...

  3. python的set处理二维数组转一维数组

    for splitValue in set(dataset[:, featureIndex].tolist()): 首先set是一个无序,无重复的数据结构,所以很多时候使用它来进行去重:但是set接收 ...

  4. c# 数据存储过程

    什么是存储过程? 用某百科的话来说就是一堆为了完成某一功能或者某些功能的SQL语句的集合,而数据库则会将这些存储过程的方法存储到数据库中去. 优点: 1.可重用并且效率高:存储过程经过一次编译后不需要 ...

  5. Hanlp汉字转拼音使用python调用详解

    1.hanlp简介 HanLP是一系列模型与算法组成的NLP工具包,由大快搜索主导并完全开源,目标是普及自然语言处理在生产环境中的应用.HanLP具备功能完善.性能高效.架构清晰.语料时新.可自定义的 ...

  6. [UE4]Invalidation Box

    Invalidation Box:使条目无效的容器.使容器内的条目不再更新,如果确定某一个UI不需要更新的话,就可以把这个UI放到Invalidation Box中. 一.Invalidation B ...

  7. ef join查询

    temp = temp.OrderByDescending(s => s.CreateTime).Skip((param.PageIndex - ) * param.PageSize).Take ...

  8. debian系统的另一个包管理器aptitude

    最近在玩OPI的时候遇到了一个包因为各种依赖问题死活装不上.苦搜很久找到这个aptitude包管理器. 基于debain衍生的各种操作系统比较常用包管理器是apt,不过apt在遇到依赖问题的时候处理得 ...

  9. docker 在window10下的安装

    在win10下安装docker 打开下载页面 https://store.docker.com/editions/community/docker-ce-desktop-windows 打开控制面板 ...

  10. npm镜像地址的修改或切换

    方法一:直接编辑npm的配置文件npm config edit修改registry的地址registry=https://registry.npm.taobao.org 方法二:用代码更改npm的配置 ...