echarts修改柱状图背景圆角
时间: 2023-11-07 12:03:57 浏览: 338
echarts 柱状图渐变色背景
5星 · 资源好评率100%
要修改Echarts柱状图的背景圆角,可以使用itemStyle的barBorderRadius属性。根据引用的内容,可以采用两次循环的方法来为不同坐标下的每一个颜色单独添加圆角样式。
具体的代码实现如下:
```javascript
// 遍历所有轴数据
for (let i in series[0].data) {
// 遍历单根柱子
for (let item of series) {
if (item.data[i].value !== 0) {
// 找到第一个不为零的值,为该项添加样式
item.data[i].itemStyle = { barBorderRadius: [5, 0, 0, 5] };
break;
}
}
// 反向遍历,为另一头添加圆角
for (let j = series.length - 1; j >= 0; j--) {
if (series[j].data[i].value !== 0) {
// 当该项已经有一半为圆角,则设置为全圆角
series[j].data[i].itemStyle = series[j].data[i].itemStyle
? { barBorderRadius: [5, 5, 5, 5] }
: { barBorderRadius: [5, 0, 0, 5] };
break;
}
}
}
```
这段代码将会根据柱状图的数据,给每一个坐标下的每一个颜色单独判断赋值,实现不同坐标的柱子顶部或底部的圆角效果。
参考资料:[CSDN](https://blog.csdn.net/qq_36437172/article/details/106115048)
阅读全文