Echarts-案例【饼状图案例(一)】

Posted on 2020-09-17 18:49  MissRong  阅读(820)  评论(0)    收藏  举报

Echarts-案例【饼状图案例(一)】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Echarts饼状图案例(含南丁格尔图)</title>
        <script type="text/javascript" src="js/echarts_56.js" ></script>
        <style type="text/css">
            #main{
                width:600px;
                height:400px;
            }
        </style>
    </head>
    <body>
        <div id="main">
            
        </div>
        <script type="text/javascript">
            var eobj=echarts.init(document.getElementById("main"));
            var option={
                series:[{
                    name:"访问来源", //饼图的名称
                    type:'pie', //类型为饼图
                    //饼图的半径
                    radius:'55%', //55%指的是外半径为可视区(div盒子的宽高中较小的一项)的尺寸的55%长度
                    //南丁格尔图
//                    roseType:'angle',
                    //数据的数组内容
                    data:[
                      {value:120,name:'塞饭'},
                      {value:300,name:'学校上机'},
                      {value:60,name:'跑步+听歌'},
                      {value:240,name:'课余网课学习'},
                      {value:120,name:'洗漱+收拾'}    ,
                      {value:420,name:'睡觉觉'}
                    ],
                    itemStyle:{
                        normal:{
                            shadowBlur:20,
                            shadowColor:'rgba{0,0,0,0}' //阴影颜色
                        }
                    }
                }]
            };
            eobj.setOption(option);
        </script>
    </body>
</html>

效果:

 

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3