定制个性化echarts 仪表盘
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 仪表盘的更多相关文章
- Taro 2.2 全面插件化,支持拓展和定制个性化功能
自 2.2 开始,Taro 引入了插件化机制,允许开发者通过编写插件的方式来为 Taro 拓展更多功能或者为自身业务定制个性化功能,欢迎大家进行尝试,共同讨论~ 当前版本 2.2.1 官方插件 Tar ...
- 用Qt写软件系列四:定制个性化系统托盘菜单
导读 一款流行的软件,往往会在功能渐趋完善的时候,通过改善交互界面来提高用户体验.毕竟,就算再牛逼的产品,躲藏在糟糕的用户界面之后总会让用户心生不满.界面设计需综合考虑审美学.心理学.设计学等多因素, ...
- echarts仪表盘如何设置图例(legend)
echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能: 不同段的颜色是通过axisLine->lineS ...
- echarts仪表盘配置参数
require.config({ paths:{ echarts:"js/chart" } }); require([ 'echarts', 'echarts/chart/gaug ...
- 定制个性化码表技术 ibus
在不同用户的工作环境中,都会根据各自使用的字符集的不同,而需要定制优化各自的输入法码表,例如,在GB18030中的大量汉字,或许因为输入法码表的老旧,而难于利用自己熟悉的“五笔”方法快速录入,同样,需 ...
- 定制个性化的FlashPaper生成的文件
1:找到已安装FlashPaper目录下的子目录Interface下的文件DefaultViewer2.swf,在此swf文件的基础上实现自己的修改. 2:利用swf反编译工具,这里推荐 硕思闪客精灵 ...
- echarts仪表盘
echarts链接:https://gallery.echartsjs.com/editor.html?c=xkasbcOqh0 代码: var axislineColor = new echarts ...
- Vagrant定制个性化CentOS7虚拟机模板
关于虚拟机模板 想用vagrant搭建hadoop集群,要完成以下准备工作: 三个虚拟机实例操作系统都是CentOS7的server版: 每个实例都要安装同样的应用.关闭防火墙.关闭swap等: 今天 ...
- 定制个性化的GUI
你现在还在使用SAP GUI710或者是GUI720,又或者更早的640等吗?那么古董先生,推荐您使用GUI730吧,您可能会730好在哪?那我建议您去百度或者Google问吧.对于新的GUI730, ...
- 如何用R来定制个性化PPT
ReporteRs包可以创建word,ppt,html文档.它可以格式化R的输出:如可编辑的矢量图,复杂的表格报告功能,企业模板文档的重用(.docx和.pptx).它是一个很好的自动化报告工具,并且 ...
随机推荐
- python代码编译总结-用于代码加密
基于一个自废武功式的决定,服务需要做成标准件在客户服务器上运行,因此调研了python代码加密的相关内容.py的代码混淆没有被采用,而是采用cython编译成二进制文件进而掩盖源码的方式对代码加密. ...
- golang流程控制if,switch分支
if 分支 if 单分支 if 条件表达式 { 逻辑代码 } package main import "fmt" func main() { //var a int = 9 //i ...
- VS+QT创建的项目 UI界面更新控件,代码里识别不到
1.如果安装了小番茄,看下自己的小番茄的设置里,source of C/C++ content需要选择 Default Intellisense,选择visual assist是识别不到的,具体是为什 ...
- 面试:关于Zookeeper注册节点的上线和掉线
Zookeeper中有一个重要的部件Monitor(监控中心),它是Dubbo中服务治理体系中的重要一环. 监控中心在启动的时候,会通过Zookeeper的/dubbo/com.foo.BarServ ...
- VUE使用axios数据请求时报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法
正常定义全局变量: data:function (){ return{ currentOrders:[] } }, 使用Axios发送请求并获取后端数据时,如果在then中使用this.current ...
- PR如何导出mp4格式的视频
PR如何导出mp4格式的视频 PR是一款强大的视频处理软件,有时我们想导出mp4格式的视频,但好像找不到这种格式,具体怎么操作呢?PR如何导出mp4格式的视频? 1.打开PR,然后处理完视频后,点击左 ...
- vue获取标签对象的方式
我知道2种方式: 1.在标签内 使用 ref 属性定义对象名,使用this.$refs.[name] 调用 2.在标签内 使用 函数传递事件对象, 定义, <div @click="h ...
- docker 搭建 nginxconfig.io 文档
docker镜像仓库 https://hub.docker.com/r/devopstestlab/nginxconfig.io 获取镜像 docekr pull devopstestlab/ngin ...
- CamstarVP表格删除行报错
前提:是从服务中拖出来的表格,带表达式的.但是点击删除按钮的时候,直接页面报错. 原因是:VP上面没有指定服务.
- CamstarVP提交前验证
方法一: public override FormsFramework.ValidationStatus ValidateInputData(Service serviceData) { Valida ...