echarts 仪表盘进度图

实现效果如下：

引用了echarts插件，代码如下：

// 基于准备好的dom，初始化echarts图表
	var myChart = echarts.init(document.getElementById('chart')); 
	option = {
    series: [
        {
            name: '百分比100%',
            type: 'gauge',
			 //半径
			radius: 150,			
			//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
			startAngle: 225,		// 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: -45,	
			center: ['50%', '50%'],
			splitNumber: 3,
			//仪表盘轴线相关配置。
			axisLine: {            // 坐标轴线
				show:true,
                lineStyle: {       // 属性lineStyle控制线条样式
                    width: 10,
					color:[[1, '#F2F4FF']],
            		opacity: 1,					//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
					shadowColor: 'black',
    				shadowBlur: 0,
					shadowOffsetX:0
                }
            },
			splitLine: {			// 分隔线样式。
            	show: true,				// 是否显示分隔线,默认 true。
            	length: 10,				// 分隔线线长。支持相对半径的百分比,默认 30。
            	lineStyle: {			// 分隔线样式。
		            color: "#fff",				//线的颜色,默认 #eee。
		            opacity: 1,					//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
		            width: 8,		//线度,默认 2。
		            		
		            type: "solid",				//线的类型,默认 solid。 此外还有 dashed,dotted
		            shadowBlur: 10,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
		            
		            shadowColor: "white",		//阴影颜色。支持的格式同color。
            	}
            },

            //刻度样式
			axisTick: {
				show: false,
			},
			//刻度标签。
			axisLabel: {
				show:false,
			},
			 //仪表盘指针。
			pointer: {
				//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
				show: false,
				//指针长度
				length:'90%',
				width:0,
			},
			//仪表盘标题。
			title: {
				show: true,
				offsetCenter: [0, '-10%'], // x, y，单位px
				textStyle: {
					color: '#b6b6b6',
					fontSize: 30
				}
			},
			//仪表盘详情，用于显示数据。
			detail: {
				show: true,
				offsetCenter: [0, '-40%'],
				formatter: '{value}%',
				textStyle: {
					fontSize: 30,
					color:'red'
				}
			},
			data: [
			 { value:21,name:''},
			],
			zlevel:1
        },
		{
            name: '进度条',
            type: 'gauge',
			//半径
			radius: 150,			
			startAngle: 225,		// 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: -45,	
			center: ['50%', '50%'],
			//仪表盘轴线相关配置。
			axisLine: {            // 坐标轴线
				show:true,
                lineStyle: {       // 属性lineStyle控制线条样式
                    width: 10,
					color:[[0.2, '#999']]
                }
            },
			//分隔线样式。
			splitLine: {
				show:false,
				length:20,
				lineStyle:{
				  color: 'white',
				  width:3
				}
			},
            //刻度样式
			axisTick: {
				show: false,
			},
			//刻度标签。
			axisLabel: {
				show:false,
			},
			 //仪表盘指针。
			pointer: {
				//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
				show: false,
			},
			//仪表盘标题。
			title: {
				 show: false
			},
			//仪表盘详情，用于显示数据。
			detail: {
				show: true,
				offsetCenter: [0, '20%'],
				formatter: '总销课',
				textStyle: {
					fontSize: 30,
				}
			},
			zlevel:2
        },
		{
            name: '外侧线条',
            type: 'gauge',
			//半径
			radius: 170,			
			startAngle: 225,		// 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: -45,	
			center: ['50%', '50%'],
			//仪表盘轴线相关配置。
			axisLine: {            // 坐标轴线
				show:true,
                lineStyle: {       // 属性lineStyle控制线条样式
                    width: 10,
					color:[[1, '#eee']]
                }
            },
			//分隔线样式。
			splitLine: {
				show: false,
			},
            //刻度样式
			axisTick: {
				show: false,
			},
			//刻度标签。
			axisLabel: {
				show:false,
			},
			 //仪表盘指针。
			pointer: {
				//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
				show: false,
			},
			//仪表盘标题。
			title: {
				 show: false
			},
			//仪表盘详情，用于显示数据。
			detail: {
				show: false,
				offsetCenter: [0, '-10%'],
				formatter: '',
				textStyle: {
					fontSize: 0
				}
			},
			data: [
			 {name:'数量', value:'n'},
			],
			zlevel:3
        }
    ]
	};	
	
	// 为echarts对象加载数据         
	myChart.setOption(option); 

参考文章：https://blog.csdn.net/GRAY_KEY/article/details/82534892

https://blog.csdn.net/guohangfei001/article/details/80995469