前言
由于公司业务需要做一些图标来展示一些数据,之前都是用百度的echart.js。这次放弃使用它转而自己开发是有几个原因
1、echart文件太大,有些功能用不到
2、echart样式不易扩展
3、需求简单
考虑上面几个原因就决定自己开发一个图标库,主要介绍折线图和雷达图
技术研究
绘制图表可以用canvas、svg、webgl等,echart是用canvas绘制,所以我就直接考虑用canvas。
折线图:通过lineto将点连起来
雷达图:由外向内,通过arc、fill等方法绘制
主要问题
1、折线图转成曲线
通过网上查找资料,按照腾讯这篇文章来实现http://www.alloyteam.com/2015/08/zhe-xian-zhuan-qu-xian/
2、图片文字模糊
问题分析和解决这里已经总结https://github.com/baixuexiyang/wchart/wiki/canvas%E7%BB%98%E5%88%B6%E5%9B%BE%E7%89%87%E6%96%87%E5%AD%97%E6%A8%A1%E7%B3%8A