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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