原文地址：canvas图表(3) - 饼图
这几天把canvas图表都优化了下，动画效果更加出色了，可以说很逼近echart了。刚刚写完的饼图，非常好的实现了既定的功能，交互的动画效果也是很棒的。
效果请看：饼图https://edwardzhong.github.io/sites/demo/dist/chartpie.html
功能点包括：
- 组织数据
- 绘制
3. 数据动画的实现；
4. 鼠标事件的处理。
使用方式
饼图的数据方面要简单很多，因为不用多个分组的数据。把所有的数据相加得出总数，然后每个数据分别求出百分比，有了百分比再相乘360度的弧度得出每个数据在圆盘中对应的要显示的角度。
var con=document.getElementById('container'); var pie=new Pie(con); pie.init({ W:1600, H:1000, title:'网站用户访问来源', toolTip:'访问来源', data:[ {value:435, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] });代码结构
因为为了同时实现新增动画和更新动画，这次的代码结构经过了重构和优化，跟之前的有比较大的区别。
class Line extends Chart{ constructor(container){ super(container); } // 初始化 init(opt){ } // 绑定事件 bindEvent(){ } // 显示信息 showInfo(pos,arr){ } // 清除内容再绘制 clearGrid(index){ } // 执行数据动画 animate(){ } // 执行 create(){ } // 组织数据 initData(){
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。