const options = computed(() => {
let series = [];
if (
props.linechartData?.series &&
Array.isArray(props.linechartData?.series)
) {
series = props.linechartData?.series?.map((item) => ({
name: item.name,
// barMaxHeight: 20, // 设置每条柱子的最大高度
barMaxWidth: 60, // 设置柱子的最大宽度为160
label: {
show: true,
formatter(params) {
// 判断数值是否为 0,如果是则返回空字符串
if (params.value === 0) {
return '';
}
return params.value;
},
},
type: 'bar',
stack: 'stack',
data: item.data,
}));
series.push({
name: 'Total',
type: 'bar',
stack: 'stack',
label: {
show: true,
position: 'right',
},
data: new Array(props.linechartData?.series[0].data.length).fill(0),
});
// eslint-disable-next-line no-inner-declarations
function getSum(params) {
let dataValue = 0;
for (let i = 0; i < series.length; i++) {
dataValue += series[i].data[params.dataIndex];
}
return dataValue;
}
series[series.length - 1].label.formatter = getSum;
}
return {
title: {
text: '核查案件涉及产品及诉点分布情況',
},
tooltip: {
trigger: 'item',
formatter(params) {
console.log('-----------', params);
if (params.seriesName === 'Total') {
// 对于名称为 'Total' 的系列,不显示 tooltip
return '';
}
// 其他系列显示默认的 tooltip
return `${params.seriesName} <br />${params.marker}${params.name}: ${params.value}`;
},
},
legend: {
data: props.linechartData?.series?.map((item) => item.name) || [],
orient: 'horizontal', // 设置图例的布局方向为水平
top: 'bottom', // 设置图例在底部
},
color: props.linechartData?.series?.map((item) => item.color) || [],
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: props.linechartData?.categories || [],
inverse: true,
},
series,
};
});
echart堆叠柱状图 在柱子末尾显示总数
于 2023-11-06 10:39:45 首次发布