摘要:通过的旋转属性来实现饼图的效果。封装了一个饼图类,通过实例化来生成各种样式的饼图。以前一直用做饼图的效果,但有时候,一些比较简单的饼图用的话有点杀鸡用牛刀的感觉。并封装了一下,支持多种样式,写了一个。
通过css3的旋转属性来实现饼图的效果。封装了一个饼图类,通过实例化来生成各种样式的饼图。
以前一直用highcharts做饼图的效果,但有时候,一些比较简单的饼图用highcharts的话有点杀鸡用牛刀的感觉。所以自己研究了一下如何用css3来达到这个效果。并封装了一下,支持多种样式,写了一个 pie.js 。
原理是这样的,父容器是一个div,背景颜色是左边一半灰色,右边一半绿色。
里面有2个可以旋转的div,小于50%的时候,第一个div是灰色的,顺时针旋转一下就好了,即用灰色遮绿色。
如果超过50%了,则需要用到第二个绿色的div,也是顺时针旋转一下,用绿色遮盖灰色的底。
有兴趣的同学可以fork一下下面的地址看一下源码。
github传送门:http://lancer07.github.io/css3_pie/
效果 如图所示
然后实例化一个饼图类,可配可不配一些参数。
var myPie = new Pie({ el : ‘#colorful-pie’, // 选择器 animite : true, // 是否要有动画效果 ring : 0.7, // 中间是否要空心,并设置空心的半径 color : "#ff9933" // 自定义饼图的颜色, number :false, // 是否要显示中间的百分比 rotate : -40 // 设置起点角度,默认是从12点钟方向开始的 }); myPie.init(); // 实例化
这样就生成了一个饼状图了。
PS:
应该还有更好的方法来实现,希望大家能告诉我。多谢!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115293.html
摘要:通过的旋转属性来实现饼图的效果。封装了一个饼图类,通过实例化来生成各种样式的饼图。以前一直用做饼图的效果,但有时候,一些比较简单的饼图用的话有点杀鸡用牛刀的感觉。并封装了一下,支持多种样式,写了一个。 通过css3的旋转属性来实现饼图的效果。封装了一个饼图类,通过实例化来生成各种样式的饼图。 以前一直用highcharts做饼图的效果,但有时候,一些比较简单的饼图用highcharts...
摘要:默认使用得到的是已经加载了所有图表和组件的包,因此体积会比较大,如果在项目中对体积要求比较苛刻,也可以只按需引入需要的模块。官方式这么说的,所以我们要到去查看可以引入的模块列表,并按需引入。 使用ECharts 获取ECharts Echarts官网教程中就有告诉通过各种方式获取Echarts:http://echarts.baidu.com/tutorial.html 最简单的方式就...
摘要:默认使用得到的是已经加载了所有图表和组件的包,因此体积会比较大,如果在项目中对体积要求比较苛刻,也可以只按需引入需要的模块。官方式这么说的,所以我们要到去查看可以引入的模块列表,并按需引入。 使用ECharts 获取ECharts Echarts官网教程中就有告诉通过各种方式获取Echarts:http://echarts.baidu.com/tutorial.html 最简单的方式就...
摘要:自适应椭圆斜杠前为水平半径,后为垂直半径。和下特有的,用于在渲染中向元素逻辑上的头部或尾部添加内容。所以不要用或展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标。和必须配合属性来使用,用来定义插入的内容,必须有值,至少是空。 自适应椭圆 border-radius:50% / 50%;//斜杠前为水平半径,后为垂直半径。 background: #fb3; b...
阅读 2627·2021-10-12 10:12
阅读 2217·2021-09-02 15:41
阅读 2490·2019-08-30 15:55
阅读 1331·2019-08-30 13:05
阅读 2365·2019-08-29 11:21
阅读 3459·2019-08-28 17:53
阅读 2999·2019-08-26 13:39
阅读 737·2019-08-26 11:50