.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即可

 

猜你喜欢

转载自www.cnblogs.com/Rombo713/p/10100717.html