echart柱状图设置title居中和字体跟颜色
时间: 2023-11-21 12:04:00 浏览: 97
你可以通过title属性来设置柱状图的标题,其中包括标题的位置、字体、颜色等。具体来说,你可以添加如下代码来设置标题居中、字体为14px、颜色为黑色:
```
option = {
// ...
title: {
text: '柱状图标题',
left: 'center', // 标题居中
textStyle: {
color: '#000', // 标题字体颜色
fontSize: 14 // 标题字体大小
}
},
// ...
}
```
在以上示例中,我们通过title属性设置了柱状图的标题。其中,text属性用于设置标题文本,left属性用于设置标题位置居中,textStyle属性用于设置标题字体的颜色和大小。你可以根据需要调整textStyle中的其他属性,比如fontStyle、fontWeight等。
同时,你还可以通过legend属性来设置柱状图的图例,包括图例的位置、字体、颜色等。具体来说,你可以添加如下代码来设置图例在底部居中、字体为12px、颜色为黑色:
```
option = {
// ...
legend: {
orient: 'horizontal', // 图例水平排列
bottom: 0, // 图例在底部
itemWidth: 14, // 图例标记的宽度
itemHeight: 14, // 图例标记的高度
textStyle: {
fontSize: 12, // 图例字体大小
color: '#000' // 图例字体颜色
}
},
// ...
}
```
在以上示例中,我们通过legend属性设置了柱状图的图例。其中,orient属性用于设置图例水平排列,bottom属性用于设置图例在底部,itemWidth和itemHeight属性用于设置图例标记的宽度和高度,textStyle属性用于设置图例字体的颜色和大小。你可以根据需要调整textStyle中的其他属性,比如fontStyle、fontWeight等。
阅读全文