以下是以资深软件开发工程师的视角，对“ECharts 饼图”的专业回答。我将详细讲解如何使用 ECharts 创建饼图（Pie Chart），包括基础概念、配置方法和示例，结合 HTML5，包含目录、小标题、表格、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 17 日的最新信息，以 ECharts 5.x（最新稳定版）为基准。由于您之前的上下文涉及 Vue3，我也会提供一个 Vue3 集成的示例。
ECharts 饼图 (Pie Chart)
目录
1. 引言
ECharts 饼图（Pie Chart）是一种经典的图表类型，用于展示数据的比例分布，广泛应用于统计和可视化场景。本教程将介绍如何创建饼图，提供纯 HTML 和 Vue3 的实现示例，帮助您快速掌握其用法。
2. ECharts 饼图概述
- 定义：饼图通过扇形区域展示数据的占比，每个扇形的大小对应数据的比例。
- 特点：
- 直观性：清晰显示比例关系。
- 多样性：支持环形图、多层饼图等变体。
- 交互性：支持悬停提示和点击事件。
- 用途：市场份额、预算分配、调查结果等。
3. 准备工作
3.1 安装 ECharts
- CDN 方式：
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
- npm 方式：
npm install echarts
3.2 加载 ECharts
- 说明：饼图功能内置于 ECharts 核心，无需额外模块。
- npm：
import * as echarts from 'echarts';
4. 创建饼图
4.1 数据结构
- 格式：数组，包含对象
{ name, value }或[name, value]。 name：类别名称。value：数值（占比基于此计算）。- 示例：
const data = [
{ name: '苹果', value: 45 },
{ name: '香蕉', value: 25 },
{ name: '橙子', value: 30 }
];
4.2 基本配置
- 核心选项：
属性 作用 示例值series.type图表类型'pie'series.data数据源[{ name: 'A', value: 10 }, ...]series.radius饼图半径'50%'或['40%', '70%']示例：const option = { series: [{ type: 'pie', data: [ { name: '苹果', value: 45 }, { name: '香蕉', value: 25 }, { name: '橙子', value: 30 } ], radius: '50%' }] };4.3 样式调整- 颜色：设置
color或itemStyle.color。 - 环形图：使用
radius: ['内径', '外径']。 - 标签：配置
label显示名称或百分比。 - 示例（环形图）：
series: [{ type: 'pie', data: [...], radius: ['40%', '70%'], label: { show: true, formatter: '{b}: {d}%' // 名称: 百分比 }, itemStyle: { borderWidth: 1, borderColor: '#fff' } }]4.4 动态更新- 方法：使用
setOption更新series.data。 - 示例：
myChart.setOption({ series: [{ data: [ { name: '苹果', value: 50 }, { name: '香蕉', value: 20 }, { name: '橙子', value: 30 } ] }] });5. 完整示例 5.1 纯 HTML 示例<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>ECharts 饼图</title> <style> #chart { height: 400px; width: 100%; } </style> </head> <body> <div id="chart"></div> <button onclick="updateChart()">更新数据</button> <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> <script> const myChart = echarts.init(document.getElementById('chart')); const option = { tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, series: [{ type: 'pie', radius: ['40%', '70%'], data: [ { name: '苹果', value: 45 }, { name: '香蕉', value: 25 }, { name: '橙子', value: 30 } ], label: { show: true, formatter: '{b}: {d}%' }, itemStyle: { borderWidth: 1, borderColor: '#fff' } }] }; myChart.setOption(option); function updateChart() { myChart.setOption({ series: [{ data: [ { name: '苹果', value: 50 }, { name: '香蕉', value: 20 }, { name: '橙子', value: 30 } ] }] }); } </script> </body> </html>- 效果：显示环形饼图，悬停显示详情，点击按钮更新数据。
- 创建项目：
npm create vite@latest vue-pie -- --template vue cd vue-pie npm install echarts- 修改
src/App.vue：
<template> <div> <div id="chart" style="height: 400px; width: 100%;"></div> <button @click="updateChart">更新数据</button> </div> </template> <script setup> import { onMounted, ref } from 'vue'; import * as echarts from 'echarts'; const chart = ref(null); const chartData = ref([ { name: '苹果', value: 45 }, { name: '香蕉', value: 25 }, { name: '橙子', value: 30 } ]); onMounted(() => { chart.value = echarts.init(document.getElementById('chart')); const option = { tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }, series: [{ type: 'pie', radius: ['40%', '70%'], data: chartData.value, label: { show: true, formatter: '{b}: {d}%' }, itemStyle: { borderWidth: 1, borderColor: '#fff' } }] }; chart.value.setOption(option); }); const updateChart = () => { chartData.value = [ { name: '苹果', value: 50 }, { name: '香蕉', value: 20 }, { name: '橙子', value: 30 } ]; chart.value.setOption({ series: [{ data: chartData.value }] }); }; </script>- 运行：
npm run dev- 效果：访问
http://localhost:5173，显示环形饼图，点击按钮更新数据。
radius实现 通过innerSize实现 默认样式 更现代化 经典风格- 关键优势：ECharts 提供更灵活的样式和交互选项。
- 数据量：控制切片数（建议 6-8 个以内）。
- 标签：使用
label.formatter优化显示。 - 颜色：定义全局
color或逐项设置。 - 交互：启用
tooltip和emphasis增强体验。 - 文档：参考 ECharts 饼图文档。
- 结构：包含目录、带锚点的小标题、表格和代码示例，逻辑清晰。
- 实用性：从基础到实践，覆盖饼图全貌。
- 内部链接：通过
<a href="#ID">跳转，如 创建饼图。 - 出站链接：嵌入正文，指向权威资源。
- 颜色：设置
发表回复