xmnk
/
wkshi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
							<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                background: #262626;
            }
        </style>
        <div id="main"></div>
        <script>
            var chart;
            require([
                'echarts'
            ], function (echarts) {

                chart = echarts.init(document.getElementById('main'));

                var colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];
                var bgColor = '#262626';

                var itemStyle = {
                    star5: {
                        color: colors[0]
                    },
                    star4: {
                        color: colors[1]
                    },
                    star3: {
                        color: colors[2]
                    },
                    star2: {
                        color: colors[3]
                    }
                };

                var data = [{
                    name: '虚构',
                    itemStyle: {
                        normal: {
                            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
                        };
                    }
                }

                chart.setOption({
                    color: colors,
                    // title: {
                    //     text: '2017 读书记录',
                    //     bottom: 30,
                    //     left: 'center',
                    //     textStyle: {
                    //         color: colors[0]
                    //     }
                    // },
                    series: [{
                        type: 'sunburst',
                        center: ['50%', '48%'],
                        data: data,
                        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: 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: {
                                    opacity: 0.5
                                }
                            }
                        }]
                    }]
                });
            });
        </script>
    </body>
</html>