echarts 半圆形进度条

图例：

配置项：

// 进度百分比
var value = 20
option = {// backgroundColor: '#36467E',title: [{text: value + '%',left: 'center',top: '56%',textStyle: {color: '#c00',fontSize: 20,fontWeight: 'bold',}}, {text: '半圆进度条',left: 'center',top: '70%',textStyle: {color: '#2892E8',fontSize: 14}}],angleAxis: {show: false,// 后面的180表示圆环的跨越的角度， 如max设置为100*360/270,startAngle设置为-135max: 100 * 360 / 180,type: 'value',startAngle: 180,splitLine: {show: false}},// 修改环形的宽度barMaxWidth: 20,radiusAxis: {show: false,type: 'category'},polar: {// 设置环形的位置center: ['50%', '66%'],// 设置环形大小radius: '120%'},series:[{type: 'bar',data: [{value: value,itemStyle: {// 这里是已经达到进度的颜色color: '#32b668'}}],barGap: '-100%',coordinateSystem: 'polar',z: 3}, {type: 'bar',data: [{value: 100,itemStyle: {// 这里是环形底色color: '#15212f',borderWidth: 0}}],barGap: '-100%',coordinateSystem: 'polar',z: 1}]
}

第二种方式：


let data1 = 90  //最大100
let getvalue = data1 / 100 * 180
option = {backgroundColor: '#022142',title: {text: getvalue + '分',textStyle: {color: '#28BCFE',fontSize: 20},subtext: '数据占比',subtextStyle: {color: '#fff',fontSize: 20},itemGap: 20,left: 'center',top: '43%'},angleAxis: {// 起始角度，180 也可以是 225startAngle: 180,max: 360,clockwise: true, // 逆时针// 隐藏刻度线show: false},radiusAxis: {type: 'category',show: true,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false}},polar: {center: ['50%', '50%'],radius: '100%', //图形大小},series: [{type: 'bar',z: 2,// 数值data: [getvalue],showBackground: true,backgroundStyle: {color: 'transparent'},coordinateSystem: 'polar',roundCap: true,barWidth: 10,barGap: '-100%',itemStyle: {normal: {opacity: 1,color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#25BFFF'}, {offset: 1,color: '#5284DE'}]),shadowBlur: 5,shadowColor: '#2A95F9'}}},{type: 'bar',z: 1,// 需要的圆环跨度大小，可以是180,270等data: [180],coordinateSystem: 'polar',roundCap: true,barWidth: 10,barGap: '-100%',itemStyle: {normal: {opacity: 1,color: '#093368'}}},],}

echarts 半圆形进度条相关推荐

进度条上的小圆点怎么做_Android自定义带圆点的半圆形进度条
本文实例为大家分享了Android自定义带圆点的半圆形进度条,供大家参考,具体内容如下仅限用于半圆形,如须要带圆点的圆形进度条,圆点会出现错位现象,此代码仅供,带圆点的圆形进度条有空研究一下!图片效 ...
echarts渐变进度条
echarts渐变进度条展示情况如下图相关代码 var data = ['数据一','数据二',"数据三","数据四","数据五",&q ...
Echarts环形进度条
最终效果图如下: 注意和基础折线图不同,进度条需要额外定义2个变量: var value = 66;//当前进度 var maxvalue = 100;//进度条最大值完整代码如下: <!DO ...
半圆形进度条(html)
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
echarts 弧形进度条配置
源码带注释: option = { series: [ { type: 'gauge', min: 0,//最大值 max: 100, //最小值 ...
echarts带进度条的仪表盘
带阈值更改颜色 echartUtil.getNetGaugeOption = function (data, value, name) { var name = name;//title名称 var ...
echarts 饼图进度条_echarts饼图
在echarts的官网上我们可以看到很多的官方实例,很多酷炫的模型都已经设计好了,不过这些模型的数据一般都是在实例中写死,平时在我们项目里可没有这些死数据,如何从后台获取需要的数据,并且把这些数据拼装 ...
echarts指针进度条刻度调整_指针式流量开关
流量开关属于电工电器行业开关类目,可对各种液体流量进行监测和发讯控制.被广泛应用于管道中流量的监测及各种大.中.小型设备的冷却.润滑系统中.这就不得不说下它独特的流线型结构设计,准确稳定其性能了,具体 ...
【百度echarts】实现圆环进度条-代码示例代码demo
[百度echarts]实现圆环进度条-代码示例 <!DOCTYPE html> <html lang="en"> <head><meta ...
echarts水波球特效（附带外边框进度条）
echarts水波球特效(附带外边框进度条) 1.话不多说先上效果图 2.这里用到了echarts的liquidFill图表,需要加载liquidFill插件 npm i echarts-liquid ...

echarts 半圆形进度条

echarts 半圆形进度条相关推荐

最新文章

热门文章