' + data[0].name + '

'] data.forEach(item => { const html = '

' + // eslint-disable-next-line prettier/prettier '

' + item.marker + ' ' + item.seriesName + '：

' + // eslint-disable-next-line prettier/prettier '

' + item.data + '

' + '

' tmp.push(html) }) if (tip && tip.length > 0) { tip.forEach((item, index) => { const html = '

' + // eslint-disable-next-line prettier/prettier '

' + tipTitle[index] + '：

' + // eslint-disable-next-line prettier/prettier '

' + item[data[0].dataIndex] + (payload.data.showBarText || '') + '

' + '

' tmp.push(html) }) } return tmp.join('') } }, grid: { // 距离上右下左的距离 left: 0, right: 0, bottom: 2, top: 45, // 是否包含文本 containLabel: true }, legend: { type: 'scroll', itemWidth: 10, itemHeight: 3, itemGap: 10, left: 'right', itemStyle: { color: 'inherit' }, textStyle: { color: 'inherit' }, data: title.map(item => { return { name: item } }) }, xAxis: { type: 'category', data: x, axisLine: { lineStyle: { type: 'solid', color: '#4176a3', width: '0.5' //坐标线的宽度 } }, axisTick: { show: false }, //坐标轴斜着显示 axisLabel: { interval: 0, rotate: 0, color: '#96cbfa', fontSize: 12, formatter(params) { return formatter(params, wordNum) } } }, yAxis: { name: unit[0], nameGap: 10, nameTextStyle: { align: 'left', fontSize: 11, color: '#4176a3' }, minInterval: 1, type: 'value', axisLine: { lineStyle: { type: 'solid', color: '#4176a3', //左边线的颜色 width: '1' //坐标线的宽度 }, color: '#4176a3', minInterval: 1 }, axisLabel: { fontSize: 14 }, // 刻度 axisTick: { show: false }, // y轴线 splitLine: { show: true, lineStyle: { color: 'rgba(65, 118, 163, 0.3)', width: 1, type: 'solid' } } }, // 字体 textStyle: { fontSize: 10, color: '#4176a3' }, series: [] } } const getBar = (name, color, data) => { return { showBackground: false, barMaxWidth: 8, name, data, type: 'bar', stack: 'number', itemStyle: { color } } } option = getOpion(title, x, unit, tip) if (payload.data.max !== undefined) { option.yAxis.max = payload.data.max } if (payload.data.min !== undefined) { option.yAxis.min = payload.data.min } if (bar1.length > 0) { option.series.push(getBar(payload.data.title[0], payload.data.color[0], bar1)) } if (bar2.length > 0) { option.series.push(getBar(payload.data.title[1], payload.data.color[1], bar2)) } if (bar3.length > 0) { option.series.push(getBar(payload.data.title[2], payload.data.color[2], bar3)) } if (bar4.length > 0) { option.series.push(getBar(payload.data.title[3], payload.data.color[3], bar4)) }

柱状叠加图