echarts怎么让横向柱状图外部带有边框
时间: 2023-10-10 15:08:55 浏览: 52
可以使用echarts的grid属性中的borderWidth和borderColor来控制柱状图的边框。
具体操作步骤如下:
1. 在echarts的option中添加grid属性,并设置borderWidth和borderColor的值,如下所示:
```
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
borderWidth: 1,
borderColor: '#ccc'
},
// 其他配置项
}
```
2. 将柱状图的barGap和barCategoryGap属性设置为0,以确保柱状图紧密排列,如下所示:
```
option = {
grid: {
// grid属性配置
},
xAxis: {
// x轴配置
},
yAxis: {
// y轴配置
},
series: [
{
name: '柱状图名称',
type: 'bar',
barGap: 0,
barCategoryGap: 0,
data: [20, 30, 40, 50, 60]
}
]
}
```
3. 运行代码,即可看到带有边框的横向柱状图。
阅读全文