ECharts 饼图：绘制基础饼图及其变种
ECharts 是一个功能强大的数据可视化库，能够轻松创建多种图表类型，其中饼图是最常用的图表之一。饼图通常用于展示各部分在整体中的占比，非常适合数据分类的可视化。在本文中，我们将深入探讨如何绘制基础饼图，并了解环形图和南丁格尔玫瑰图等变种的配置方法。
一、饼图的基础知识
饼图用于表示各部分相对于整体的比例关系。在 ECharts 中，饼图具有多种变种，例如环形图和南丁格尔玫瑰图，这些变种使得饼图能够展示更丰富的信息。
二、安装 ECharts
在开始之前，请确保在项目中引入 ECharts。可以通过 CDN 进行引入：
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
三、绘制基础饼图
1. 定义 HTML 结构
首先，定义一个用于展示饼图的 <div> 容器：
<div id="pieChart" style="width: 600px; height: 400px;"></div>
2. 配置饼图的 option
以下是一个基础饼图的配置示例：
var pieChart = echarts.init(document.getElementById('pieChart'));
var pieOption = {
title: {
text: '市场份额',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['苹果', '三星', '华为', '小米', '其他']
},
series: [
{
name: '手机品牌',
type: 'pie',
radius: '50%',
center: ['50%', '60%'],
data: [
{ value: 335, name: '苹果' },
{ value: 310, name: '三星' },
{ value: 234, name: '华为' },
{ value: 135, name: '小米' },
{ value: 1548, name: '其他' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
}
]
};
pieChart.setOption(pieOption);
3. 完整的 HTML 代码示例
以下是完整的 HTML 文件代码，包含基本饼图的创建和渲染：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 饼图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<h1>使用 ECharts 绘制饼图</h1>
<div id="pieChart" style="width: 600px; height: 400px;"></div>
<script>
var pieChart = echarts.init(document.getElementById('pieChart'));
var pieOption = {
title: {
text: '市场份额',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['苹果', '三星', '华为', '小米', '其他']
},
series: [
{
name: '手机品牌',
type: 'pie',
radius: '50%',
center: ['50%', '60%'],
data: [
{ value: 335, name: '苹果' },
{ value: 310, name: '三星' },
{ value: 234, name: '华为' },
{ value: 135, name: '小米' },
{ value: 1548, name: '其他' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
}
]
};
pieChart.setOption(pieOption);
</script>
</body>
</html>
四、环形图
环形图是饼图的一种变种，它将中心部分挖空，便于更清晰地展示数据。
1. 配置环形图的 option
在原饼图的基础上，将 radius 设置为一个数组，定义内外半径：
var ringChart = echarts.init(document.getElementById('ringChart'));
var ringOption = {
title: {
text: '市场份额（环形图）',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['苹果', '三星', '华为', '小米', '其他']
},
series: [
{
name: '手机品牌',
type: 'pie',
radius: ['40%', '70%'], // 定义内外半径
center: ['50%', '60%'],
data: [
{ value: 335, name: '苹果' },
{ value: 310, name: '三星' },
{ value: 234, name: '华为' },
{ value: 135, name: '小米' },
{ value: 1548, name: '其他' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
}
]
};
ringChart.setOption(ringOption);
2. 完整的环形图 HTML 示例
<div id="ringChart" style="width: 600px; height: 400px;"></div>
<script>
var ringChart = echarts.init(document.getElementById('ringChart'));
var ringOption = {
title: {
text: '市场份额（环形图）',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['苹果', '三星', '华为', '小米', '其他']
},
series: [
{
name: '手机品牌',
type: 'pie',
radius: ['40%', '70%'], // 定义内外半径
center: ['50%', '60%'],
data: [
{ value: 335, name: '苹果' },
{ value: 310, name: '三星' },
{ value: 234, name: '华为' },
{ value: 135, name: '小米' },
{ value: 1548, name: '其他' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
}
]
};
ringChart.setOption(ringOption);
</script>
五、南丁格尔玫瑰图
南丁格尔玫瑰图是一种特殊的饼图，通过半径的变化表示数据的大小，适合展示分类数据的占比。
1. 配置南丁格尔玫瑰图的 option
为了绘制南丁格尔玫瑰图，可以在 roseType 属性中设置为 'radius'：
var roseChart = echarts.init(document.getElementById('roseChart'));
var roseOption = {
title: {
text: '南丁格尔玫瑰图',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['苹果', '三星', '华为', '小米', '其他']
},
series: [
{
name: '手机品牌',
type: 'pie',
radius: '65%',
center: ['50%', '60%'],
roseType: 'radius', // 设置为南丁格尔玫瑰图
data: [
{ value: 335, name: '苹果' },
{ value: 310, name: '三星' },
{ value: 234, name: '华为' },
{ value: 135, name: '小米' },
{ value: 1548, name: '其他' }
],
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
}
]
};
roseChart.setOption(roseOption);
2. 完整的南丁格尔玫瑰图 HTML 示例
<div id="roseChart" style="width: 600px; height: 400px;"></div>
<script>
var roseChart = echarts.init(document.getElementById('roseChart'));
var roseOption = {
title: {
text: '南丁格尔玫瑰图',
left: 'center',
textStyle: {
color: '#333',
fontSize: 20
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['苹果', '三星', '华为', '小米', '其他']
},
series: [
{
name: '手机品牌',
type: 'pie',
radius: '65%',
center: ['50%', '60%'],
roseType: 'radius', // 设置为南丁格尔玫瑰图
data: [
{ value: 335, name: '苹果' },
{ value: 310, name: '三星' },
{ value: 234, name: '华为' },
{ value: 135, name: '小米' },
{ value: 1548, name: '其他' }
],
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
}
]
};
roseChart.setOption(roseOption);
</script>
六、总结
通过本文，我们详细探讨了如何使用 ECharts 绘制基础饼图、环形图和南丁格尔玫瑰图。每种图表都有其独特的用途和配置方法，适合不同的数据展示需求。ECharts 的灵活性和易用性使得我们可以根据需求创建出美观且功能强大的可视化图表。希望这篇博客对您学习 ECharts 有所帮助！