echart终极环形图（三）---每天进步一点点

再总结一个终极环形图，同事发给我了文档，我当时没有认真看，导致做了无用功，思路就是错的，没做出来。样图是这样的

 样图   成果

最开始我采用的思路是几条数据全写在一起，但是这样是行不通的，这样只能修改一个radius的值。新思路中series中有几条数据就定义几个name值，如下图：

 

这样可以更加容易的控制数据条的大小和长短，在data中的value值和下方的value值是成比例的，两个value值相加的整体为1，比如说data中的value值为30，另一个value值为70，那么长度比就是3:7，数据条的长度就是圆环的7/10，长度是由另一个value值决定的。

 

另外还有一步非常重要。在外部定义圆环样式的时候会设置一个透明度，opacity=0，这样可以使数据条的 另一部分隐藏掉，只留下数据条，这一步至关重要

 

在data中通过itemStyle来引用这个样式

 

并且在真实数据条中通过itemStyle控制数据条颜色。

 

下方代码是环形图引导线的写法，注释已经写得很清楚了，不再进行详细解释。

另外在设置引导线的时候，最后发现我value值的设定是反的，结果导致引导线的指示方向也是反的，上面写得是正确的写法。Value值的比例对数据条长短的控制非常重要。这全都是我自己一点一点试出来的。

label: {              // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
  normal: {
    show: true,             // 是否显示标签[ default: false ]
    position: 'top',    // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside'