echarts如何實現一組多柱，一柱顯示多組數據且每個數據顯示不同顏色

這個問題的難點在於綜合，分解下來有四個問題

1、多個柱子為一組

2、一個柱子顯示多個數據

3、一個柱子上有多少種數據就顯示多少種顏色

4、鼠標懸浮每個柱子顯示不同數據

以上四個問題，每一個單獨實現都不難，難的在於如何用到一張圖上

 

來看看效果圖：

每一組三根柱子分別是一班，二班，三班

 

上代碼：

const labelOption = {
	show: true,
	position: 'insideRight'
}

const tooltipOption = {
	trigger: 'item',
	axisPointer: {
		type: 'shadow'
	},
	formatter: '一班<br />故障：10H 20%<br />運行：20H 20%<br />暫停：30H 20%<br />離線：25H 20%'
}

const data = {
	color: ['#F56C6C', '#FFC53A', '#7CA870', '#999999'],
	legend: {
            data: ['故障', '暫停', '運行', '離線']
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		}
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	xAxis: [
		{
			type: 'category',
			data: ['沖壓機床#1', '沖壓機床#2', '沖壓機床#3', '沖壓機床#4'],
			axisTick: {
				alignWithLabel: true
			}
		}
	],
        yAxis: [
		{
			type: 'value',
			axisLabel: {
			    formatter: '{value}%'
			}
		}
	],
					    
	series: [
		{
			name: '故障',
			type: 'bar',
			stack: '一班',
			label: labelOption,
			barWidth: '10%',
			data: [20, 30,40, 60],
			tooltip: tooltipOption
		},
		{
			name: '暫停',
			type: 'bar',
			stack: '一班',
			label: labelOption,
			barWidth: '10%',
			data: [21, 30,40, 60],
			tooltip: tooltipOption
		},
		{
			name: '運行',
			type: 'bar',
			stack: '一班',
			label: labelOption,
			barWidth: '10%',
			data: [22, 30,40, 60],
			tooltip: tooltipOption
		},
		{
			name: '離線',
			type: 'bar',
			stack: '一班',
			label: labelOption,
			barWidth: '10%',
			data: [23, 30,40, 60],
			tooltip: tooltipOption
		},
		{
			name: '故障',
			type: 'bar',
			stack: '二班',
			label: labelOption,
			barWidth: '10%',
			data: [20, 30,40, 60],
			tooltip: tooltipOption
		},
		{
			name: '暫停',
			type: 'bar',
			stack: '二班',
			label: labelOption,
			barWidth: '10%',
			data: [21, 30,40, 60],
			tooltip: tooltipOption
		},
		{
			name: '運行',
			type: 'bar',
			stack: '二班',
			label: labelOption,
			barWidth: '10%',
			data: [22, 30,40, 60],
			tooltip: tooltipOption
		},
		{
			name: '離線',
			type: 'bar',
			stack: '二班',
			label: labelOption,
			barWidth: '10%',
			data: [23, 30,40, 60],
			tooltip: tooltipOption
		},
		{
			name: '故障',
			type: 'bar',
			stack: '三班',
			label: labelOption,
			barWidth: '10%',
			data: [20, 30,40, 60],
			tooltip: tooltipOption
		},
		{
			name: '暫停',
			type: 'bar',
			stack: '三班',
			label: labelOption,
			barWidth: '10%',
			data: [21, 30,40, 60],
			tooltip: tooltipOption
		},
		{
			name: '運行',
			type: 'bar',
			stack: '三班',
			label: labelOption,
			barWidth: '10%',
			data: [22, 30,40, 60],
			tooltip: tooltipOption
		},
		{
			name: '離線',
			type: 'bar',
			stack: '三班',
			label: labelOption,
		        barWidth: '10%',
			data: [23, 30,40, 60],
			tooltip: tooltipOption
		}
	]
}                                

 

重點看stack，stack一樣的數據就會堆疊在一起