.net图表之ECharts随笔09-pie环形图表

这是最后的效果图

1. 这里title属性用到了富文本标签

    

    官方文档是用的label属性，看得我一开始格外的懵逼。后面我尝试着在text中写入格式，没想到竟然成功了。

    rich中定义样式，在text中通过{样式属性|显示文字}的格式就可以给标题设置不同的样式啦

    left和top等四个属性可以设置title的显示位置，可以使用center等字符串赋值

2. legend属性：用来标注说明图中各部分对应的颜色

    orient可以设置其子元素如何排列，vertical表示纵向排列

    x和y可以设置整体的位置，分别表示横纵坐标，可以使用center等字符串赋值

    data中可以设置显示的数据，其中icon可以设置图形显示形状，设置为circle表示圆形。

    坑爹的是，icon在all.js中似乎不生效，要用min.js，所以引用的js还是min好

3. series属性一直都是最重要的，而且每种图表又不太一样

    radius是一个列表，列表中两个值设置环形的内半径和外半径，如['30%', '40%']

    另外，有时需要显示多个环形，此时除了要在series中添加多个元素外，还需要给每个元素设置center属性，否则环形会重叠在一起。

    center也是一个列表，两个值分别代表环形整体的横纵坐标

    data.itemStyle.color可以给环形设置颜色，自然也可以设置渐变颜色。

        上一个随笔中使用new echarts.graphic.LinearGradient()来完成渐变，此处依然可以使用，但官方文档提供了一些属性专门为pie图表完成颜色渐变

           将color看做一个对象，

                                                1）当其type属性设置为linear时，表示线性渐变

                                                此时其实和new echarts.graphic.LinearGradient()基本一致，要给color对象设置四个属性x, y, x2, y2，与new echarts.graphic.LinearGradient()前四个参数类似。

                                                当x表示x轴负方向，即从右向左。x2相反；

                                                当y表示y轴正方向，即从下到上。y2相反；

                                                实际上，渐变是根据直线y=±x或平行坐标轴的两条直线平移来变化的

　　　　　　　　　　　　　 2）当其type属性设置为radius时，表示径向渐变，此时上面讲到的参数含义就截然不同了

                                                x和y表示圆的圆心，如果这个圆指的是环形图对应的圆那么就是0.5和0.5即可，因为一个环形图对应的圆就在坐标系0-1范围内

                                                没有了x2和y2，而是r，表示圆的半径。

                                                这种渐变顾名思义，是从圆心出发，沿着半径向整个圆扩散的。注意：此时所说的没有标注的圆不一定就是环形图，而是用来渐变颜色的圆

            不管type是哪个类型，都需要设置colorStops属性，它与new echarts.graphic.LinearGradient()第五个参数一样。

            至于globalCoord，暂时没看出有什么用。。。

    data.label可以设置文本信息的显示。官方文档的富文本标签就是用这个做例子，就不赘述了。

        如图看到的只显示了一个data元素的信息。只需要在这个元素中设置label.show为true，其他的设置为false即可。

    当然，为了方便，可以直接在与data同级的label中设置show为false，然后仅在要显示的那个data元素设置label.show为true即可