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一样的数据就会堆叠在一起