问题：
前端 - 数据可视化大屏，像这种动态旋转的环形图咋搞？
归和惬
图可能模糊，类似于这种效果，动态旋转
共有2个答案
许奇
环形图用图片, 旋转做背景图
文字居中
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
/* background-color: red; */
text-align: center;
line-height: 100px;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
.appLogo {
animation: App-logo-spin infinite 20s linear;
background-color: aqua;
position: absolute;
top: center;
left: center;
z-index: -1;
}
}
</style>
</head>
<body>
<div>
<div class="appLogo"></div>
文字
</div>
</body>
</html>
公羊伟志
大概的实现了下，样式可以调整，动画也可以设置
效果如下：
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆弧转动</title>
</head>
<style>
:root {
--color: orange;
--color1: blue;
--lineColor: rgba(102, 163, 224, .2);
}
.box,
.box::after,
.box::before {
border: 12px solid var(--lineColor);
border-left: 12px solid var(--color);
border-right: 12px solid var(--color);
border-top: 12px solid var(--color1);
border-bottom: 12px solid var(--color1);
border-radius: 50%;
}
.box {
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
animation: turn 2s linear infinite;
}
.text {
/* 文字逆向执行动画，相对保持不动 */
animation: turn 2s linear infinite reverse;
}
@keyframes turn {
0% {
transform: rotate(0);
}
100% {
transform: rotate(1turn);
}
}
</style>
<body>
<div class="box">
<div class="text">
文字
</div>
</div>
</body>
</html>
类似资料：
-
这种图表哪里有案例
-
这上面的地图模型是用three.js搞的吗 看着挺不错的 前端开发该如何实现？
-
问题内容： 我需要用于支持动态可视化的图形的Java库。我需要使对象在顶点之间移动，这必须显示出来。不需要3D，2D表示就足够了。 我目前正在使用 JUNG， 但是它非常有限，据我所知，它更多地用于静态图。 我已经看过这个问题，但是 JGraphT 似乎也没有这样做。 后期编辑： 在授予答案之前，我等待完成该项目。我最终保留了JUNG，同时还使用了UBIGraph（自2012年以来一直处于僵局）作
-
统计图表是最早的数据可视化形式之一，作为基本的可视化元素仍然被广泛的使用。对于很多复杂的大型可视化系统来说，这类图表更是作为基本的组成元素而不可或缺。同时，随着大数据可视化渲染技术的发展，涌现出很多优秀的开源图表库，例如ECharts、highcharts、LoongChart等，可制作更直观漂亮的图表。 表达内容 图表类型 描述 项目 柱状图/条形图（column/Bar） 表现多个类目数据的大
-
问题内容： 假设我有这样的活动： 视图模型为： 我想正确处理旋转，因此，如果用户在倒数计时为5时旋转设备，我希望旋转后的下一个值为5（如果第二个已经过去，则为4），只要在倒数应该实际出现的任何地方取。 如果火箭已经升空，我希望它在旋转后保持这种状态，我不希望倒计时再次开始。 此刻，暂停时取消订阅，恢复时进行新订阅，因此倒计时重新开始。 我猜想我应该在代码的RxJava部分中进行一些更改才能使其正常