1、實現效果
左邊是類別、數量，中間類似于進度條，右邊是所占百分比

2、實現思路
x軸不顯示，y軸的axisLabel用富文本，顯示機器與臺數；圖表有兩個數據組，分別用藍色和灰色表示，兩個柱子重合，灰色柱子在藍色柱子下面；灰色柱子的label用富文本，顯示占比。
3、實現代碼
（1）在template里寫個容器

<div class="chartStyle" ref="chartImplement"></div>

在style里定義容器的大小

.chartStyle {
	height: 300px;
	width: 700px;
}

（2）在data里聲明一個變量

myChartLine:'',

在methods里寫個配置圖表的函數，輸入參數為dataAll,包含了機具的類型、數量、占比等信息。數據格式為
dataAll = {
dataX: dataX,//類別
dataY: dataY,//數量
dataSum: dataSum,//總數
dataPercent: dataPercent,//占比
}

initSchedule(dataAll) {
				let _this = this;
				this.myChartLine = echarts.init(this.$refs.chartImplement)
				let myColor = ['#3C83FF']
				var option = {
					grid: { // 直角坐標系內繪圖網格
						left: '25%', //grid 組件離容器左側的距離,
						//left的值可以是80這樣具體像素值，
						//也可以是'80%'這樣相對于容器高度的百分比
						right: '15%',
						//containLabel: true   //gid區域是否包含坐標軸的刻度標簽。為true的時候，
						// left/right/top/bottom/width/height決定的是包括了坐標軸標簽在內的
						//所有內容所形成的矩形的位置.常用于【防止標簽溢出】的場景
					},
					xAxis: { //直角坐標系grid中的x軸,
						//一般情況下單個grid組件最多只能放上下兩個x軸,
						//多于兩個x軸需要通過配置offset屬性防止同個位置多個x軸的重疊。
						type: 'value', //坐標軸類型,分別有：
						//'value'-數值軸；'category'-類目軸;
						//'time'-時間軸;'log'-對數軸
						splitLine: {
							show: false
						}, //坐標軸在 grid 區域中的分隔線
						axisLabel: {
							show: false
						}, //坐標軸刻度標簽
						axisTick: {
							show: false
						}, //坐標軸刻度
						axisLine: {
							show: false
						}, //坐標軸軸線
					},
					yAxis: {
						type: 'category',
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							color: 'rgba(0,0,0,.7)',
							fontSize: 14,
							formatter: function(data) {
								var traceValue;
								for (var i = 0; i < dataAll.dataX.length; i++) {
									if (data === dataAll.dataX[i]) {
										traceValue = dataAll.dataY[i]
										break
									}
								}
								var arr = [
									'{a|' + data + '}',
									'{b|' + traceValue + '}',
									'{c|臺}'
								]
								return arr.join('')
							},
							textStyle: {
								rich: {
									a: {
										fontSize: 14,
										width: 100
									},
									b: {
										fontSize: 14,
										align: 'center',
										color: '#3C83FF',
										fontWeight: 600,
									},
									c: {
										padding: [0, 0, 0, 5],
										fontSize: 14,
										align: 'center',
									}
								}
							},
						},
						data: dataAll.dataX //類目數據，在類目軸（type: 'category'）中有效。
						//如果沒有設置 type，但是設置了axis.data,則認為type 是 'category'。
					},
					series: [ //系列列表。每個系列通過 type 決定自己的圖表類型
						{
							name: '%', //系列名稱
							type: 'bar', //柱狀、條形圖
							barWidth: 15, //柱條的寬度,默認自適應
							data: dataAll.dataPercent, //系列中數據內容數組
							label: { //圖形上的文本標簽
								show: true,
								position: 'right', //標簽的位置
								offset: [0, -40], //標簽文字的偏移，此處表示向上偏移40
								//formatter: '{c}{a}',//標簽內容格式器 {a}-系列名,{b}-數據名,{c}-數據值
								formatter: function(data) {
									//.toFixed(0)去掉小數位，如果為2就是保留兩位小數
									//let b = data.percent.toFixed(0) + "%";
									//subText = b;
									return '';
								},
								color: 'rgba(0,0,0,.7)', //標簽字體顏色
								fontSize: 26 //標簽字號
							},
							itemStyle: { //圖形樣式
								normal: { //normal 圖形在默認狀態下的樣式;
									//emphasis圖形在高亮狀態下的樣式
									barBorderRadius: 10, //柱條圓角半徑,單位px.
									//此處統一設置4個角的圓角大小;
									//也可以分開設置[10,10,10,10]順時針左上、右上、右下、左下
									color: function(params) {
										let num = myColor.length; //得到myColor顏色數組的長度
										return myColor[params.dataIndex % num]; //返回顏色數組中的一個對應的顏色值
									},
								}
							},
							zlevel: 1 //柱狀圖所有圖形的 zlevel 值,
							//zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
						},
						{
							name: '進度條背景',
							type: 'bar',
							label: { //圖形上的文本標簽
								show: true,
								position: 'right', //標簽的位置
								offset: [0, 0], //標簽文字的偏移，此處表示向上偏移40
								//formatter: '{c}{a}',//標簽內容格式器 {a}-系列名,{b}-數據名,{c}-數據值
								formatter: function(data) {
									//.toFixed(0)去掉小數位，如果為2就是保留兩位小數
									var traceValue;
									for (var i = 0; i < dataAll.dataX.length; i++) {
										if (data.name === dataAll.dataX[i]) {
											traceValue = dataAll.dataPercent[i]
											break
										}
									}
									var arr = [
										'{a|' + traceValue + '}',
										'{b|%}'
									]
									return arr.join('');
								},
								textStyle: {
									rich: {
										a: {
											fontSize: 14,
											color: 'rgba(0,0,0,0.7)',
											fontWeight: 560,
											padding: [0, 0, 0, 15],
										},
										b: {
											fontSize: 14,
											color: 'rgba(0,0,0,0.7)',
											padding: [0, 0, 0, 3],
											align: 'center',
										},
									}
								},
							},
							barGap: '-100%', //不同系列的柱間距離，為百分比。
							// 在同一坐標系上，此屬性會被多個 'bar' 系列共享。
							// 此屬性應設置于此坐標系中最后一個 'bar' 系列上才會生效，
							//并且是對此坐標系中所有 'bar' 系列生效。
							barWidth: 15,
							data: dataAll.dataSum,

							color: '#DEE0E3', //柱條顏色
							itemStyle: {
								normal: {
									barBorderRadius: 10
								}
							}
						},

					]
				};
				this.myChartLine.setOption(option, true);
				window.addEventListener("resize", () => {
					if (this.myChartLine) {
						this.myChartLine.resize();
					}
				});
			},

（3）調用該函數
這里假設有100臺機器，初始化數據

initData() {
				var dataX = ['旋耕機1', '旋耕機2', '旋耕機3', '旋耕機4', '旋耕機5']
				var dataY = ['30', '20', '15', '25', '10'];
				var dataPercent = ['30', '20', '15', '25', '10'];
				var dataSum = new Array(dataX.length).fill(100);
				var data = {
					dataX: dataX,
					dataY: dataY,
					dataSum: dataSum,
					dataPercent: dataPercent,
				}
				this.initSchedule(data);
			},

在mounted中調用initData

mounted() {
			this.initData();
		},

完成