用CSS3做各种样式的饼图

legendmohe 发布于2019-08-19 18:26 / 2814人阅读

摘要：通过的旋转属性来实现饼图的效果。封装了一个饼图类，通过实例化来生成各种样式的饼图。以前一直用做饼图的效果，但有时候，一些比较简单的饼图用的话有点杀鸡用牛刀的感觉。并封装了一下，支持多种样式，写了一个。

通过css3的旋转属性来实现饼图的效果。封装了一个饼图类，通过实例化来生成各种样式的饼图。

以前一直用highcharts做饼图的效果，但有时候，一些比较简单的饼图用highcharts的话有点杀鸡用牛刀的感觉。所以自己研究了一下如何用css3来达到这个效果。并封装了一下，支持多种样式，写了一个 pie.js 。

原理是这样的，父容器是一个div，背景颜色是左边一半灰色，右边一半绿色。

里面有2个可以旋转的div，小于50%的时候，第一个div是灰色的，顺时针旋转一下就好了，即用灰色遮绿色。

如果超过50%了，则需要用到第二个绿色的div，也是顺时针旋转一下，用绿色遮盖灰色的底。

有兴趣的同学可以fork一下下面的地址看一下源码。

github传送门：http://lancer07.github.io/css3_pie/

效果如图所示

使用也很方便，html是这样的，用data-value属性来存要显示的百分比。

然后实例化一个饼图类,可配可不配一些参数。

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/79614.html

用CSS3做各种样式的饼图

摘要：通过的旋转属性来实现饼图的效果。封装了一个饼图类，通过实例化来生成各种样式的饼图。以前一直用做饼图的效果，但有时候，一些比较简单的饼图用的话有点杀鸡用牛刀的感觉。并封装了一下，支持多种样式，写了一个。通过css3的旋转属性来实现饼图的效果。封装了一个饼图类，通过实例化来生成各种样式的饼图。以前一直用highcharts做饼图的效果，但有时候，一些比较简单的饼图用highcharts...

Y3G 2019-08-30 13:05 评论0 收藏0
css小点心

摘要：有一个在邮件中用饼图直观地显示用户的各项消费比例的需求。第一步得到一个小扇形。附上各邮箱对的支持情况免费领取验证码内容安全短信发送直播点播体验包及云服务器等套餐更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区本文由作者邹欣华授权网易云社区发布。有一个在邮件中用饼图直观地显示用户的各项消费比例的需求。邮箱中不能用js，纯css实现饼图，只能通过后端模版渲染数据，所以数...

anyway 2019-06-28 11:06 评论0 收藏0
React简单封装ECharts饼图

摘要：默认使用得到的是已经加载了所有图表和组件的包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。官方式这么说的，所以我们要到去查看可以引入的模块列表，并按需引入。使用ECharts 获取ECharts Echarts官网教程中就有告诉通过各种方式获取Echarts：http://echarts.baidu.com/tutorial.html 最简单的方式就...

lingdududu 2019-08-20 18:09 评论0 收藏0
React简单封装ECharts饼图

摘要：默认使用得到的是已经加载了所有图表和组件的包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。官方式这么说的，所以我们要到去查看可以引入的模块列表，并按需引入。使用ECharts 获取ECharts Echarts官网教程中就有告诉通过各种方式获取Echarts：http://echarts.baidu.com/tutorial.html 最简单的方式就...

ztyzz 2019-08-01 17:13 评论0 收藏0
[CSS]《CSS揭秘》第三章——形状

摘要：自适应椭圆斜杠前为水平半径，后为垂直半径。和下特有的，用于在渲染中向元素逻辑上的头部或尾部添加内容。所以不要用或展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。和必须配合属性来使用，用来定义插入的内容，必须有值，至少是空。自适应椭圆 border-radius:50% / 50%;//斜杠前为水平半径，后为垂直半径。 background: #fb3; b...

ysl_unh 2019-08-30 15:53 评论0 收藏0