2019年阅读分类统计

描述:当前是关于Echarts图表中的 旭日图 示例。
 
            var uploadedDataURL = "/asset/get/s/data-1577891460444-H6EWcM1h.txt";
var colors = [
    "#2ec7c9",
    "#b6a2de",
    "#5ab1ef",
    "#ffb980",
    "#d87a80",
    "#8d98b3",
    "#e5cf0d",
    "#97b552",
    "#95706d",
    "#dc69aa",
    "#07a2a4",
    "#9a7fd1",
    "#588dd5",
    "#f5994e",
    "#c05050",
    "#59678c",
    "#c9ab00",
    "#7eb00a",
    "#6f5553",
    "#c14089"
];
var bgColor = '#2E2733';
bgColor={
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.7,
          colorStops: [{
              offset: 0,
              color: '#b6a2de' // 0% 处的颜色
          }, {
              offset: .4,
              color: '#9a7fd1' // 100% 处的颜色
          }, {
              offset: 1,
              color: '#59678c' // 100% 处的颜色
          }],
          globalCoord: false // 缺省为 false
      };
function obj2string(o) {
    var r = [];
    if (typeof o == "string") {
        return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
    }
    if (typeof o == "object") {
        if (!o.sort) {
            for (var i in o) {
                r.push(i + ":" + obj2string(o[i]));
            }
            if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                r.push("toString:" + o.toString.toString());
            }
            r = "{" + r.join() + "}";
        } else {
            for (var i = 0; i < o.length; i++) {
                r.push(obj2string(o[i]))
            }
            r = "[" + r.join() + "]";
        }
        return r;
    }
    return o.toString();
};
var dd = [];

