CSS饼图/环形图

最新推荐文章于 2024-03-05 14:41:29 发布
最新推荐文章于 2024-03-05 14:41:29 发布
阅读量643 收藏 1
点赞数 1
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38779317/article/details/132398045
版权 
.pie {
   width: 300px;
   aspect-ratio: 1; // 设置宽高比
   border-radius: 100%;
   background: conic-gradient(red 0 30%, orange 30% 60%, yellow 60% 85%, blue 85% 100%); // 圆锥形渐变
   display: flex;
   align-items: center;
   justify-content: center;
}
.pie > .inner {
  width: 70%;
  aspect-ratio: 1;
  border-radius: 100%;
  background-color: #fff;
}
.box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(red 0deg 90deg, pink 90deg 180deg, yellow 180deg);
}

<body>
	<!-- 环形 -->
  <div class="pie">
    <div class="inner"></div>
  </div>
  <!--饼图-->
  <div class="box"></div>
</body>
夕心o
关注
圆环图占比代码html,纯CSS实现饼图、环形图（百分比）
weixin_32512451的博客
06-09 1377
本篇文章详细介绍了如何使用纯CSS实现饼状图以及环形图，并且附带有源代码一、饼状图CSS.pie {width: 100px;height: 100px;border-radius: 50%;background: yellowgreen;background-image: linear-gradient(to right, transparent 50%, #655 0);}.pie::befo...
前端 环形统计_纯CSS实现饼图、环形图（百分比）
weixin_30748871的博客
02-11 1766
一、饼图.pie {width: 100px;height: 100px;border-radius: 50%;background: yellowgreen;background-image: linear-gradient(to right, transparent 50%, #655 0);}.pie::before {content: '';display: block;margin-le...
用CSS画饼图
09-08
用CSS绘制饼图，针对移动端上的展示，建议在谷歌浏览器上打开效果更佳,上传了两个html文件，pie.html是css静态画饼图，pieAuto.html是用我自己写的插件可以根据传入的参数动态绘制饼图
使用CSS制作动态的环形图/饼图
最新发布
Moon Star
03-05 1509
使用纯 css 实现一个环形图。
CSS实现饼图效果
08-09
使用纯CSS实现的饼状图，可按照自己的需求进行修改，代码较简单
纯css画饼状图
weixin_45264424的博客
08-02 2173
一、饼图 <div class="pie"></div> .pie { width:100px; height:100px; border-radius:50%; background: yellowgreen; background-image: linear-gradient(toright,transparent 50%,#655 0); } .pie::before { content:''; display:b
使用css3画饼图
weixin_34404393的博客
11-24 156
CSS3 Gradient介绍参考地址： http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html http://www.zhangxinxu.com/wordpress/?p=3639 效果图： html: <div class="col...
highcharts 3D环形饼图
gfei1234的博客
10-31 376
在这里插入图片描述](https://img-blog.csdnimg.cn/ae5a9c5bbd894105a1246b56ee9f。1.下载安装highcharts。3.在main.js引入。4.html部分代码。
CSS代码实现三角形和饼图
09-22
在CSS中，三角形和饼图的实现是利用了边框和透明度的特性。首先，我们来看如何用CSS创建三角形。 三角形的创建基于CSS的边框样式，特别是利用了非对称边框来制造形状。在给定的例子中，`.triangle` 类有四个不同的...
Echart Gallery中3/4环形图数据超出75%溢出的问题
qq_42313028的博客
11-19 939
Echart Gallery中3/4环形图数据超出75%溢出的问题 前言 在做数据可视化的时候,我觉得echart是首选的第三方插件,但是echart中提供的各种图标用就了会觉得风格和样式有点陈旧,最近找到了一个由各种社区贡献者提供的一个更加丰富,绚丽的网站Echart Gallery;里面有各种你想要的图表,而且看上去也更美观. 问题 最近在做h5报告的时候使用到了里面的3/4环形图,看上去是这样的 看上去没毛病,但是当你的某一条数据占的比重超过75%,进度条将会溢出3/4的区域.如下图 这样就会覆盖文字
css简单实现环形动画效果，无需js
11-11
简单css实现环形动画效果，无需js；本资源适用于移动端、pc端，兼容性各大浏览器
html，css实现各式各样的炫酷图表，折线图，柱形图（2D、3D）饼图.....
01-29
该文件涵盖了各式各样的图文报表，里面的各种图表通过下拉框选择切换，非常强大，用于各行业，cms、数学统计、数据处理...界面简洁清晰，代码通俗易用。。。
HTML5CSS3 3D环形图片墙 伴随旋转动画
11-03
HTML5 CSS3 3D环形图片墙 伴随旋转动画 HTML5CSS3 3D环形图片墙 伴随旋转动画
css画饼图
程序媛的博客
12-14 625
使用css画饼图
【css】实现饼图
richest_qi的博客
09-12 1781
<body> <div class="box"></div> <div class="box2"></div> <div class="box3"></div> </body> div{ margin: 5px; } .box{ width: 100px; height: 100px; background-color: lightgolde
纯css饼图,使用css3画饼图
weixin_29008691的博客
08-04 1186
CSS3 Gradient介绍参考地址：效果图：html:css:.colorWheel {position: relative;width: 16em;height: 16em;background: linear-gradient(36deg, #7c1 42%, transparent 42%),linear-gradient(72deg, #999 75.48%, transparent ...
一个div+CSS实现环形图
Jerry的博客
06-10 1762
效果图 仅适合统计两个数据源，多个数据源或者复杂效果请使用ECharts 实现原理 利用CSS锥形渐变conic-gradient，以下是该属性兼容性 代码（Vue） <template> <!-- data-xxx可实现CSS attr(data-xxx)获取值 --> <div class="circular" :style="style" :data-percent="percent" ></div> </t
[css] 用css实现饼图效果
歌谣的博客
02-09 397
[css] 用css实现饼图效果 方法一、使用伪元素 + transform + css渐变实现 .pie { width: 100px; height: 100px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%,
【CSS】饼图（双色）
weixin_39415598的博客
01-25 346
微信订阅号：Rabbit_svip 微信订阅号：Rabbit_svip 微信订阅号：Rabbit_svip 这是本节用纯CSS做出来的效果。当然，最后还会用JS模拟接收后台数据来控制饼图的比例。 本节的核心思想是通过CSS做出上面两种效果。 要做到上图的效果，首先要有以下基础知识： 【CSS】渐变背景（backgroun...
java excel 饼图_Java 在 Excel 中创建饼图/环形图
05-18
Java 可以使用 Apache POI 库来操作 Excel 文件，其中也包括创建饼图和环形图。 以下是一个简单的示例代码，可以创建一个包含饼图的 Excel 文件： ``` import java.io.FileOutputStream; import org.apache.poi.ss.usermodel.*; import org.apache.poi.xssf.usermodel.*; public class PieChartExample { public static void main(String[] args) throws Exception { // 创建 Excel 文件 XSSFWorkbook workbook = new XSSFWorkbook(); XSSFSheet sheet = workbook.createSheet("Pie Chart"); // 创建数据行 Row row; Cell cell; row = sheet.createRow(0); cell = row.createCell(0); cell.setCellValue("Category"); cell = row.createCell(1); cell.setCellValue("Value"); row = sheet.createRow(1); cell = row.createCell(0); cell.setCellValue("Apples"); cell = row.createCell(1); cell.setCellValue(20); row = sheet.createRow(2); cell = row.createCell(0); cell.setCellValue("Oranges"); cell = row.createCell(1); cell.setCellValue(30); row = sheet.createRow(3); cell = row.createCell(0); cell.setCellValue("Pears"); cell = row.createCell(1); cell.setCellValue(10); row = sheet.createRow(4); cell = row.createCell(0); cell.setCellValue("Bananas"); cell = row.createCell(1); cell.setCellValue(40); // 创建饼图 XSSFDrawing drawing = sheet.createDrawingPatriarch(); XSSFClientAnchor anchor = drawing.createAnchor(0, 0, 0, 0, 5, 1, 15, 15); XSSFChart chart = drawing.createChart(anchor); chart.setTitleText("Fruit Sales"); chart.setTitleOverlay(false); XDDFChartLegend legend = chart.getOrAddLegend(); legend.setPosition(org.apache.poi.xddf.usermodel.chart.LegendPosition.TOP_RIGHT); XDDFDataSource<String> categories = XDDFDataSourcesFactory.fromStringCellRange(sheet, new CellRangeAddress(1, 4, 0, 0)); XDDFNumericalDataSource<Double> values = XDDFDataSourcesFactory.fromNumericCellRange(sheet, new CellRangeAddress(1, 4, 1, 1)); XDDFChartData data = chart.createData(ChartTypes.PIE, null, null); data.setVaryColors(true); data.addSeries(categories, values); chart.plot(data); // 保存文件 FileOutputStream fileOut = new FileOutputStream("PieChartExample.xlsx"); workbook.write(fileOut); fileOut.close(); workbook.close(); } } ``` 这个示例代码创建了一个 Excel 文件，包含一个名为 "Pie Chart" 的工作表，该工作表包含一个简单的数据表格和一个饼图。你可以根据需要修改数据和图表的设置来满足你的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值