echarts图表通过title实现自定义图标和样式

工作中遇到在页面绘制图表，需要根据UI设计图实现不同的图表标题加上各自小图标进行共同展示。

实现重点是利用富文本标签rich，将图标与标题一起展示。

如下代码的标题文本以及图片是封装后传的变量，在此做下记录，具体需求需要具体分析。

    title: {
      show:true,
      text: ` {titleIcon|} ${titleText}`,//主副标题文本，都支持使用 \n 换行。
      subtext: "Sub Title",
      left: "center",
      top: "center",
      textStyle: {
        color:'#999',
        fontSize: 30,
        lineHeight: 14,//rich 中如果没有设置 lineHeight，则会取父层级(此处)的 lineHeight
        fontStyle:'normal',
        fontWeight: 700,
        // 在许多地方（如图、轴的标签等）都可以使用富文本标签。
        rich: {
          titleIcon:{
            backgroundColor:{
              image: titleIcon
    //'./data/asset/img/weather/sunny_128.png' 
    //文本片段的 backgroundColor 可以指定为图片后，就可以在文本中使用图标了
            },
            height: 15,// 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。
            width:16,
          }
      }
    },
    subtextStyle: {   // 副标题样式设置
      fontSize: 20
    }
  }

富文本标签详情参见教程：
Documentation - Apache ECharts

     formatter: [
          '{a|这段文本采用样式a}',
          '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
      ].join('\n'),
          a: {
              color: 'red',
              lineHeight: 10
          },
          b: {
              backgroundColor: {
                  image: 'xxx/xxx.jpg'
              },
              height: 40
          },
          x: {
              fontSize: 18,
              fontFamily: 'Microsoft YaHei',
              borderColor: '#449933',
              borderRadius: 4
          },