固定宽度柱状图添加固定宽度的背景和选中阴影～echarts奇奇怪怪系列

一、效果

遇到一个需要固定宽度和对应的背景，背景比柱状要宽一点,并且选中有选中效果阴影
上图：

原本以为直接用官方的就可以了，结果官方的showBackground是不能这是宽度的，与柱状图同等宽度，选中阴影通过axisPointer做出来，没法设置宽度，也是差强人意
官网的是这样的：不符合要求

二、解决方法

到论坛里，看到有人是通过用两个柱状图，用 barGap配置项偏移做出来的
但我我发现，这种方法做出来的，偏移量很难把握，而且他只能是一个柱状图，两个直接gg
最终我采用两x轴分开渲染背景和柱状图，避免柱状图数据被背景数据影响

三、最终效果

option配置项

const data = [120, 200, 150, 80, 70, 110, 130]
const lineData = [150, 230, 224, 218, 135, 147, 260]
const max = data.concat(lineData)
	.reduce((pre, cur) => pre > cur ? pre : cur, 0)
const color = [{
	type: 'linear',
	x: 0,
	x2: 0,
	y: 0,
	y2: 1,
	colorStops: [{
			offset: 0,
			color: '#40BDF7',
		},
		{
			offset: 0.5,
			color: '#40BDF7',
		},
		{
			offset: 1,
			color: '#3F82F7',
		},
	],
}, ]
const option = {
	color,
	xAxis: [{
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	}, {
		type: 'category',
		show: false,
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	}],
	yAxis: {
		type: 'value',
		max: max
	},
	series: [{
		data: data,
		barWidth: 20,
		type: 'bar'
	}, {
		data: lineData,
		type: 'line'
	}, {
		xAxisIndex: 1,
		itemStyle: {
			color: 'rgba(180, 180, 180, 0.2)'
		},
		data: data.map(() => max),
		barWidth: 60,
		emphasis: {
			itemStyle: {
				color: {
					type: 'linear',
					x: 0,
					x2: 0,
					y: 0,
					y2: 1,
					colorStops: [{
							offset: 0,
							color: 'rgba(64, 247, 176, 0.25)'
						},
						{
							offset: 1,
							color: 'rgba(17, 34, 64, 0.25)'
						},
					],
				},
			},
		},
		type: 'bar'
	}]
};