7天带你搞定一个图表框架echarts（七）

旭日图的基本用法

旭日图（Sunburst）由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。

先声明旭日图所需要的数据，数据本身我们不需要去深究，只需要了解数据格式，下列代码是声明数据并对数据进行一些简单处理

        var colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];
        var bgColor = '#2E2733';
                var itemStyle = {
            star5: {
                color: colors[0]
            },
            star4: {
                color: colors[1]
            },
            star3: {
                color: colors[2]
            },
            star2: {
                color: colors[3]
            }
        };

        var data = [{
            name: '虚构',
            itemStyle: {
                color: colors[1]
            },
            children: [{
                name: '小说',
                children: [{
                    name: '5☆',
                    children: [{
                        name: '疼'
                    }, {
                        name: '慈悲'
                    }, {
                        name: '楼下的房客'
                    }]
                }, {
                    name: '4☆',
                    children: [{
                        name: '虚无的十字架'
                    }, {
                        name: '无声告白'
                    }, {
                        name: '童年的终结'
                    }]
                }, {
                    name: '3☆',
                    children: [{
                        name: '疯癫老人日记'
                    }]
                }]
            }, {
                name: '其他',
                children: [{
                    name: '5☆',
                    children: [{
                        name: '纳博科夫短篇小说全集'
                    }]
                }, {
                    name: '4☆',
                    children: [{
                        name: '安魂曲'
                    }, {
                        name: '人生拼图版'
                    }]
                }, {
                    name: '3☆',
                    children: [{
                        name: '比起爱你，我更需要你'
                    }]
                }]
            }]
        }, {
            name: '非虚构',
            itemStyle: {
                color: colors[2]
            },
            children: [{
                name: '设计',
                children: [{
                    name: '5☆',
                    children: [{
                        name: '无界面交互'
                    }]
                }, {
                    name: '4☆',
                    children: [{
                        name: '数字绘图的光照与渲染技术'
                    }, {
                        name: '日本建筑解剖书'
                    }]
                }, {
                    name: '3☆',
                    children: [{
                        name: '奇幻世界艺术\n&RPG地图绘制讲座'
                    }]
                }]
            }, {
                name: '社科',
                children: [{
                    name: '5☆',
                    children: [{
                        name: '痛点'
                    }]
                }, {
                    name: '4☆',
                    children: [{
                        name: '卓有成效的管理者'
                    }, {
                        name: '进化'
                    }, {
                        name: '后物欲时代的来临',
                    }]
                }, {
                    name: '3☆',
                    children: [{
                        name: '疯癫与文明'
                    }]
                }]
            }, {
                name: '心理',
                children: [{
                    name: '5☆',
                    children: [{
                        name: '我们时代的神经症人格'
                    }]
                }, {
                    name: '4☆',
                    children: [{
                        name: '皮格马利翁效应'
                    }, {
                        name: '受伤的人'
                    }]
                }, {
                    name: '3☆',
                }, {
                    name: '2☆',
                    children: [{
                        name: '迷恋'
                    }]
                }]
            }, {
                name: '居家',
                children: [{
                    name: '4☆',
                    children: [{
                        name: '把房子住成家'
                    }, {
                        name: '只过必要生活'
                    }, {
                        name: '北欧简约风格'
                    }]
                }]
            }, {
                name: '绘本',
                children: [{
                    name: '5☆',
                    children: [{
                        name: '设计诗'
                    }]
                }, {
                    name: '4☆',
                    children: [{
                        name: '假如生活糊弄了你'
                    }, {
                        name: '博物学家的神秘动物图鉴'
                    }]
                }, {
                    name: '3☆',
                    children: [{
                        name: '方向'
                    }]
                }]
            }, {
                name: '哲学',
                children: [{
                    name: '4☆',
                    children: [{
                        name: '人生的智慧'
                    }]
                }]
            }, {
                name: '技术',
                children: [{
                    name: '5☆',
                    children: [{
                        name: '代码整洁之道'
                    }]
                }, {
                    name: '4☆',
                    children: [{
                        name: 'Three.js 开发指南'
                    }]
                }]
            }]
        }];

        for (var j = 0; j < data.length; ++j) {
            var level1 = data[j].children;
            for (var i = 0; i < level1.length; ++i) {
                var block = level1[i].children;
                var bookScore = [];
                var bookScoreId;
                for (var star = 0; star < block.length; ++star) {
                    var style = (function(name) {
                        switch (name) {
                            case '5☆':
                                bookScoreId = 0;
                                return itemStyle.star5;
                            case '4☆':
                                bookScoreId = 1;
                                return itemStyle.star4;
                            case '3☆':
                                bookScoreId = 2;
                                return itemStyle.star3;
                            case '2☆':
                                bookScoreId = 3;
                                return itemStyle.star2;
                        }
                    })(block[star].name);

                    block[star].label = {
                        color: style.color,
                        downplay: {
                            opacity: 0.5
                        }
                    };

                    if (block[star].children) {
                        style = {
                            opacity: 1,
                            color: style.color
                        };
                        block[star].children.forEach(function(book) {
                            book.value = 1;
                            book.itemStyle = style;

                            book.label = {
                                color: style.color
                            };

                            var value = 1;
                            if (bookScoreId === 0 || bookScoreId === 3) {
                                value = 5;
                            }

                            if (bookScore[bookScoreId]) {
                                bookScore[bookScoreId].value += value;
                            } else {
                                bookScore[bookScoreId] = {
                                    color: colors[bookScoreId],
                                    value: value
                                };
                            }
                        });
                    }
                }

                level1[i].itemStyle = {
                    color: data[j].itemStyle.color
                };
            }
        }

