(4)、React中使用ECharts——饼图

（1） legend: 图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

    --- orient (string)：图例列表的布局朝向。可选：'horizontal'、'vertical'(默认：'horizontal' )；

    --- data[i] (object)：图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name （如果是 饼图 ，也可以是饼图单个数据的 name ）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 '' （空字符串）或者 '\n' （换行字符串）用于图例的换行。

    如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。如 饼图 and 漏斗图 等会取自 series.data 中的 name。

    如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 nam

示例：

更多饼图实例信息请参考ECharts： https://www.echartsjs.com/examples/#chart-type-pie

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

---