ECharts 旭日图（超详细）

什么是 ECharts 旭日图？

在数据可视化的世界里，图表不仅仅是数字的堆砌，更是信息的桥梁。当你面对一个复杂的层级结构数据，比如公司部门架构、文件系统目录、或者用户行为路径时，传统的柱状图或饼图可能会显得力不从心。这时候，ECharts 旭日图就像一把精准的钥匙，能帮你把复杂关系“拆解”得清清楚楚。

旭日图（Sunburst Chart）是一种环形层级可视化方式，它以中心为起点，向外逐层展开，每一层代表一个层级。就像太阳的光芒从中心向四周辐射，因此得名“旭日图”。它特别适合展示具有父子关系的树状结构数据，例如：组织架构、文件夹嵌套、产品分类等。

举个例子，假设你是一家电商公司的数据分析师，想要展示“商品类别 → 子类 → 品牌 → 销量”的分布情况。如果用普通饼图，一层一层叠加，会变得拥挤且难以区分。而使用 ECharts 旭日图，每个层级都清晰地以环形区域呈现，颜色深浅代表数值大小，一眼就能看出哪个品牌在哪个类别下表现最好。

旭日图的结构原理

理解旭日图的结构，是掌握它的第一步。它的核心思想是“同心圆 + 层级嵌套”。

中心圆圈代表根节点（比如“全部商品”），第一圈是第一层级（如“服装”“电子产品”），第二圈是第二层级（如“男装”“女装”“手机”“电脑”），以此类推。每一块区域的弧长代表该节点的占比，半径方向的宽度则表示层级深度。

想象一下，你站在一个巨大的圆形喷泉中心，周围的水柱从内到外依次喷出。最里面的水柱代表最顶层分类，越往外，水柱越细，但数量越来越多。这正是旭日图的视觉隐喻：中心是“源头”，外层是“分支”。

在 ECharts 中，旭日图的数据格式必须是树形结构（Tree Data），也就是每个节点包含 name（名称）和 value（数值），以及可选的 children 子节点数组。这种结构让 ECharts 能准确地“读取”层级关系，从而绘制出正确的环形布局。

如何在项目中引入 ECharts 旭日图

要使用 ECharts 旭日图，首先需要在你的项目中引入 ECharts 库。如果你使用的是现代前端框架（如 Vue 或 React），推荐通过 npm 安装：

npm install echarts

安装完成后，你就可以在 JavaScript 文件中引入并初始化图表了。

下面是一个完整的 HTML + JavaScript 示例，展示如何创建一个基础的 ECharts 旭日图：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>ECharts 旭日图示例</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    #chart-container {
      width: 800px;
      height: 600px;
      margin: 20px auto;
      border: 1px solid #ddd;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div id="chart-container"></div>

  <script>
    // 步骤1：获取图表容器DOM元素
    const chartDom = document.getElementById('chart-container');

    // 步骤2：初始化ECharts实例
    const myChart = echarts.init(chartDom);

    // 步骤3：定义旭日图的数据结构 —— 树形数据
    const option = {
      // 设置标题
      title: {
        text: '商品分类销售情况',
        left: 'center',
        top: 20,
        textStyle: {
          fontSize: 18,
          fontWeight: 'bold'
        }
      },

      // 配置旭日图
      series: [
        {
          type: 'sunburst', // 明确指定为旭日图类型
          data: [
            {
              name: '全部商品',
              value: 1000,
              children: [
                {
                  name: '服装',
                  value: 400,
                  children: [
                    { name: '男装', value: 200 },
                    { name: '女装', value: 180 },
                    { name: '童装', value: 20 }
                  ]
                },
                {
                  name: '电子产品',
                  value: 350,
                  children: [
                    { name: '手机', value: 200 },
                    { name: '电脑', value: 100 },
                    { name: '配件', value: 50 }
                  ]
                },
                {
                  name: '家居用品',
                  value: 250,
                  children: [
                    { name: '厨房', value: 120 },
                    { name: '卧室', value: 90 },
                    { name: '客厅', value: 40 }
                  ]
                }
              ]
            }
          ],
          // 设置颜色主题
          itemStyle: {
            borderWidth: 1,
            borderColor: '#fff'
          },
          // 设置标签显示样式
          label: {
            show: true,
            fontSize: 12,
            rotate: 'radial', // 标签沿径向旋转，更美观
            formatter: '{b}', // 显示节点名称
            position: 'outside' // 标签放在环形外部
          },
          // 设置高亮时的视觉效果
          emphasis: {
            focus: 'ancestor', // 鼠标悬停时，高亮父节点
            label: {
              show: true,
              fontSize: 14,
              fontWeight: 'bold'
            }
          }
        }
      ]
    };

    // 步骤4：将配置项应用到图表
    myChart.setOption(option);
  </script>
</body>
</html>

这段代码中，series 中的 type: 'sunburst' 是关键，它告诉 ECharts 你要绘制的是旭日图。data 字段必须是树形结构，children 嵌套表示层级关系。

高级配置：让旭日图更专业

一个好看的图表，不只是数据的展示，更是设计与交互的结合。ECharts 提供了丰富的配置项，让你可以自由定制旭日图的视觉效果。

颜色与主题

你可以通过 color 属性指定颜色列表，让每个层级使用不同色调。比如：

color: ['#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#4bc0c0']

也可以使用 visualMap 实现颜色渐变映射，让数值越大，颜色越深，视觉冲击力更强。

标签优化

标签是用户理解图表的关键。label 配置项支持多种格式：

formatter: '{b}'：只显示节点名称
formatter: '{c}'：显示数值
formatter: '{b}: {c}'：显示“名称: 数值”
formatter: '{d}%'：显示百分比

例如，你想在最外层显示百分比：

label: {
  show: true,
  formatter: '{d}%',
  position: 'outside',
  fontSize: 10
}

交互增强

ECharts 旭日图支持点击和悬停事件。你可以通过 on 方法监听用户行为：

myChart.on('click', function(params) {
  console.log('点击了节点：', params.name);
  console.log('其值为：', params.value);
});

当用户点击某个区域时，控制台会输出该节点的名称和数值，方便后续做联动分析或跳转。

实际应用场景与最佳实践

ECharts 旭日图在真实项目中应用广泛。以下是几个典型场景：

场景	说明
企业组织架构	从 CEO 到部门再到员工，展示层级与人数分布
文件系统分析	展示项目目录中各文件夹的大小占比
用户行为路径	分析用户从首页 → 商品页 → 购物车 → 下单的路径转化率
产品分类销售	展示不同类别下各品牌的销售额占比

在使用时，建议遵循以下原则：

层级不宜过深：一般不超过 4 层，否则外圈会过于拥挤。
颜色区分明显：同一层级颜色不宜过于相似，避免混淆。
避免过小的区域：小于 1% 的节点建议合并为“其他”类别。
添加图例或说明：帮助用户理解颜色含义。

总结

ECharts 旭日图是一种强大而优雅的数据可视化工具，它把复杂的层级关系用环形结构清晰呈现。无论是分析公司架构、用户路径，还是展示产品分类，它都能让你的数据“看得见、读得懂”。

掌握它，不仅意味着你会用一个图表，更意味着你具备了将复杂数据转化为直观信息的能力。从今天开始，尝试在你的项目中加入 ECharts 旭日图，让数据真正“说话”。

别忘了，一个好的图表，不只是展示数据，更是讲一个故事。而旭日图，就是那个最耀眼的讲述者。