echarts 主标题居中，副标题居右

可复制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'
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

方法二

使用富文本的方式，设置下副标题的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'
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41