本文摘自PHP中文网,作者不言,侵删。
这篇文章主要介绍了html5 canvas简单封装一个echarts实现不了的饼图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧说明
我用echars很久了,如果出现如上图所示样式的饼图,我用echarts很难实现,官方给的文档没有这种模式的饼图。试过用d3和canvas分别画饼图,因为本人对canvas比较熟悉和d3还要引入插件,本着轻量化的原则,所以采用canvas封装。
官方饼图两种模式:(1)半径模式(2)面积模式
实现过程
(1)封装的函数如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
|
(2)调用方式:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
html5和css3 动态气泡按钮的实现
HTML5的Canvas实现绘制曲线的方法
以上就是使用html5 canvas封装一个echarts实现不了的饼图的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者