深入理解ECharts饼图：动态数据显示与视觉效果的完美组合
深入理解ECharts饼图：动态数据显示与视觉效果的完美组合
在数据可视化领域，饼图是展示比例数据最直观的图表类型之一，它通过不同大小的扇形部分展示各组成部分的比例关系。这种类型的图表特别适用于显示各部分占总体的百分比，如人口分布、市场份额分析等。本文旨在通过介绍ECharts饼图的实时数据展示和高级视觉效果配置，提供一份详细的实现指南。
基础概念
饼图通过将一个圆形分割成多个扇形，每个扇形的角度大小代表其数据值的比例。ECharts作为一个功能强大的前端图表框架，提供了丰富的配置项来自定义饼图，包括但不限于颜色、文本、提示信息和动画效果。
1. itemStyle
itemStyle 用于设置图表中扇形项目的样式。这包括颜色、边框、阴影等图形样式属性。通过这些配置，可以显著提升图表的美观性和数据的可读性。
主要属性介绍：
color: 控制扇形的填充色。可以是固定颜色（如'#c23531'），也可以是渐变色。borderColor 和 borderWidth: 设置扇形的边框颜色和宽度。边框颜色通常用于突出显示或区分相邻扇形。shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY: 这些属性用来配置元素的阴影效果，增加立体感和层次感。
示例代码：
itemStyle: {
color: '#c23531',
borderColor: '#fff',
borderWidth: 2,
shadowBlur: 8,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowOffsetX: 0,
shadowOffsetY: 3,
}
这个配置会创建一个有白色边框和黑色阴影的红色扇形。
2. color
color 属性定义了一个颜色数组，ECharts将使用这个数组为饼图中的每个数据项指定颜色。如果数据项数量超过颜色数组的长度，颜色将循环使用。这是一个控制整个系列颜色统一性和视觉连贯性的简便方法。
示例代码：
color: [
'rgba(255, 0, 0, 1)', // 鲜艳的红色
'rgba(0, 255, 0, 1)', // 鲜艳的绿色
'rgba(0, 0, 255, 1)', // 鲜艳的蓝色
'rgba(255, 255, 0, 1)', // 鲜艳的黄色
'rgba(255, 165, 0, 1)', // 鲜艳的橙色
'rgba(128, 0, 128, 1)', // 鲜艳的紫色
'rgba(0, 255, 255, 1)', // 鲜艳的青色
'rgba(255, 192, 203, 1)' // 鲜艳的粉色
]
这个配置直接影响图表的整体色彩外观，是快速调整图表主题风格的有效方式。
实用技巧
对于希望在饼图中实现更复杂的颜色渐变或特殊效果的开发者，可以使用回调函数动态生成color或在itemStyle中配置复杂的渐变色。例如，可以使用线性渐变（echarts.graphic.LinearGradient）来为扇形创建从一个颜色过渡到另一个颜色的效果：
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'red' },
{ offset: 0.5, color: 'orange' },
{ offset: 1, color: 'yellow' }
]
)
}
这个配置使用线性渐变的方式从红色过渡到黄色，为饼图添加了一个独特的视觉效果。
在ECharts中创建饼图除了使用itemStyle和color之外，还有许多其他配置项可以帮助定制和增强饼图的功能和外观。下面将详细介绍一些其他重要的配置项，它们包括tooltip、legend、series和label等。
3. tooltip (工具提示)
tooltip 是 ECharts 中用来显示数据详细信息的浮动框。在饼图中，鼠标悬停在任何扇形上时，都可以显示该部分的更多信息，如名称、数值和百分比等。
配置属性：
trigger(触发类型)：可以设置为'item'，意味着tooltip会在鼠标悬停在扇形上时触发。formatter(格式化提示内容)：可以是一个字符串也可以是一个函数，用来自定义显示的内容。
示例代码：
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} ({d}%)'
}
其中{a}表示系列名，{b}表示数据项名称，{c}表示数值，{d}表示百分比。
4. legend (图例组件)
legend 显示了图表的数据类别，可以通过点击图例控制哪些数据系列可见。
配置属性：
orient（布局方向)：可以设置为'vertical'或'horizontal'。left、top、right、bottom（位置设置)：用来控制图例的位置。formatter（格式化图例文本)：可以自定义图例的显示内容。
示例代码：
legend: {
orient: 'vertical',
left: 'left',
formatter: function (name) {
return 'Legend ' + name;
}
}
5. series (系列列表)
在饼图中，series 配置是定义饼图数据和其他相关配置的核心。
配置属性：
type(类型)：设置为'pie'。radius(半径)：可以是数字或者百分比，也可以是两个元素的数组表示环形图的内半径和外半径。center(中心位置)：控制饼图的中心位置，默认是图表中心。data(数据数组)：数据项通常包括name和value。
示例代码：
series: [{
name: 'Access Source',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: 'Direct' },
{ value: 310, name: 'Email' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
6. label (标签)
label 用于设置饼图中扇形区域中的文本标签。
配置属性：
show(是否显示)：控制标签的显示与否。position(位置)：可以设置为'inside'、'outside'或'center'。formatter(格式化标签)：自定义标签内容。
示例代码：
label: {
normal: {
show: true,
position: 'inside',
formatter: '{b}: {d}%'
}
}
{b} 是扇区的数据名称，{d} 是扇区的百分比。
通过这些配置项，你可以充分利用 ECharts 的强大功能来创建各种风格和效果的饼图，从而在向用户展示数据时提供清晰、直观且具有吸引力的视觉体验。这些丰富的配置选项使得 ECharts 成为实现数据可视化的理想工具。
实现实时动态饼图
数据准备与初始化
假设我们有一组关于不同车间电量使用情况的数据，目标是创建一个实时更新的饼图。
let peopleList = [
{ name: '办公区', value: 1200 },
{ name: '生活区', value: 1200 },
{ name: '烘烤车间', value: 2340 },
...
];
为了实现饼图的动态更新，我们首先计算总电量，并为每个部分计算占总量的百分比：
let total = peopleList.reduce((pre, next) => pre + next.value, 0);
peopleList.forEach((item) => {
item.percent = total === 0 ? 0 : ((item.value / total) * 100).toFixed(2);
});
ECharts配置解析
接下来，基于ECharts进行图表配置，涵盖色彩、提示工具、图例及饼图系列等设置：
option = {
color: color, // 为每个部分定义鲜艳的颜色
tooltip: {
trigger: 'item',
},
legend: {
show: true,
...
formatter: function (name) { // 自定义图例文本
let item = peopleList.find(item => item.name === name);
return `${name} ${item.value} KWH (${item.percent}%)`;
}
},
series: [
{
type: 'pie',
radius: ['45%', '65%'], // 内外半径设置，实现环形饼图
...
data: peopleList,
label: {
show: false,
},
}
],
};
扇形颜色的逐渐梯度与高级视觉效果
为了让饼图更具吸引力，我们可以为扇形配置渐变色，并通过 itemStyle 自定义扇形的边框和阴影，增强视觉效果。
itemStyle: {
borderColor: '#000',
borderWidth: 1,
borderType: 'solid',
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
高级应用：动态交互与视觉优化
动态数据更新
对于需要根据实时数据不断更新的应用场景，如能量监控系统，我们可以设定定时器或订阅数据更新事件来刷新图表数据。
setInterval(() => {
fetchData().then(newData => {
myChart.setOption({
series: [{
data: newData
}]
});
});
}, 1000);
饼图的动态交互
针对用户交互，ECharts提供事件监听功能，如点击扇形时展示详细数据或执行其他操作。
myChart.on('click', function (params) {
console.log(params.name + ': ' + params.value);
});
视觉增强
通过ECharts的丰富配置项，可以实现视觉上的个性化设计，比如使用 rich 文字样式对饼图中的文字进行美化。
label: {
rich: {
name: {
fontSize: 16,
lineHeight: 22,
color: 'rgba(255, 255, 255, 0.7)'
},
value: {
fontSize: 18,
lineHeight: 22,
color: 'rgba(255, 255, 255, 1)',
fontWeight: 'bold'
}
}
}
实现效果
效果图
源码
let peopleList = [
{ name: '办公区', value: 1200, percent: 0 },
{ name: '生活区', value: 1200, percent: 0 },
{ name: '烘烤车间', value: 2340, percent: 0 },
{ name: '前处理车间', value: 1600, percent: 0 },
{ name: '喷漆车间', value: 2640, percent: 0 },
{ name: '品管车间', value: 1040, percent: 0 },
{ name: '质检车间', value: 1240, percent: 0 },
{ name: '分拣车间', value: 1240, percent: 0 },
];
// 计算总值
let total = peopleList.reduce((pre, next) => {
return pre + next.value;
}, 0);
// 计算各项的百分比
peopleList.forEach((item) => {
item.percent = total === 0 ? 0 : ((item.value / total) * 100).toFixed(2);
});
let numberWidth = String(total).length * 8 + 8; // 计算数字宽度
// 更鲜艳的颜色
let color = [
'rgba(255, 0, 0, 1)', // 鲜艳的红色
'rgba(0, 255, 0, 1)', // 鲜艳的绿色
'rgba(0, 0, 255, 1)', // 鲜艳的蓝色
'rgba(255, 255, 0, 1)', // 鲜艳的黄色
'rgba(255, 165, 0, 1)', // 鲜艳的橙色
'rgba(128, 0, 128, 1)', // 鲜艳的紫色
'rgba(0, 255, 255, 1)', // 鲜艳的青色
'rgba(255, 192, 203, 1)', // 鲜艳的粉色
];
option = {
color: color,
backgroundColor: '',
tooltip: {
trigger: 'item',
},
legend: {
show: true,
orient: 'vertical',
top: 'center',
right: '5%',
icon: 'rect',
itemGap: 20,
itemWidth: 20,
itemHeight: 10,
color: '#fff',
formatter: function (name) {
let items = peopleList.find((item) => item.name === name);
return `{name|${name}} {number| ${items?.value || ''}} {unit|KWH} {percent|${items?.percent + '%' || ''
}}`;
},
itemStyle: {
borderWidth: 1,
},
textStyle: {
rich: {
number: {
width: numberWidth,
color: '#DDF6FD',
align: 'left',
fontSize: 16,
fontWeight: 'bold',
padding: [0, 0, 0, 0]
},
name: {
color: 'rgba(255,255,255,0.8)',
fontSize: 14,
fontWeight: 400,
fontFamily: 'Source Han Sans CN',
padding: [0, 0, 0, 4]
},
unit: {
color: 'rgba(255,255,255,0.8)',
fontSize: 12,
fontWeight: 400,
fontFamily: 'Source Han Sans CN',
padding: [0, 0, 0, 0]
},
percent: {
color: '#DDF6FD',
align: 'left',
fontSize: 16,
fontWeight: 'bold',
padding: [0, 0, 0, 0]
},
},
},
},
title: [
{
text: '{title|总电量}',
left: '25%',
top: '53%',
textAlign: 'center',
textStyle: {
rich: {
title: {
color: '#fff',
fontSize: 24,
fontWeight: '400',
},
}
},
},
{
text: '{num|' + total + '},{unit|KWH}',
left: '15%',
top: '45%',
textStyle: {
rich: {
num: {
fontSize: 20,
color: '#49F1F2',
fontFamily: 'DIN Alternate',
fontWeight: 'bold',
},
unit: {
color: '#fff',
fontSize: 20,
fontWeight: '400',
padding: [0, 0, -0, 0]
}
}
},
},
],
series: [
{
type: 'pie',
radius: ['45%', '65%'],
center: ['25%', '50%'],
padAngle: 5,
label: {
show: false,
},
itemStyle: {
borderWidth: 5,
borderColor: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(7, 36, 66, 0.5)' },
{ offset: 1, color: 'rgba(11, 57, 102, 1)' }
]
},
color: function (params) {
const colorList = [
{ type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: 'rgba(255, 87, 51, 0)' }, { offset: 1, color: 'rgba(255, 87, 51, 1)' }] },
{ type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: 'rgba(17, 135, 145, 0)' }, { offset: 1, color: 'rgba(17, 135, 145, 1)' }] },
{ type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: 'rgba(24, 132, 236, 0)' }, { offset: 1, color: 'rgba(24, 132, 236, 1)' }] }
];
return colorList[params.dataIndex % colorList.length];
}
},
emphasis: {
scale: false
},
data: peopleList,
},
{
name: "黄线",
type: "pie",
startAngle: 85,
radius: ['35%', '38%'],
center: ['25%', '50%'],
hoverAnimation: false,
startAngle: 90,
padAngle: 5,
itemStyle: {
borderCap: 'round',
normal: {
color: function (data) {
return data.data === 10 ? "#000000" : "#1884EC";
},
},
},
zlevel: 4,
labelLine: {
show: false,
},
data: [10, 50, 10, 50, 10, 50, 10, 50],
},
],
}