383 lines
14 KiB
HTML
Generated
383 lines
14 KiB
HTML
Generated
|
|
<!--
|
|
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>
|