zoukankan      html  css  js  c++  java
  • .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即可

     

  • 相关阅读:
    几种常用的排序算法
    Charles 抓包工具安装和采坑记录
    当你骂特朗普的时候你究竟在骂什么
    苹果公司的另一面:沃兹尼亚克
    网络爬虫设计中需要注意的几个问题
    微信小程序 canvas 绘图问题总结
    自己动手做智能家居之:智能空调控制
    Allegro导入PADS文件
    C#
    C#
  • 原文地址:https://www.cnblogs.com/Rombo713/p/10100717.html
Copyright © 2011-2022 走看看