var option1 = {
    backgroundColor: bgColor,
    color: colors,

    title: {
        text: '2019年阅读分类统计',
        subtext: '每本书都自带光芒,\n许多光组合在一起,\n变成思想的太阳',
        textStyle: {
            fontSize: 30,
            align: 'center',
            textShadowColor: 'rgba(0,0,0,0.3)',
            textShadowBlur: 3,
        },
        subtextStyle: {
            align: 'center',
            color:'#DDD',
            fontSize:18,
            textShadowColor: 'rgba(0,0,0,0.3)',
            textShadowBlur: 5,
        },
        //sublink: 'https://worldcoffeeresearch.org/work/sensory-lexicon/'
    },
    tooltip: {},

    series: {
        type: 'sunburst',
        highlightPolicy: 'descendant',
        data: [],
        radius: [0, 500],
        sort: null,
        center:['50%','45%'],
        levels: [{}, {
            //年份
            r0: '0%',
            r: '10%',
            itemStyle: {
                borderWidth: 2,
                
            },
            label: {
                rotate: 'tangential',
                fontSize:14
            },
            highlight: {
                itemStyle: {
                    color: 'orange'
                }
            },
            downplay: {
                itemStyle: {
                    color: '#ccc'
                }
            }
        }, {
            //分类
            r0: '10%',
            r: '25%',
            itemStyle: {
                borderWidth: 2,
                opacity:1
                
            },
            label: {
                align: 'right',
                fontSize: 12
            },
            highlight: {
                itemStyle: {
                    color: 'orange'
                }
            },
            downplay: {
                itemStyle: {
                    color: '#ccc'
                }
            }
        }, {
            //国家
            r0: '25%',
            r: '40%',
            label: {
                //position: 'outside',
                //padding: 3,
                //silent: false
                align: 'left',
                fontSize: 12
            },
            itemStyle: {
                //borderWidth: 3
                opacity:0.8
            },
            highlight: {
                itemStyle: {
                    color: 'orange'
                }
            },
            downplay: {
                itemStyle: {
                    color: '#ccc'
                }
            }
        }, {
            //作者
            r0: '40%',
            r: '65%',
            label: {
                //position: 'outside',
                padding: 0,
                align: 'right',
                fontSize: 10
            },
            itemStyle: {
                borderWidth: 1,
                opacity: 0.1,
            },
            highlight: {
                itemStyle: {
                    color: 'orange'
                }
            },
            downplay: {
                itemStyle: {
                    color: '#ccc'
                }
            }
        }, {
            //名字
            r0: '65%',
            r: '66%',

            itemStyle: {
                //shadowBlur: 5,
                //shadowColor: colors[0]
            },
            label: {
                //position: 'outside',
                align:'left',
                textShadowBlur: 5,
                textShadowColor: '#333',
                fontSize: 14
            },
            downplay: {
                label: {
                    opacity: 0
                }
            },
            highlight: {
                itemStyle: {
                    color: 'orange',

                },
                label: {

                    color: '#FFF',
                    fontSize: 13
                }

            }
        }, {
            //day
            r0: '120%',
            r: '121%',
            show: false,
            label: {
                position: 'outside',
                //padding: 3,
                //silent: false
                fontSize: 9,
                opacity: 0
            },
            itemStyle: {
                //borderWidth: 3
                opacity: 0
            },
            highlight: {
                itemStyle: {
                    color: 'orange'
                }
            },
            downplay: {
                itemStyle: {
                    color: '#ccc'
                }
            }
        }]
    }
};
option = option1;
$.getJSON(uploadedDataURL, function(readrecords) {
    myChart.hideLoading();
    var lastyearnode = { //新建年份节点
        name: readrecords[0].yyyy,
        value: 1,
        itemStyle: {
            color: colors[0]
        },
        children: [{
            name: readrecords[0].type,
            value: 1,
            itemStyle: {
                color: colors[1]
            },
            children: [{
                name: readrecords[0].country,
                value: 1,
                itemStyle: {
                    color: colors[2]
                },
                children: [{
                    name: readrecords[0].writer,
                    value: 1,
                    itemStyle: {
                        color: colors[3]
                    },
                    children: [{
                        name: readrecords[0].name,
                        value: 1,
                        itemStyle: {
                            color: colors[4]
                        },
                        children: [{
                            name: readrecords[0].days + 'd',
                            value: 1,
                            itemStyle: {
                                color: colors[4]
                            },
                        }]
                    }]
                }]
            }]
        }]
    };
    var lasttypenode = lastyearnode.children[0];
    var lastcountrynode = lasttypenode.children[0];
    var lastwriternode = lastcountrynode.children[0];

    //alert(obj2string(lasttypenode));
    for (var i = 1; i < readrecords.length; i++) { //年份层级
        //for (var i = 1; i < 10; i++) { //年份层级
        //每行先构建叶子节点
        ci = (i + 5) % colors.length;
        //alert(ci);
        co = colors[ci];

        var node = {
            name: '《'+readrecords[i].name+'》',
            value: 1,
            itemStyle: {
                color: colors[ci]
            },
            children: [{
                name: readrecords[i].days + 'd',
                value: 1,
                itemStyle: {
                    color: colors[ci]
                },
            }]
        };

        if (lastyearnode.name !== readrecords[i].yyyy) { //新年份的第一行
            // dd.push(lastyearnode); //将上一个年份的加入数据
            if (lastyearnode.name === 2019) {
                //alert(lastyearnode.name+'---'+(lastyearnode.name===2019));
                dd.push(lastyearnode); //将上一个年份的加入数据
            }
            lastyearnode = { //新建年份节点
                name: readrecords[i].yyyy,
                value: 1,
                itemStyle: {
                    color: colors[ci + 1]
                },
                children: [{
                    name: readrecords[i].type,
                    value: 1,
                    itemStyle: {
                        color: colors[ci + 2]
                    },
                    children: [{
                        name: readrecords[i].country,
                        value: 1,
                        itemStyle: {
                            color: colors[ci + 3]
                        },
                        children: [{
                            name: readrecords[i].writer,
                            value: 1,
                            itemStyle: {
                                color: colors[ci + 4]
                            },
                            children: [node]
                        }]
                    }]
                }]
            };
            lasttypenode = lastyearnode.children[0];
            lastcountrynode = lasttypenode.children[0];
            lastwriternode = lastcountrynode.children[0];

        } else {
            //alert(lasttypenode.name+'-----'+readrecords[i].type+'-----'+(lasttypenode.name !== readrecords[i].type))
            if (lasttypenode.name !== readrecords[i].type) { //新分类
                //alert(obj2string(lastyearnode));

                lasttypenode = {
                    name: readrecords[i].type,
                    value: 1,
                    itemStyle: {
                        color: colors[ci + 1]
                    },
                    children: [{
                        name: readrecords[i].country,
                        value: 1,
                        itemStyle: {
                            color: colors[ci + 2]
                        },
                        children: [{
                            name: readrecords[i].writer,
                            value: 1,
                            itemStyle: {
                                color: colors[ci + 3]
                            },
                            children: [node]
                        }]
                    }]
                }; //新建分类
                lastyearnode.children.push(lasttypenode); //上一分类插入年份节点
                lastyearnode.value++;
                lastcountrynode = lasttypenode.children[0];
                lastwriternode = lastcountrynode.children[0];
                //alert(obj2string(lasttypenode));
                //alert(lasttypenode.name+'-----'+readrecords[i].type+'-----'+(lasttypenode.name !== readrecords[i].type))

            } else {
                if (lastcountrynode.name !== readrecords[i].country) { //新国家
                    lastcountrynode = {
                        name: readrecords[i].country,
                        value: 1,
                        itemStyle: {
                            color: colors[ci + 1]
                        },
                        children: [{
                            name: readrecords[i].writer,
                            value: 1,
                            itemStyle: {
                                color: colors[ci + 2]
                            },
                            children: [node]
                        }]
                    }; //新建分类
                    lasttypenode.children.push(lastcountrynode);
                    lasttypenode.value++;
                    lastyearnode.value++;
                    lastwriternode = lastcountrynode.children[0];
                } else {
                    if (lastwriternode.name !== readrecords[i].writer) { //新作者
                        lastwriternode = {
                            name: readrecords[i].writer,
                            value: 1,
                            itemStyle: {
                                color: colors[ci + 1]
                            },
                            children: [node]
                        }; //新建分类
                        lastcountrynode.children.push(lastwriternode);
                        lastcountrynode.value++;
                        lasttypenode.value++;
                        lastyearnode.value++;
                    } else {
                        lastwriternode.children.push(node);
                        lastcountrynode.value++;
                        lasttypenode.value++;
                        lastyearnode.value++;
                        lastwriternode.value++;
                    }
                }
            }
        }

        //alert(obj2string(dd));break;
    }

    if (lastyearnode.name === 2019) {
        //alert(lastyearnode.name + '---' + (lastyearnode.name === 2019));
        dd.push(lastyearnode); //将上一个年份的加入数据
    }
    //alert(obj2string(dd));
    option1.series.data = dd;
    //alert(obj2string(option1.series.data));

    myChart.setOption(option, true);
    //alert('111');
});