异常教程

ECharts 旭日图（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在数据可视化领域，如何清晰地展现层次化数据结构始终是一个重要课题。ECharts 旭日图（Sunburst Chart）作为 ECharts 库中的高级图表类型，凭借其独特的环形嵌套设计，能够直观地呈现多级分类数据之间的隶属关系。无论是展示组织架构、产品分类体系，还是分析用户行为路径，旭日图都能以“由外到内层层递进”的视觉逻辑，帮助用户快速理解复杂数据的层级关系。本文将从零开始，系统解析 ECharts 旭日图的实现原理、配置方法及实战技巧，带领读者从基础概念到进阶应用全面掌握这一工具。

一、理解旭日图的核心概念

1.1 旭日图的结构与特点

旭日图通过同心圆环的嵌套形式，将数据划分为多个层级。最外层的扇形区域代表最高层级分类，向内逐层细分，最终形成类似“俄罗斯套娃”或“年轮”的结构。每个扇形的面积通常与对应数据的数值成正比，而颜色和标签则用于区分不同类别。

与饼图的对比：

  • 饼图：仅展示单一层级的分类比例，适合简单数据分布分析。
  • 旭日图：通过多层嵌套，既能显示各层级的占比，又能体现子类与父类的隶属关系，适合复杂数据结构的可视化。

1.2 适用场景举例

  • 组织架构：展示公司部门、团队、岗位的层级关系。
  • 产品分类：呈现电子产品从大类（如手机）到子类（如型号、存储容量）的细分结构。
  • 用户行为路径：分析用户从访问首页到完成购买的多步骤流程。

二、ECharts 旭日图的配置基础

2.1 初始化图表与数据准备

在使用 ECharts 旭日图前，需确保已引入 ECharts 库，并通过 DOM 元素创建图表容器。数据需以嵌套对象或数组的形式组织，每个层级通过 children 属性关联子节点。

示例数据结构（层级嵌套）：

const data = [
  {
    name: "科技类",
    value: 300,
    children: [
      {
        name: "手机",
        value: 150,
        children: [
          { name: "iPhone", value: 80 },
          { name: "华为", value: 70 }
        ]
      },
      {
        name: "电脑",
        value: 100,
        children: [
          { name: "MacBook", value: 60 },
          { name: "联想", value: 40 }
        ]
      }
    ]
  }
];

2.2 基础配置步骤

步骤 1：创建图表实例

// 通过DOM元素初始化图表  
const chart = echarts.init(document.getElementById('sunburst-container'));

步骤 2：定义配置项

const option = {
  series: [{
    type: 'sunburst',          // 指定图表类型为旭日图
    data: data,                // 绑定数据
    radius: ['20%', '80%'],    // 设置内外环半径比例
    label: {
      rotate: true             // 标签自动旋转对齐
    }
  }]
};

步骤 3：渲染图表

chart.setOption(option);

三、深度解析关键配置参数

3.1 数据层级的扁平化处理

ECharts 旭日图默认接受嵌套数据，但也可通过 dimensions 和 encode 属性将扁平化数据转化为层级结构。例如：

// 扁平化数据示例  
const flatData = [
  { category: ['科技类', '手机', 'iPhone'], value: 80 },
  { category: ['科技类', '手机', '华为'], value: 70 },
  // ...其他数据
];

const option = {
  series: [{
    data: flatData,
    dimensions: ['category'], // 指定层级字段
    encode: {
      itemName: 'category',    // 定义层级名称字段
      value: 'value'          // 定义数值字段
    }
  }]
};

3.2 控制层级展开与折叠

通过 highlightPolicy 和 initialTreeDepth 参数，可设置图表的默认展开层级深度及交互行为：

{
  series: [{
    initialTreeDepth: 2,      // 初始展开两层
    highlightPolicy: 'ancestor', // 高亮时显示父级
    leaves: {                // 叶子节点样式
      radius: '100%'         // 扩展最内层扇形
    }
  }]
}

四、自定义样式与交互增强

