echanrts 仪表盘 间隔进度条/规律多色进度条

效果图:

	const cake:any = document.getElementById(`fault-item-${index}`)
	const myChart = echarts.init(cake);
	const option = {
    series: [
        {
            name: '百分比100%',
            type: 'gauge',
			radius: 180, //直径 建议写小点
            startAngle: 220, //开始角度			
			endAngle: -40,//结束角度。
			center: ['50%', '50%'],
			axisLine: {            // 坐标轴线
				show:true,
                lineStyle: {       // 属性lineStyle控制线条样式
                    width: 35, //宽度 可以写小点
					color:[[1, '#0055A0']], // 下面仪表盘颜色
                }
            },
			//分隔线样式。
			splitLine: {
				show: false,
			},
            //刻度样式
			axisTick: {
				show: false,
			},
			//刻度标签。
			axisLabel: {
				show:false,
			},
			 //仪表盘指针。
			pointer: {
				show: false,
			},
			title: {
				show: false,
			},

			detail: {
				show: false,
			},
			data: [
			 { value:21,name:'完成率'},
			],
			zlevel:1
        },
		{
            name: '进度条',
            type: 'gauge',
			radius: 180,
            startAngle: 220,
			endAngle: -40,
			center: ['50%', '50%'],
			axisLine: { 
				show:true,
                lineStyle: {       
                    width:35,
					color:[[0.2, '#2BCCFF']] //上面仪表盘颜色
                }
            },
			//分隔线样式。
			splitLine: {
				show:true,
				distance: -35, //相当于间隔线的位移
				length:35,
				lineStyle:{
				  color: '#0055A0', //上面仪表盘间隔线颜色
				  width:7
				}
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				show:false,
			},
			pointer: {
				show: false,
			},
			//仪表盘标题。
			title: {
				 show: false
			},
			detail: {
				show: false,
			},
			zlevel:2
        },
    ]
	myChart.setOption(option,true);

推荐一个快捷的调试方法，可以先在echarts的在线编辑器里调试成自己想要的样子在copy进自己的项目里哟~

附地址：https://echarts.apache.org/examples/zh/editor.html?c=gauge-speed

后续：
发现这种写法有点bug 需要控制lineStyle color的百分比进行展示 且无论多少都显示十根线
又改编了第二种写法：

切换两个仪表盘的value值就好啦

{
	series:
	[
		{
			name: '百分比100%',
			type: 'gauge',
			axisLine: {            // 坐标轴线
				show: true,
				lineStyle: {       // 属性lineStyle控制线条样式
					width: 40, //宽度 可以写小点
					color: [[1, '#0055A0']], // 下面仪表盘颜色
				}
			},
			itemStyle: {
				color: '#2BCCFF'
			},
			progress: {
				show: true,
				// roundCap: true,
				width: 40
			},
			//分隔线样式。
			splitLine: {
				show: false,
			},
			//刻度样式
			axisTick: {
				show: false,
			},
			//刻度标签。
			axisLabel: {
				show: false,
			},
			//仪表盘指针。
			pointer: {
				show: false,
			},
			title: {
				show: false,
			},

			detail: {
				show: false,
			},
			data: [
				{ value: 50, name: '完成率' },
			],
			zlevel: 1
		},
		{
			name: '业务指标',
			type: 'gauge',
			splitNumber: 1,
			axisLine: {
				lineStyle: {
					width: 40,
					// 透明度设置为0
					opacity: 0
				}
			},
			pointer: {
				show: false,
			},
			splitLine: {
				show: false
			},
			axisTick: {
				distance: -40,
				length: 40,
				splitNumber: 100,
				lineStyle: {
					width: 4,
					// 给点颜色
					color: '#0055A0'
				}
			},
			detail: { show: false },
			data: [{ value: 50 }],
			axisLabel: {
				show: false,
			},
			zlevel: 2
		}
	]
};

如果觉得有用的话，麻烦给博主点个赞哟~