echarts 弧形进度条配置

源码带注释：

option = {
series: [
{
type: 'gauge',
min: 0,//最大值
max: 100, //最小值
startAngle: 200,//仪表盘起始角度。圆心正右手侧为0度，正上方为90度，正左手侧为180度。
endAngle: -20,//仪表盘结束角度
splitNumber: 100, //仪表盘刻度的分割段数
itemStyle: {
color: '#58D9F9', //颜色
shadowColor: 'rgba(0,138,255,0.45)',//阴影颜色
shadowBlur: 10,//图形阴影的模糊大小
shadowOffsetX: 2,//阴影水平方向上的偏移距离
shadowOffsetY: 2,//阴影垂直方向上的偏移距离
},
progress: {
show: true, //是否显示进度条
roundCap: true,//是否在两端显示成圆形
width: 18,//进度条宽度
},
pointer: {
show:false,//是否显示指针
},
axisLine: {
show:true, //是否显示仪表盘轴线
roundCap: true, //是否在两端显示成圆形
lineStyle: {
width: 18,//轴线宽度
}
},
axisTick: {
show:false,//是否显示刻度
},
splitLine: {
show:false,//是否显示分隔线
},
axisLabel: {
show:false,//是否显示标签
},
title: {
show: false,//是否显示标题
},
detail: {
show:true,//是否显示详情
valueAnimation: true,//是否开启标签的数字动画
width: '60%',//详情宽度
lineHeight: 40,//行高
borderRadius: 8, //文字块的圆角
offsetCenter: [0, '-5%'],//相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比
fontSize: 60,//文字的字体大小
fontWeight: 'bolder',//文字字体的粗细
formatter: '{value}/100',//格式化函数或者字符串
color: 'auto',//文本颜色
},
data: [
{
value: 80
}
]
}
]
};

将精度条设为渐变色，中间富文本修改样式：只需要修改（进度条progress、详情detail）

progress: {
show: true, //是否显示进度条
roundCap: true,//是否在两端显示成圆形
width: 18,//进度条宽度
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#4A9FFA' // 0% 处的颜色
}, {
offset: 1, color: '#47D6DE' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},

detail: {
show: true,//是否显示详情
valueAnimation: true,//是否开启标签的数字动画
width: '60%',//详情宽度
lineHeight: 40,//行高
borderRadius: 8, //文字块的圆角
offsetCenter: [0, '-10%'],//相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比
fontSize: 60,//文字的字体大小
fontWeight: 'bolder',//文字字体的粗细
formatter: '{a|{value}}{b|/100}',//格式化函数或者字符串
color: 'auto',//文本颜色
rich: {
a: {
align: 'center',
color: '#3396FE',
fontSize: 50,
fontWeight: 'normal',//文字字体的粗细
borderRadius: 8, //文字块的圆角
lineHeight: 40,//行高
},
b: {
align: 'center',
color: '#67788A',
fontSize: 20,
fontWeight: 'bolder',//文字字体的粗细
borderRadius: 8, //文字块的圆角
lineHeight: 40,//行高
},
}
},

echarts 弧形进度条配置相关推荐

echarts渐变进度条
echarts渐变进度条展示情况如下图相关代码 var data = ['数据一','数据二',"数据三","数据四","数据五",&q ...
Android自定义View之圆弧形进度条，支持背景图片设置
Android下自定义的一款圆弧形进度条,支持中心图片设置,有兴趣的朋友可以尝试下. Github地址点击打开链接 package com.julyapp.progressdemo.view;impo ...
弧形进度条（动画版）
本博客只要没有注明"转",那么均为原创,转贴请注明本博客链接链接我们先把问题分解为下面3个小问题. 1.如何画一个弧形 2.如何让弧形带有加载过程 3.如何让进度值随着圆弧一起转 ...
iOS实现一个颜色渐变的弧形进度条
在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...
Echarts环形进度条
最终效果图如下: 注意和基础折线图不同,进度条需要额外定义2个变量: var value = 66;//当前进度 var maxvalue = 100;//进度条最大值完整代码如下: <!DO ...
android弧形背景,Android 弧形进度条
Android自带的progressbar组件基本可以满足常用的一些需求,最近一套新UI用到了弧形的进度条,如图最初看到,自己是想自己实现,涉及到的问题就比较多,需要一些精确的计算画上去,整个屏幕的 ...
ios弧形进度条_【iOS实现一个颜色渐变的弧形进度条】
在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...
echarts带进度条的仪表盘
带阈值更改颜色 echartUtil.getNetGaugeOption = function (data, value, name) { var name = name;//title名称 var ...
ios弧形进度条_ios 圆形进度条
今天产品要弄一个圆形的进度条 1532512706923.jpg 有很多开源的进度条不用,非要弄这种效果,就不吐槽了,还是想想怎么实现废话就不多说了直接上代码 #import @interface ...

echarts 弧形进度条配置

echarts 弧形进度条配置相关推荐

最新文章

热门文章

echarts 弧形进度条 配置

echarts 弧形进度条 配置相关推荐

最新文章

热门文章

echarts 弧形进度条配置

echarts 弧形进度条配置相关推荐