echarts 富文本标签

下定决心，好好过一天 ~

原先 Apache EChartsTM 中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息。

echarts v3.7 以后，支持了富文本标签，能够：

1.定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。
2.对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。
3.在文本中使用图片做小图标或者背景。
4.特定组合以上的规则，可以做出简单表格、分割线等效果。

echarts 提供了丰富的文本标签配置项，包括：
字体基本样式设置：fontStyle、fontWeight、fontSize、fontFamily。
文字颜色：color。
文字描边：textBorderColor、textBorderWidth。
文字阴影：textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY。
文本块或文本片段大小：lineHeight、width、height、padding。
文本块或文本片段的对齐：align、verticalAlign。
文本块或文本片段的边框、背景（颜色或图片）：backgroundColor、borderColor、borderWidth、borderRadius。
文本块或文本片段的阴影：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。
文本块的位置和旋转：position、distance、rotate。

可以在各处的 rich 属性中定义文本片段样式

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

    // 这里是文本块的样式设置：
    color: '#333',
    fontSize: 5,
    fontFamily: 'Arial',
    borderWidth: 3,
    backgroundColor: '#984455',
    padding: [3, 10, 10, 5],
    lineHeight: 20,

    // rich 里是文本片段的样式设置：
    rich: {
        a: {
            color: 'red',
            lineHeight: 10
        },
        b: {
            backgroundColor: {
                image: 'xxx/xxx.jpg'
            },
            height: 40
        },
        x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
        },
        ...
    }
}

文本、文本框、文本片段的基本样式和装饰

每个文本可以设置基本的字体样式：fontStyle、fontWeight、fontSize、fontFamily。
可以设置文字的颜色 color 和边框的颜色 textBorderColor、textBorderWidth。
文本框可以设置边框和背景的样式：borderColor、borderWidth、backgroundColor、padding。
文本片段也可以设置边框和背景的样式：borderColor、borderWidth、backgroundColor、padding。

rich: {
    Sunny: {
        // 这样设定 backgroundColor 就可以是图片了。
        backgroundColor: {
            image: './data/asset/img/weather/sunny_128.png'
        },
        // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。
        height: 30
    }
}

分割线

rich: {
    hr: {
        borderColor: '#777',
        // 这里把 width 设置为 '100%'，表示分割线的长度充满文本块。
        // 注意，这里是文本块内容盒（content box）的 100%，而不包含 padding。
        // 虽然这和 CSS 相关的定义有所不同，但是在这类场景中更加方便。
        width: '100%',
        borderWidth: 0.5,
        height: 0
    }
}

示例：

formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ', //富文本显示
rich: {
                    a: { //标题名的样式
                        color: '#6E7079',
                        lineHeight: 22, //标签的表格的上高度
                        align: 'center' //文字水平对齐方式
                    },
                    hr: { //分割线
                        borderColor: '#8C8D8E',
                        width: '100%',
                        borderWidth: 1,
                        height: 0
                    },
                    b: { //数据名的样式
                        color: '#4C5058',
                        fontSize: 14,
                        fontWeight: 'bold',
                        lineHeight: 33 //表格高度，行高
                    },
                    per: { //自定义百分比的样式
                        color: '#fff',
                        backgroundColor: '#4C5058',
                        padding: [3, 4], //文字块内边距，[3,4,3,4]
                        borderRadius: 4
                    }
                }