option: {
tooltip: {
trigger: 'axis',
confine: true,
axisPointer: { type: 'none' },
textStyle: {
fontSize: 12, fontWeight: 500,
},
formatter (params) {
// 只展示柱子对应的内容,把顶部底部的 tooltip 过滤掉
return params.reduce((pre, i) => {
if (i.componentSubType === 'bar') {
i.marker = i.marker.replace(/\[object Object\]/, i.color.colorStops[1].color);
i.value = `<span style="flex: 1; text-align: right; margin-left: 16px;">${i.value}</span>`;
const current = `<div style="display: flex; align-items: center; height: 26px;">${i.marker}${i.axisValue}${i.value}</div>`;
return `${pre}${current}`;
}
return pre;
}, '');
},
},
textStyle: {
fontSize: 11,
color: '#ffffff'
},
grid: { left: '3%', right: '4%', bottom: '5%', containLabel: true },
xAxis: {
type: 'category',
color: '#fff',
data:[1111,11111,11111,13213]
axisLine: { lineStyle: { color: '#F2F4F7' } },
axisTick: { show: false },
axisLabel: {
interval: 0,
rotate: 40,
color: '#fff'
},
},
yAxis: {
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, .1)'
}
},
},
series: [
{
type: 'bar',
barWidth: 24,
barCategoryGap: 12,
data: ['56.1131', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478'],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#057BAE',
},
{
offset: 1,
color: '#58F0F5',
},
])
},
},
{
type: 'pictorialBar',
symbolSize: [24, 6],
symbolOffset: [0, -5],
z: 18,
itemStyle: { color: '#58F0F5' },
symbolPosition: 'end',
data: ['56.1131', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478'],
},
{
type: 'pictorialBar',
symbolSize: [24, 6],
symbolOffset: [0, 4],
z: 12,
itemStyle: { color: '#58F0F5' },
symbolPosition: 'start',
data: ['56.1131', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478'],
},
],
// legend 对应的 color,实际上柱状图的颜色都是在 itemStyle 里定义的
color: ['#C65FF9', '#FF704C', '#2872FC'],
},