以下是以资深软件开发工程师的视角，对“ECharts 旭日图”的专业回答。我将详细讲解如何使用 ECharts 创建旭日图（Sunburst Chart），包括基础概念、配置方法和示例，结合 HTML5，包含目录、小标题、表格、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 17 日的最新信息，以 ECharts 5.x（最新稳定版）为基准。由于您之前的上下文涉及 Vue3，我也会提供一个 Vue3 集成的示例。
ECharts 旭日图 (Sunburst Chart)
目录
1. 引言
ECharts 旭日图（Sunburst 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（值）和children（子节点）。 - 示例：
const data = {
name: '总计',
value: 100,
children: [
{
name: '分类A',
value: 40,
children: [
{ name: 'A1', value: 20 },
{ name: 'A2', value: 20 }
]
},
{
name: '分类B',
value: 60,
children: [
{ name: 'B1', value: 30 },
{ name: 'B2', value: 30 }
]
}
]
};
4.2 基本配置
- 核心选项：
属性 作用 示例值series.type图表类型'sunburst'series.data数据源[ { name: 'A', value: 10 } ]series.radius内外半径['20%', '90%']示例：const option = { series: { type: 'sunburst', data: data, radius: ['20%', '90%'], label: { rotate: 'radial' } } };4.3 样式调整- 颜色：设置
itemStyle.color或全局调色盘。 - 高亮：配置
highlightPolicy。 - 示例：
series: { type: 'sunburst', data: data, radius: ['20%', '90%'], itemStyle: { borderWidth: 1, borderColor: '#fff' }, emphasis: { focus: 'ancestor' // 高亮祖先节点 } }4.4 动态更新- 方法：使用
setOption更新series.data。 - 示例：
myChart.setOption({ series: [{ data: newData }] });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')); let data = { name: '总计', value: 100, children: [ { name: '分类A', value: 40, children: [{ name: 'A1', value: 20 }, { name: 'A2', value: 20 }] }, { name: '分类B', value: 60, children: [{ name: 'B1', value: 30 }, { name: 'B2', value: 30 }] } ] }; const option = { series: { type: 'sunburst', data: [data], radius: ['20%', '90%'], label: { rotate: 'radial' }, itemStyle: { borderWidth: 1, borderColor: '#fff' }, emphasis: { focus: 'ancestor' } }, tooltip: {} }; myChart.setOption(option); function updateChart() { const newData = { name: '总计', value: 120, children: [ { name: '分类A', value: 50, children: [{ name: 'A1', value: 25 }, { name: 'A2', value: 25 }] }, { name: '分类B', value: 70, children: [{ name: 'B1', value: 35 }, { name: 'B2', value: 35 }] } ] }; myChart.setOption({ series: [{ data: [newData] }] }); } </script> </body> </html>- 效果：显示多层旭日图，点击按钮更新数据。
- 创建项目：
npm create vite@latest vue-sunburst -- --template vue cd vue-sunburst 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: 100, children: [ { name: '分类A', value: 40, children: [{ name: 'A1', value: 20 }, { name: 'A2', value: 20 }] }, { name: '分类B', value: 60, children: [{ name: 'B1', value: 30 }, { name: 'B2', value: 30 }] } ] }); onMounted(() => { chart.value = echarts.init(document.getElementById('chart')); const option = { series: { type: 'sunburst', data: [chartData.value], radius: ['20%', '90%'], label: { rotate: 'radial' }, itemStyle: { borderWidth: 1, borderColor: '#fff' }, emphasis: { focus: 'ancestor' } }, tooltip: {} }; chart.value.setOption(option); }); const updateChart = () => { chartData.value = { name: '总计', value: 120, children: [ { name: '分类A', value: 50, children: [{ name: 'A1', value: 25 }, { name: 'A2', value: 25 }] }, { name: '分类B', value: 70, children: [{ name: 'B1', value: 35 }, { name: 'B2', value: 35 }] } ] }; chart.value.setOption({ series: [{ data: [chartData.value] }] }); }; </script>- 运行：
npm run dev- 效果：访问
http://localhost:5173，显示旭日图，点击按钮更新数据。
- 关键优势：旭日图适合展示多级数据。
- 数据层级：控制层级深度，避免过于复杂。
- 标签调整：使用
label.rotate优化显示。 - 交互性：启用
emphasis.focus增强用户体验。 - 颜色：为不同层级设置对比色。
- 文档：参考 ECharts 旭日图文档。
- 结构：包含目录、带锚点的小标题、表格和代码示例，逻辑清晰。
- 实用性：从基础到实践，覆盖旭日图全貌。
- 内部链接：通过
<a href="#ID">跳转，如 创建旭日图。 - 出站链接：嵌入正文，指向权威资源。
- 颜色：设置
发表回复