echarts中label显示的样式设置问题

在echarts中，tooltip和label都可以显示文字，并且可以加上相应的样式。

tootip可以传入字符串html进行显示，而label则不行

在目前的最新版本中（4.6.0），label显示需要添加样式则需要借助rich属性。

下面介绍两种使用方式，并且把归纳的结论奉上（目前没有去看源码，属于通过现象归纳用法的过程）。

第一种方式：通过直接给label属性下的formatter赋值字符串，如同下面的配置

这个时候{}中的b和c会被分别解析为名称和数据，这个地方echarts官方文档有介绍。

此时需要添加样式则需要解析 rich 中设置的样式，写法为 {fz|} 。

第二种方式：通过formatter的回调函数进行设置，如下图

通过回调函数返回的字符串中，样式的引入没有变化，和直接返回一样，但是数据不再和直接返回时一样可以直接使用，而是需要手动赋值。

总结：官网文档上已经写得比较清楚，这里做个记录，只为方便查询和使用。

2.解决方法：

3.说明：

1）主要是通过设置label标签的字体，内容通过rich来重置字体大小，解决换行重叠问题。

2）rich 中 a 的用法 {a|}

eg: "{a|" + e.name + e.data.value + "}"

1、主标题与副标题无法放置不同的位置

          根据官方文档设置title.align为left或者title.subtextStyle.align为left均无效

          方法一：加一个div使用绝对定位存放副标题

          方法二：使用伪元素绝对定位存放副标题

2、饼图的series列表下的label即在外部显示又在内部显示

        方法一：设置两个div存放两个数据一样的饼图，第一个div渲染饼图的series[0].label设置为"{formatter: '{d}%'}"，第二个div渲染饼图的series[0].label设置为"{formatter: '{c}个', position: 'inner', color: 'white'}"，注意第二个div覆盖显示在第一div的上面。

        方法二：div渲染饼图的series[0].label设置为"{formatter: '{d}%'}", series[1].label设置为"{formatter: '{c}个', position: 'inner', color: 'white'}"，同时series[0]的其它数据和series[1]的其它数据一致，series[0].label的内容可以和series[0]互换。

3、series存在多个，默认情况下legend的样式按series[0]为准

        series[0]没有设置样式，series[1].itemStyle.normal自定义样式，最终效果如上图

4、y轴文字左对齐

       柱体设置弧度可以通过设置series[0].itemStyle.normal.barBorderRadius为[0, 5, 5, 0]，数字代表弧度，数组顺序代表柱体顺时针左上，右上，右下，左下

        文字左对齐可以设置yAxis.axisLabel.textStyle.align为left，此时的y轴的文字将出现在柱体里

         yAxis.axisLabel.textStyle.margin可以用来设置yAxis和grid的间隔

        可以看到柱状图没有填满整个div，可以设置grid.left的值为负值来填满div

---