图表中图例的文本以及图形上的文本标签的样式定义

  可以通过图表的详细属性设置对图表的图例文本和图形文本标签进行控制，如下图：

图例文本的样式定义

  图例中文本的样式可以通过图表详细属性legend中的textStyle进行设置，可以设置文字的颜色，大小，背景边框等等。具体的属性内容可以参考 《图例文本样式说明》。

  如果需要对图例文本内容进行多种样式的复杂处理，这时单纯textStyle属性就无法满足了，我们要通过legend中的formatter和textStyle.rich搭配进行实现。

1. formatter用来格式化图例文本，支持字符串模板和回调函数两种形式。

   示例：

    legend: {
        // 使用字符串模板，模板变量为图例名称 {name}
        formatter: 'Legend {name}',
        // 使用回调函数
        formatter: function (name) {
            return 'Legend ' + name;
        }
    }
   

2. 在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在图例文本中做出非常丰富的效果。

   示例：

     legend: {
        // 在文本中，可以对部分文本采用 rich 中定义样式。
        // 这里需要在文本中使用标记符号：
        // `{styleName|text content text content}` 标记样式名。
        // 注意，换行仍是使用 '\n'。
        formatter:  function(name){
            return ['{aaa|这段文本采用样式aaa}','这段用默认样式:'+name,'{xxx|这段用样式xxx}'].join('\n')
        },
        textStyle: {
            rich: {
               aaa: {
                  color: 'red',
                     lineHeight: 10
                  },
               bbb: {
                  backgroundColor: {
                     image: 'xxx/xxx.jpg'
                  },
                  height: 40
               },
               xxx: {
                  fontSize: 18,
                     fontFamily: 'Microsoft YaHei',
                     borderColor: '#449933',
                     borderRadius: 4
                 },
               ...
            }
         }
     }
   

   可以达成如下效果：

关于富文本的详细属性定义可参考：《富文本标签》

图形上文本标签的样式定义

  图形上文本标签的样式可以通过图表详细属性series中的label进行设置，不同图表类型的属性会有些许差异，这里已饼图（pie）为例。具体的属性内容可以参考 《饼图文本标签样式说明》。

  如果需要对标签文本内容进行多种样式的复杂处理，我们要通过label中的formatter和rich搭配进行实现。

1. formatter为标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。

   示例：

     series: [{
        type: "pie",
        label:{
            // 使用字符串模板
            formatter: '{b}: {d}',
            // 使用回调函数
            formatter: function (params) {
                return params.name+': '+ params.percent+'%';
            }
        }
     }]
   

   关于饼图标签formatter的详细内容可参考：《饼图标签内容格式器》

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

   示例：

     label: {
        // 在文本中，可以对部分文本采用 rich 中定义样式。
        // 这里需要在文本中使用标记符号：
        // `{styleName|text content text content}` 标记样式名。
        // 注意，换行仍是使用 '\n'。
        formatter: funtion(params){
            return ['{aaa|这段文本采用样式aaa}','这段用默认样式'+params.name+': '+ params.percent+'%','{xxx|这段用样式xxx}'].join('\n')
        }, 
        rich: {
            aaa: {
                color: 'red',
                lineHeight: 10
            },
            bbb: {
                backgroundColor: {
                    image: 'xxx/xxx.jpg'
                },
                height: 40
            },
            xxx: {
                fontSize: 18,
                fontFamily: 'Microsoft YaHei',
                borderColor: '#449933',
                borderRadius: 4
            },
            ...
        }
     }
   

   可以达成如下效果：

关于富文本的详细属性定义可参考：《富文本标签》