echarts-主标题居中,副标题居右
数组形式设置title
·
可复制option,在echarts官网直接运行查看,https://echarts.apache.org/examples/zh/editor.html?c=bar-data-color
方法一(推荐)
title可以是数组形式,每个对象都可以单独设置样式,副标题往下挪挪即可
option = {
title: [
{
left: 'center',
text: '主标题'
},
{
right: '10',
text: '副标题',
textStyle: {
lineHeight: '45',
color: 'pink'
}
}
],
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [
120,
{
value: 200,
itemStyle: {
color: '#a90000'
}
},
150,
80,
70,
110,
130
],
type: 'bar'
}
]
}
方法二
使用富文本的方式,设置下副标题的padding
option = {
title: {
text: '主标题',
subtext: ['{a|副标题}'].join('\n'),
left: 'center',
subtextStyle: {
rich: {
a: {
// 上右下左
padding: [0, 0, 0, 50]
}
}
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [
120,
{
value: 200,
itemStyle: {
color: '#a90000'
}
},
150,
80,
70,
110,
130
],
type: 'bar'
}
]
}
更多推荐
已为社区贡献19条内容
所有评论(0)