echarts实现旭日图表效果代码-html代码-BFW代码库

echarts实现旭日图表效果代码

代码语言：html

所属分类：图表

代码描述：echarts实现旭日图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
         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: {
                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: '进化'
                    }, .........完整代码请登录后点击上方下载按钮下载查看