echarts 柱状图每根bar正负坐标倒圆角
时间: 2023-07-05 14:28:22 浏览: 273
要给 ECharts 柱状图的每根 bar 正负坐标倒圆角,可以通过设置 `itemStyle` 属性来实现。具体步骤如下:
1. 在 ECharts 的 `option` 中找到对应的 `series`,比如:
```
option = {
// ...
series: [
{
name: '柱状图',
type: 'bar',
data: [10, -20, 30, -40, 50],
// ...
}
]
}
```
2. 在 `series` 对象中添加 `itemStyle` 属性,并设置 `borderRadius` 属性为数组 `[0, 0, 0, 0]`,即四个角都不进行圆角处理:
```
option = {
// ...
series: [
{
name: '柱状图',
type: 'bar',
data: [10, -20, 30, -40, 50],
itemStyle: {
borderRadius: [0, 0, 0, 0]
},
// ...
}
]
}
```
3. 对于正负数的柱状图,需要分别设置正数和负数的 `itemStyle`,可以使用 ECharts 提供的 `barItemStyle` 和 `barNegativeItemStyle` 属性来分别设置。比如:
```
option = {
// ...
series: [
{
name: '柱状图',
type: 'bar',
data: [10, -20, 30, -40, 50],
itemStyle: {
borderRadius: [0, 0, 0, 0]
},
barItemStyle: {
borderRadius: [10, 10, 0, 0]
},
barNegativeItemStyle: {
borderRadius: [0, 0, 10, 10]
},
// ...
}
]
}
```
上面的代码中,`barItemStyle` 设置正数柱状图的圆角为左上角和右上角,`barNegativeItemStyle` 设置负数柱状图的圆角为左下角和右下角。你可以根据需要调整圆角的大小和位置。
阅读全文