声明数据的格式：{name:"",value:"",children:[]}，其中name为名称，value为数值，children表示子元素。如果父级元素中使用了value，并且大于子元素之和，可以用来表示还有其他子元素未显示；如果没有使用，，则为子元素之和。children可以进行嵌套使用该格式

下面我们具体看一下配置项：

 var myChart = echarts.init(document.getElementById('main'));
        var option = {
            backgroundColor: bgColor,
            color: colors,
            series: [{
                type: 'sunburst',
                center: ['50%', '48%'],
                data: data,
                //扇形块根据数据 value 的排序方式
                sort: function(a, b) {
                    if (a.depth === 1) {
                        return b.getValue() - a.getValue();
                    } else {
                        return a.dataIndex - b.dataIndex;
                    }
                },
                //每个扇形块中，文本标签的样式
                label: {
                    rotate: 'radial',
                    color: bgColor
                },
                //扇形块的样式
                itemStyle: {
                    borderColor: bgColor,
                    borderWidth: 2
                },
                //多层配置
                //第一层是留给数据下钻点的空白配置
                //第二层是最靠内测的第一层
                levels: [{}, {
                    //r0 ,r1 用于定义每一层的大小
                    r0: 0,
                    r: 40,
                    //描述了每个扇形块中，文本标签的样式
                    label: {
                        rotate: 0
                    }
                }, {
                    r0: 40,
                    r: 105
                }, {
                    r0: 115,
                    r: 140,
                    //描述旭日图扇形块的样式
                    itemStyle: {
                        shadowBlur: 2,
                        shadowColor: colors[2],
                        color: 'transparent'
                    },
                    label: {
                        rotate: 'tangential',
                        fontSize: 10,
                        color: colors[0]
                    }
                }, {
                    r0: 140,
                    r: 145,
                    itemStyle: {
                        shadowBlur: 80,
                        shadowColor: colors[0]
                    },
                    label: {
                        position: 'outside',
                        textShadowBlur: 5,
                        textShadowColor: '#333',
                    },
                    //鼠标悬停后不相关扇形块的配置项
                    downplay: {
                        label: {
                            opacity: 0.5
                        }
                    }
                }]
            }]
        };
        myChart.setOption(option);

上述旭日图中，我们使用到了series组件，我们具体讲解一下series组件中关于旭日图的配置项：

1. type：当type的值为sunburst表示当前图表为旭日图
2. center：用于定位旭日图的圆心
3. sort：扇形块根据数据 value 的排序方式，可以是desc（降序）、asc（升序）、null和回调函数
4. label：描述了每个扇形块中，文本标签的样式。在data.label属性和levels.label属性中都可以对文本标签的样式进行修改，但是它们的优先级的是：data.label>levels.label>label
5. itemStyle：旭日图扇形块的样式。其他同上
6. levels：对旭日图的每一层进行配置。它是一个数组，其中的第 0 项表示数据下钻后返回上级的图形，其后的每一项分别表示从圆心向外层的层级。
   • r0，r1：用于设置旭日图每一层的半径
   • label：描述了每个扇形块中，文本标签的样式
   • itemStyle：描述旭日图扇形块的样式
   • downplay：鼠标悬停后不相关扇形块的配置项

关于echarts就到此为止，echarts的内容不止这一点，我只讲述了很少一部分我认为比较实用和常用的图表系列，大家有兴趣可以去官网自行学习。