摘要：有一个在邮件中用饼图直观地显示用户的各项消费比例的需求。第一步得到一个小扇形。附上各邮箱对的支持情况免费领取验证码内容安全短信发送直播点播体验包及云服务器等套餐更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区
本文由作者邹欣华授权网易云社区发布。
有一个在邮件中用饼图直观地显示用户的各项消费比例的需求。邮箱中不能用js，纯css实现饼图，只能通过后端模版渲染数据，所以数据越少越简单越好。
想到css3的transform的rotate属性，rotate通过对指定的角度参数对元素指定一个角度的旋转。圆形的话用border-radius就可以实现，但是怎样通过旋转生成饼图。一个完整的圆不论怎样旋转都还只是一个圆，达不到要让每一个模块按比例显示出来的效果。但是可以用多个扇形组合成一个圆，然后通过旋转的角度差，显示各自的比例。旋转以后显示需要的部分，不需要的部分就要隐藏起来。又联想到了css2的clip属性。可以利用clip裁剪出想要的部分，rotate旋转出百分占比的区域，其余的部分通过透明遮罩隐藏起来，border-radius属性实现圆形效果。
第一步得到一个小扇形。
裁剪圆的右边一半（clip:rect(0px,100px,200px,0px)），并且将右边半圆旋转20度（transform:rotate(20deg)）。
第二步，接着生成多个扇形合成一个完整的圆。因为需求中不确定哪些内容需要展示，但是知道各自的数量以及总数，就可以计算出各自的占比，遮罩旋转的角度是前面所有扇形旋转角度的累加，扇形旋转的角度就是其百分比乘以360得出。
这里需要提前在css中把所有可能出现的种类及对应的颜色定义好。clip属性只能在设置了”position:absolute”或者”position:fixed”属性起作用
透明遮罩的公共样式
.hold {
position:absolute;
width:200px;
height:200px;
clip:rect(0px,200px,200px,100px);
}
扇形区域的公共样式
.pie {
position:absolute;
width:200px;
height:200px;
clip:rect(0px,100px,200px,0px);
border-radius:100px;
}
第三步，将所有的扇形渲染完成就是一个完整的饼图了。因为数据是动态的所以需要特殊处理一下占比大于50%的情况。如果第一个扇形占比大于50%，需要旋转180度之后，再写一个同样颜色的扇形区域接着之前的旋转剩余的角度。旋转角度通过后端模版计算出来，所以通过style来定义。
还有一种特殊情况是扇形旋转的总角度和大于180，但是该扇形区域还有一部分未显示，需要将该部分旋转180减去前面部分的总和再写一个同样颜色的扇形区域接着之前的旋转该部分剩余的角度。
最后的结果图。
第一次接触到邮件中的需求，后来发现邮箱客户端css3的transform特性不支持，最后只能将饼图转换成图片放在页面中。并且考虑要outlook等邮箱客户端内核的不同，最好用table布局，并且图片要在页面中用img标签引入，譬如margin这样的属性会失效等。
以上只是我的思路与做法，欢迎各路大神支招改进。 附上各邮箱对css的支持情况：https://www.campaignmonitor.com/css/
免费领取验证码、内容安全、短信发送、直播点播体验包及云服务器等套餐
更多网易技术、产品、运营经验分享请访问网易云社区。
文章来源： 网易云社区
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/25340.html
摘要：前言微信小程序在当前比较火热，秉着学习的目的和态度，仿都可手机点餐写了一个微信小程序，实现了大致功能。那么，我给大家介绍下这个微信小程序。 前言 微信小程序在当前比较火热，秉着学习的目的和态度，仿CoCo都可手机点餐写了一个微信小程序，实现了大致功能。那么，我给大家介绍下这个微信小程序。 使用到的工具： 1.Visual Studio Code 编译器 2.微信web开发者工具 3....
摘要：如何更好的学习一门技术，去把它的官方文档仔细看一遍最近这段时间一有空就会去刷一会官方文档，写点感受总结一下。官方文档上的评论尤其要注意，有不少评论很有价值。 如何更好的学习一门技术，去把它的官方文档仔细看一遍 最近这段时间一有空就会去刷一会 PHP 官方文档，写点感受总结一下。 起因 我开始学习编程应该算是在大二学 C语言 课程，到了大三自学 PHP，之后用这门语言做了七八个外包项目，...
摘要：对于的解释器，直接使用依赖包的名称，即可安装上。对应的包名，如果没有报错，说明是解释器自带的包，反之，不是解释器自带的包。如果不是解释器自带的包，则需要具体查找安装不上的具体原因，进一步解决。 在Python的学习的过程中，需要不断的写代码，查看别人的代码的运行效果。在这个过程中，我们需要不断安装程序的依赖包。 对于python2的解释器，直接使用pip install 依赖包的名称，...
阅读 3723·2021-11-24 10:23
阅读 2770·2021-09-06 15:02
阅读 1273·2021-08-23 09:43
阅读 2350·2019-08-30 15:44
阅读 3044·2019-08-30 13:18
阅读 778·2019-08-23 16:56
阅读 1742·2019-08-23 16:10
阅读 535·2019-08-23 15:08
