需求:
画echarts堆叠的柱状图时,要始终设置最上方的一项为圆角,在点击切换图例时也要满足需求,类似以下效果:
思路:
首先设置最后的一项为整体的圆角,之后再判断是否有某一项的数据项为0或undefined。若每一项的数据均有真值,则无需再处理;若存在0或undefined的数据,就会导致显示异常:
由于echarts的data项可以设置为数字或是一个对象,例如:
[5, 5, { value: 10, itemStyle: { borderRadius: [15, 15, 0, 0] } }]这样的形式,因此当最后一项的index项为0或undefined时,从后往前找出series里第index项有值的data,并将它的第index项设置为对象的形式即可满足需求。
代码:
function setEchartsBorderRadius(series, borderRadius = [15, 15, 0, 0]) {
if (series.length === 0) return;
// set last series borderRadius
let lastSeries = series[series.length - 1];
lastSeries.itemStyle = { borderRadius };
// if every data item is valuable
let flag = lastSeries.data.some((item) => !item);
if (!flag) return;
// findLastIndex polyfill
if (!Array.prototype.findLastIndex) {
Array.prototype.findLastIndex = function (cb, thisArg) {
for (let i = this.length - 1; i >= 0; i--) {
if (cb.apply(thisArg ?? this, [this[i], i, thisArg ?? this])) {
return i;
}
}
return -1;
};
}
// if undefined or zero, set previous series borderRadius
for (let i = 0; i < lastSeries.data.length; i++) {
if (!lastSeries.data[i]) {
// find last series index which data[i] is valuable
let index = series.findLastIndex((item) => item.data[i]);
if (index > -1) {
//save value temporarily
let value = series[index].data[i];
series[index].data[i] = {
value,
itemStyle: { borderRadius },
};
}
}
}
}
注意:
在点击图例切换时,会有多个data的数据项出现圆角的问题,因此我是自定义了echarts的图例,不用它自带的图例。
