您的位置:首页 > 其它

绘制饼状图

2020-07-14 06:30 260 查看

目录

饼图

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

组件

title

定义饼图标题,位置,距离容器顶部的高度,以及颜色

tooltip

本次trigger采用item属性区别于K线图,并采用字符串模板反应提示框内容

visualmap

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

series

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

南丁格尔图

使得不同数值大小更加鲜明的表现在视觉上。

文本标签

指明不同的板块所对应的股市。

itemstyle

其中设置了饼图中的阴影,使得整个图片更具有层次感

popup动画

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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: