绘制饼状图

饼图

直观反映给用户各股票板块在市场中所占比例,帮助用户了解市场。

组件

title

定义饼图标题,位置,距离容器顶部的高度,以及颜色
在这里插入图片描述

tooltip

本次trigger采用item属性区别于K线图,并采用字符串模板反应提示框内容
在这里插入图片描述

visualmap

视觉映射组件,就是将数据映射到视觉元素,将不同的数据板块采用不同的颜色区分,如果不增加该组件各个数据板块之间只有线条隔离,使用户分析图表更加困难,因此采用这个
组件帮助用户在视觉上区分不同的数据板块。
在这里插入图片描述其中show:false只保留了不同区域“变色”的功能,而把具体的颜色条隐藏起来。

series

将type设置为pie即饼图,按照百分比形式控制图形在容器中及图形的半径大小。
为使不同的数据板块显示起来更有层次感,采用sort(function(){可内置函数})将数据进行排序,这样也使得后端传送数据时更加随意,不需刻意保持顺序。(暂时用假设数据代替)其中每一对数据就是一个对象。
在这里插入图片描述

南丁格尔图

使得不同数值大小更加鲜明的表现在视觉上。
在这里插入图片描述

文本标签

指明不同的板块所对应的股市。
在这里插入图片描述

itemstyle

在这里插入图片描述其中设置了饼图中的阴影,使得整个图片更具有层次感

popup动画

在加载图形时为避免太过单调的顺序同等大小的像摊开纸面一样的效果,
加入popup和随机的延时,使得整个画面感觉很Q弹。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值