ECharts 饼图是一种非常直观的数据展示方式，可以用来表示各个部分占整体的比例。下面将为您详细介绍如何使用 ECharts 创建一个基本的饼图。
基础示例
首先，我们需要在 HTML 文件中引入 ECharts 的 JS 文件。以下是一个简单的例子：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('container'));
var option = {
title: {
text: '饼图示例',
subtext: '数据来源：本站',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
图形配置
在 ECharts 中，饼图的配置相对简单。以下是一些关键配置项：
title: 饼图的标题。tooltip: 鼠标悬停时显示的提示框。legend: 饼图的图例。series: 饼图的数据系列。
交互效果
ECharts 提供了丰富的交互效果，例如：
- 鼠标悬停时高亮显示当前项。
- 鼠标点击切换饼图项的显示和隐藏。
- 支持响应式布局，适应不同屏幕尺寸。
扩展阅读
如果您想了解更多关于 ECharts 的内容，可以访问我们的 ECharts 官方文档。
图片示例
下面是一个饼图的示例图片：
希望这个教程能帮助您更好地理解和使用 ECharts 饼图。