echarts 堆叠柱状图 顶部圆角效果
图表样式需求:
除了最顶端的堆叠块有圆角效果,其余堆叠块保持平角
实现思路:
遍历每根柱条的数据,找到第一块值不为0的元素,为它设置itemStyle:{borderRadius:[4,4,0,0]}属性,其中borderRadius的值代表(左上,右上,右下,左下)区域的圆角大小,可根据项目需求修改
写法一:直接给series设置该属性,会应用到该系列的每一个数据块身上,即堆叠的每一层数据都有圆角效果
series: {
name: '分数',
type: 'bar',
data: [],
itemStyle: {
barBorderRadius: [4, 4, 0, 0]
}
},
写法二: 将itemStyle属性添加到指定data数据中的指定数值里,这样就可以根据需求添加圆角效果啦~ 如下代码就能够实现指定值为20的元素拥有圆角效果.
data: [
{
value: 20,
itemStyle: {
barBorderRadius: [4, 4, 0, 0],
}
},{
value: 10,
itemStyle: {
barBorderRadius: [0, 0, 0, 0],
}
},
{
value: 20,
itemStyle: {
barBorderRadius: [4, 4, 0, 0],
}
}
]
实现顶部圆角效果:
先遍历单个series的data,得到柱条总数;内层循环整个series,从上至下遍历单个series的data数据,不为0则为它设置itemStyle:{borderRadius:[4,4,0,0]}属性,并结束本柱条所有系列的遍历。
// series一次性获取填入数据
series.push({
name: legs[i],
type: 'bar',
stack: 'x',
data: tempNum
});
// 设置柱条顶层圆角
for (let i in series[0].data) { // 遍历所有的x轴数据(总数为n),为单根柱条提供data下标(0 ~ n-1)
for (let item of series) { //遍历单根柱条
// console.log(item.name)
// console.log(item.data[i].value)
if (item.data[i].value != 0) { // 找到第一个不为0的值,为该项添加itemStyle
item.data[i]['itemStyle'] = { barBorderRadius: [4, 4, 0, 0] };
break; //退出该柱条的循环
}
}
// console.log('------')
}