在echart中展示上标下标文字 （ m²、CO₂、H₂O）

问： m2 2要上标 ， tCO2 2要下标；这个在vue echart图表中怎么写出来?

今天被问到了 关于上标下标在echart图表中如何实现的问题 正好整理下。

在html中使用上标下标我们都知道，但是放到echart中很多人就犯迷糊了

    Html上标：<sup>上浮内容</sup>
    Html下标：<sub>下浮内容</sub>

方案1 最便捷的方式

下标 ₂ 上标² 有局限性并不支持全部字符。
但是基础的使用起来最方便 比如平方米 可以使用 m² 或 ㎡

方案2 技术流实现

设置 yAxis.nameTextStyle. rich
在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。

label: {
    // 在文本中，可以对部分文本采用 rich 中定义样式。
    // 这里需要在文本中使用标记符号：
    // `{styleName|text content text content}` 标记样式名。
    // 注意，换行仍是使用 '\n'。
    formatter: [
        '{a|这段文本采用样式a}',
        '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
    ].join('\n'),

    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

echart配置

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '10%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      name:"区域",
      type: 'category',
      data: ['XX', 'XA', 'XB', 'XC', 'XD', 'XE', 'XF'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      name:"单位：万t CO{sub|2}",
      nameTextStyle:{
        rich:{
            sub: {
            verticalAlign: "bottom",
            fontSize: 8
            }
        }
      },
      type: 'value'
    }
  ],
  series: [
    {
      name: '碳排放量',
      type: 'bar',
      barWidth: '60%',
      data: [10, 52, 200, 334, 390, 330, 220]
    }
  ]
};

【echart官方文档】配置-yAxis.nameTextStyle. rich 内容