echarts堆叠柱状图柱子的圆角
时间: 2023-09-28 08:08:11 浏览: 79
在echarts中,可以通过设置柱子的itemStyle属性来实现堆叠柱状图柱子的圆角效果。有几种不同的写法可以实现这个效果。
第一种写法是在每个系列的数据项中设置itemStyle属性,根据条件判断是否给柱子添加圆角效果。具体的代码如下所示:
```
series.push({
name: legs[i],
type: 'bar',
stack: 'x',
data: tempNum,
itemStyle: {
barBorderRadius: [4, 4, 0, 0]
}
});
```
以上代码会给每个系列的每个数据块都添加圆角效果。
第二种写法是直接给整个系列设置itemStyle属性,这样会应用到该系列的每一个数据块身上。具体的代码如下所示:
```
series: {
name: '分数',
type: 'bar',
data: [],
itemStyle: {
barBorderRadius: [4, 4, 0, 0]
}
}
```
另外,如果要实现上面的数据为0时,相邻下面的柱子处理为圆角的效果,可以使用下面的解决方法:
```
{
name: 'Bing',
type: 'bar',
stack: 'Search Engine',
emphasis: {
focus: 'series'
},
data: [
{
value: 50,
label: {},
itemStyle: {
// 判断红色的第一个数据是否为0,如果不为0,则设置为barBorderRadius: [0, 0, 0, 0;如果为0,则设置为barBorderRadius: [12, 12, 0, 0]
barBorderRadius: [12, 12, 0, 0]
}
},
{
value: 50,
label: {},
itemStyle: {
barBorderRadius: [0, 0, 0, 0]
}
}
]
}
```
以上就是关于echarts堆叠柱状图柱子的圆角效果的几种写法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [echarts 堆叠柱状图 顶部圆角效果](https://blog.csdn.net/m0_48571414/article/details/126305173)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [echarts 堆叠柱状图 顶端圆角](https://blog.csdn.net/kangmingyaner/article/details/122086892)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)