欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-02 17:29:21
这是最后的效果图 1. 这里title属性用到了富文本标签 官方文档是用的label属性,看得我一开始格外的懵逼。后面我尝试着在text中写入格式,没想到竟然成功了。 rich中定义样式,在text中通过{样式属性|显示文字}的格式就可以给标题设置不同的样式啦 left和top等四个属性可以设置ti ......

.net图表之ECharts随笔09-pie环形图表这是最后的效果图

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

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

    官方文档是用的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即可