4.1 颜色与渐变效果

通过 itemStyle 和 levels 属性，可为不同层级设置独立样式：

{
  series: [{
    levels: [{
      depth: 0,               // 第一层级
      itemStyle: {
        color: '#ff6b6b'      // 主色调
      }
    }, {
      depth: 1,               // 第二层级
      itemStyle: {
        color: '#4ecdc4',
        borderColor: '#fff',   // 环境边框
        borderWidth: 2
      }
    }]
  }]
}

4.2 动态交互事件

通过 emphasis 和 selectedMode，可实现点击选中、悬停高亮等交互：

{
  series: [{
    emphasis: {
      focus: 'ancestor'       // 高亮时显示祖先节点
    },
    selectedMode: 'single',   // 允许单节点选中
    selectedOffset: 10        // 选中时偏移距离
  }]
}

五、实战案例：电商用户行为路径分析

5.1 案例背景

某电商平台希望分析用户从访问首页到完成购买的路径，数据结构如下：
| 父级 | 子级 | 子级 | 访问量 |
|--------------------|--------------------|--------------------|--------|
| 首页 | 商品列表页 | 详情页 | 2000 |
| 首页 | 购物车页 | 结算页 | 1200 |
| 首页 | 促销活动页 | 优惠券领取页 | 800 |

5.2 配置完整代码

const data = [
  {
    name: '首页',
    value: 4000,
    children: [
      {
        name: '商品列表页',
        value: 2000,
        children: [{ name: '详情页', value: 2000 }]
      },
      {
        name: '购物车页',
        value: 1200,
        children: [{ name: '结算页', value: 1200 }]
      },
      {
        name: '促销活动页',
        value: 800,
        children: [{ name: '优惠券领取页', value: 800 }]
      }
    ]
  }
];

const option = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {d}%' // 显示百分比
  },
  series: [{
    type: 'sunburst',
    data: data,
    radius: ['15%', '90%'],
    label: {
      rotate: true,
      color: '#333'
    },
    levels: [{
      depth: 0,
      itemStyle: { borderRadius: 5 },
      label: { show: false }
    }, {
      depth: 1,
      itemStyle: { borderColor: '#fff', borderWidth: 1 }
    }, {
      depth: 2,
      itemStyle: { opacity: 0.8 }
    }]
  }]
};

// 渲染图表
echarts.getInstanceByDom(document.getElementById('chart')).setOption(option);

5.3 可视化效果分析

该案例通过旭日图清晰展示了：

  • 首页是所有路径的起点，占比100%；
  • 商品列表页的转化率最高（访问量2000，对应详情页无流失）；
  • 促销活动页到优惠券领取页的路径流失明显（访问量减少至800）。

六、进阶技巧与性能优化

6.1 数据钻取与联动

结合 ECharts 的 selected 事件，可实现点击子节点跳转到下级图表：

chart.on('click', (params) => {
  const node = params.data;  
  if (node.children) {
    // 动态生成子节点图表
    const subData = node.children;
    // ...重新渲染图表
  }
});

6.2 大数据量优化

当数据层级超过5层或节点数超过1000时，可通过以下方法提升性能：

  • 启用剪裁：clip: true 避免绘制冗余区域；
  • 延迟渲染：使用 echarts.getInstance().dispatchAction() 分批次加载数据；
  • 简化样式：减少高亮、渐变等复杂效果。

结论

ECharts 旭日图凭借其独特的环形嵌套结构，为层次化数据的可视化提供了强大工具。从基础配置到交互优化，掌握这一图表类型不仅能提升数据表达的清晰度，更能帮助开发者在复杂场景中挖掘数据的深层价值。建议读者通过实际项目不断练习，尝试结合后端 API 动态加载数据，或与其他图表类型（如树状图、饼图）联动，进一步拓展可视化方案的应用边界。随着数据量的增长和技术的迭代，旭日图在商业分析、科研展示等领域的潜力将持续释放，成为开发者必备的数据叙事利器。

最新发布

查看更多文章