option = {
series: [
{
type : "gauge",
center: ["50%", "45%"], // 默认全局居中
radius : "90%",
startAngle: '200',
endAngle: '-159.99',
splitNumber: 45,
detail: {
offsetCenter: [0, -20],
formatter: ' '
},
pointer: {
show: false
},
axisLine : {
show : true,
lineStyle : { // 属性lineStyle控制线条样式
color : [ //表盘颜色
[ 0.32, "#00F993FF" ],//0-32%处的颜色
[ 0.48, "#00FFE0FF" ],//33%-48%处的颜色
[ 0.76, "#4AA9FFFF" ],//49%-76%处的颜色
[ 1,"#4D80FFFF" ]//77%-100%处的颜色
],
width : 30//表盘宽度
}
}, splitLine: {
show: true,
length: 32,
lineStyle: {
color: '#fff',
width: 6
}
},
axisTick : { //刻度线样式(及短线样式)
show:false,
// length : 20
},
axisLabel : { //文字样式(及“10”、“20”等文字样式)
show:false, }, }
]
};

效果图如下

项目中可以根据color的百分比,区分不同类别的占比,如

定制个性化echarts 仪表盘的更多相关文章

  1. Taro 2.2 全面插件化,支持拓展和定制个性化功能

    自 2.2 开始,Taro 引入了插件化机制,允许开发者通过编写插件的方式来为 Taro 拓展更多功能或者为自身业务定制个性化功能,欢迎大家进行尝试,共同讨论~ 当前版本 2.2.1 官方插件 Tar ...

  2. 用Qt写软件系列四:定制个性化系统托盘菜单

    导读 一款流行的软件,往往会在功能渐趋完善的时候,通过改善交互界面来提高用户体验.毕竟,就算再牛逼的产品,躲藏在糟糕的用户界面之后总会让用户心生不满.界面设计需综合考虑审美学.心理学.设计学等多因素, ...

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

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

  4. echarts仪表盘配置参数

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

  5. 定制个性化码表技术 ibus

    在不同用户的工作环境中,都会根据各自使用的字符集的不同,而需要定制优化各自的输入法码表,例如,在GB18030中的大量汉字,或许因为输入法码表的老旧,而难于利用自己熟悉的“五笔”方法快速录入,同样,需 ...

  6. 定制个性化的FlashPaper生成的文件

    1:找到已安装FlashPaper目录下的子目录Interface下的文件DefaultViewer2.swf,在此swf文件的基础上实现自己的修改. 2:利用swf反编译工具,这里推荐 硕思闪客精灵 ...

  7. echarts仪表盘

    echarts链接:https://gallery.echartsjs.com/editor.html?c=xkasbcOqh0 代码: var axislineColor = new echarts ...

  8. Vagrant定制个性化CentOS7虚拟机模板

    关于虚拟机模板 想用vagrant搭建hadoop集群,要完成以下准备工作: 三个虚拟机实例操作系统都是CentOS7的server版: 每个实例都要安装同样的应用.关闭防火墙.关闭swap等: 今天 ...

  9. 定制个性化的GUI

    你现在还在使用SAP GUI710或者是GUI720,又或者更早的640等吗?那么古董先生,推荐您使用GUI730吧,您可能会730好在哪?那我建议您去百度或者Google问吧.对于新的GUI730, ...

  10. 如何用R来定制个性化PPT

    ReporteRs包可以创建word,ppt,html文档.它可以格式化R的输出:如可编辑的矢量图,复杂的表格报告功能,企业模板文档的重用(.docx和.pptx).它是一个很好的自动化报告工具,并且 ...

随机推荐

  1. 使用源码编译安装PHP7

    使用源码编译安装PHP7 2015年6月11日,PHP官网发布消息,正式公开发布PHP7第一版的alpha版本. PHP7特性: PHP 7.0.0 Alpha 1使用新版的ZendEngine引擎, ...

  2. 关于paddleocr2.6 布局分析的踩坑总结(一)

    8月24日paddleocr发布了2.6.0,之前使用过2.5版本的布局分析,整体比较好用.近期就尝试了一下paddleocr的新版本,记录一下尝鲜经历.2.6版本的公告中指出,布局分析模型缩小了95 ...

  3. Centos 升级glibc 亲测好用

    wget http://ftp.gnu.org/gnu/glibc/glibc-2.18.tar.gz  tar zxf glibc-2.18.tar.gz cd glibc-2.18/ mkdir ...

  4. 【个人笔记】CentOS 安装 Docker CE

    要在 CentOS 上开始使用 Docker CE,请确保 满足先决条件,然后 安装Docker. 1. 卸载旧版本 sudo yum remove docker docker-client dock ...

  5. SpringBoot Circular view path错误

    在运行SpringBoot时报了这样一个错误 百度翻译是视图循环 搜索一下 原来是类上restcontroller写成了controller  对比一下两者 @Controller和@RestCont ...

  6. uni-app 通过后缀名区分不同渠道版本

    同一套微信小程序代码根据需求要打包成两款小程序,主要逻辑页面一致,主题色不一致,部分页面布局不,逻辑不一致. script命令 先在package.json的script新增命令,根据不同的命令生成对 ...

  7. flink sql任务出现java.lang.OutOfMemoryError: Metaspace

    线上任务一直出现以下错误导致一直重启,然后一直因为这个错误挂掉 org.apache.flink.shaded.guava18.com.google.common.util.concurrent.Ex ...

  8. 路飞项目 day02 全局日志、全局异常处理、封装Response、数据库准备

    一.路飞项目全局日志配置 ​ 那个代码不用死记硬背,知道一些地方是啥意思即可 1.复制django自带的日志模块的大代码到dev(settings)文件中 LOGGING = { 'version': ...

  9. (0501)phase机制

    (1)启动seq: (2) 0312:

  10. 【Word】如何批量导出ppt中的备注

    [Word]如何批量导出ppt中的备注 文件 | 导出 | 创建讲义 | 备注在幻灯片旁 在word中删除左边两列,复制剩下的表格 | 粘贴-只保留文本