.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即可
上一篇: python文件遍历
下一篇: java数据写入Excel