echarts实现旭日图表效果代码

代码语言:html

所属分类:图表

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

代码标签: 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☆',
                    childr.........完整代码请登录后点击上方下载按钮下载查看

网友评论0