在数据可视化领域，环形图是一种常见且有效的图表类型，特别适合展示比例关系。今天我将分享如何使用ECharts创建一个带有精美无缝圆形动效的环形图，这个效果可以为你的数据展示增添现代感和视觉吸引力。
效果概述
JavaScript实现
初始化图表
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
let width = myChart.getWidth();
let height = myChart.getHeight();
在数初始化图表后，我们需要获取图表的宽高，以便在后面动态计算中心元素的位置、半径等。
环形图配置
option = {
series: [
{
name: 'Access From',
type: 'pie',
radius: ["70%", "95%"],
avoidLabelOverlap: false,
padAngle: 5,
itemStyle: {
borderRadius: 10
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
],
中心圆形动画
这是本文的重点 - 创建无缝旋转的圆形动画：
graphic: [
{
type: "circle",
left: "center",
top: "center",
shape: {
cx: width * 0.5,
cy: height * 0.5,
r: Math.min(width * 0.35, height * 0.35) * 0.95,
},
style: {
fill: "#083649",
stroke: "transparent",
lineWidth: 0,
},
},
{
type: "circle",
left: "center",
top: "center",
shape: {
cx: width * 0.5,
cy: height * 0.5,
r: Math.min(width * 0.35, height * 0.35) * 0.96,
},
originX:width * 0.5,
originY:height * 0.5,
rotation:0,
style: {
fill: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(50,197,255,0)",
},
{
offset: 0.62,
color: "rgba(43,188,255,0.1)",
},
{
offset: 1,
color: "rgba(60,240,207,0.33)",
},
],
},
stroke: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgba(0,229,255,0)",
},
{
offset: 0.5,
color: "rgba(0,229,255,1)",
},
{
offset: 1,
color: "rgba(0,229,255,0)",
},
],
},
lineWidth: 2,
},
keyframeAnimation:{
duration:4000,
loop:true,
keyframes:[{
percent:0,
rotation:0
},{
percent:50,
rotation:180
},{
percent:100,
rotation:360
}]
}
},
由于环形图内环为70%，要使内部圆形与环形图无缝需要将circle的半径设置为图表宽高的最小值乘以0.35。动画效果通过keyframeAnimation实现，注意需设置旋转中心originX和orginY为绘制circle的圆心。
总结
通过ECharts的graphic功能和关键帧动画，我们可以轻松创建各种复杂的视觉效果。本文展示的旋转光环不仅美观，而且实现起来并不复杂。你可以根据需要调整颜色、旋转速度和尺寸，以适应不同的设计需求。
这种动效特别适合需要突出显示中心数据的场景，如KPI展示、数据仪表盘等。希望这篇文章能帮助你提升数据可视化的视觉效果！
