极致呈现系列之：Echarts旭日图的绚丽奇观

什么是旭日图

旭日图是一种可视化图表，用于展示层级结构和层级之间的关系。它以一个圆形为基础，由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。

旭日图的特性及应用场景

旭日图的特性

• 层次结构：旭日图可以直观地展示数据的层级和关系。
• 扇区表示数据：每个扇区根据数据大小分布，可以形成层次结构明显且有趣的图形。
• 视觉效果：通过颜色和大小的变化，旭日图能够凸显数据的差异和重要性。

应用场景

• 组织结构图：可以用来展示公司的组织结构，让员工更好地了解公司的层级关系。
• 地理信息图：可以用来展示不同地区的人口分布情况，通过扇形区域的大小和颜色来反映不同地区的人口数量和密度。
• 产品分析图：可以用来展示产品的销售情况和市场份额，通过扇形区域的大小和颜色来反映不同产品的销售额和市场占比。

旭日图常用的配置项

1. type：该属性指定了图表的类型，对于旭日图，它的值应为"sunburst"。

2. data：数据源，包含具体的层级数据。通过data属性可以设置图表的数据。数据是一个包含层级关系的数组，每个元素代表一个节点。每个节点可以包含子节点，从而形成层级结构。每一层级都是一个对象，包含name（名称）和value（数值）属性。可以通过嵌套的方式表示多层级关系。子对象用children数组包裹。

   data数据结构如下：

	[{
    name: 'parent1',
    value: 10,          // 可以不写父元素的 value，则为子元素之和；
                        // 如果写了，并且大于子元素之和，可以用来表示还有其他子元素未显示
    children: [{
        value: 5,
        name: 'child1',
        children: [{
            value: 2,
            name: 'grandchild1',
            itemStyle: {
                // 每个数据可以有自己的样式，覆盖 series.itemStyle 和 level.itemStyle
            },
            label: {
                // 标签样式，同上
            }
        }]
    }, {
        value: 3,
        name: 'child2'
    }],
    itemStyle: {
        // parent1 的图形样式，不会被后代继承
    },
    label: {
        // parent1 的标签样式，不会被后代继承
    }
}, {
    name: 'parent2',
    value: 4
}]

3. radius：radius属性用于设置旭日图的半径范围。可以通过数组的方式设置内半径和外半径，或者使用百分比或数字的方式设置。
4. label：通过label属性可以配置节点标签的样式。可以设置color(字体颜色)、fontSize（字体大小）、fontWeight(字体粗细)、position（位置）、rotate（旋转角度）等属性。
5. itemStyle：itemStyle属性用于设置节点的样式，包括节点的color（颜色）、borderColor（边框颜色）、borderWidth（边框宽度）等。
6. levels：层级配置，该属性用于设置图表的层级结构。通过levels属性，可以设置不同层级的样式，包括颜色、标签样式、边框样式等。每个层级都是一个对象，包含itemStyle（节点样式）、label（标签配置）等属性。
7. sort：sort属性用于设置节点的排序规则。可以选择"asc"（升序）或"desc"（降序）。
8. animation：是否开启动画
9. animationDuration：初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果
10. animationEasing：初始动画的缓动效果。

创建基本的旭日图

1. 创建vue项目，安装ECharts库

npm install echarts --save

2. 新建SunburstView.vue文件，使用import语句引入ECharts库

import * as echarts from 'echarts';

3. 创建图表容器：在SunburstView组件的template中，添加一个div元素作为图表的容器。给它一个唯一的ref属性，以便在后面初始化图表对象时使用

<template>
  <div ref="chart" style="width: 100%;height: 100vh;"></div>