| <!-- | |
| Licensed to the Apache Software Foundation (ASF) under one | |
| or more contributor license agreements. See the NOTICE file | |
| distributed with this work for additional information | |
| regarding copyright ownership. The ASF licenses this file | |
| to you under the Apache License, Version 2.0 (the | |
| "License"); you may not use this file except in compliance | |
| with the License. You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, | |
| software distributed under the License is distributed on an | |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| KIND, either express or implied. See the License for the | |
| specific language governing permissions and limitations | |
| under the License. | |
| --> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="lib/simpleRequire.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> |