echarts中柱状图正负倒角设置
时间: 2023-07-22 11:22:40 浏览: 194
echarts柱状图
在 Echarts 中,可以通过设置 series 中的 itemStyle 属性来设置柱状图的正负倒角。具体来说,可以设置以下两个属性:
1. barBorderRadius:设置柱状图的圆角大小。
2. barBorderColor:设置柱状图的边框颜色。
如果想要设置正负柱子的不同样式,需要在 series 中设置两个子属性,分别为:
1. emphasis:设置鼠标悬浮时的样式。
2. itemStyle:设置柱子的样式。
下面是一个示例代码:
```
option = {
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {},
series: [{
name: '收入',
type: 'bar',
data: [120, 200, -150, 80, -70, 110, 130],
itemStyle: {
normal: {
barBorderRadius: [5, 5, 0, 0], // 设置正柱子的倒角
color: '#FFB6C1' // 正柱子的颜色
},
emphasis: {
barBorderRadius: [5, 5, 0, 0], // 设置正柱子鼠标悬浮时的倒角
color: '#FF69B4' // 正柱子鼠标悬浮时的颜色
}
},
itemStyle: {
normal: {
barBorderRadius: [0, 0, 5, 5], // 设置负柱子的倒角
color: '#87CEFA' // 负柱子的颜色
},
emphasis: {
barBorderRadius: [0, 0, 5, 5], // 设置负柱子鼠标悬浮时的倒角
color: '#00BFFF' // 负柱子鼠标悬浮时的颜色
}
}
}]
};
```
在上述代码中,barBorderRadius 属性用于设置柱状图的倒角大小,而 barBorderColor 属性用于设置柱状图的边框颜色。在 itemStyle 属性中,我们将正负柱子的样式分别设置为了两个子属性,并在其中设置了不同的倒角和颜色。同时,我们也设置了正负柱子鼠标悬浮时的样式,以增强交互效果。
阅读全文