美文网首页
02饼状图

02饼状图

作者: RobertLiu123 | 来源:发表于2019-08-14 16:48 被阅读0次
    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/echarts.min.js"></script>
        </head>
    
        <body>
            <div id="main" style="width: 600px;height:400px;"></div>
        </body>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                title: {
                text: 'bug分布'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            color: ['#CD5C5C', '#00CED1', '#9ACD32', '#FFC0CB'],
            stillShowZeroSum: false,
            series: [
                {
                    name: 'bug分布',
                    type: 'pie',
                    radius: '80%',
                    center: ['60%', '60%'],
                    data: [
                        {value: 1, name: '后台_bug'},
                        {value: 3, name: 'IOS_bug'},
                        {value: 7, name: 'Android_bug'},
                        {value: 4, name: 'H5_bug'},
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(128, 128, 128, 0.5)'
                        }
                    }
                }
            ]
            };
    
            myChart.setOption(option);
        </script>
    
    </html>
    

    相关文章

      网友评论

          本文标题:02饼状图

          本文链接:https://www.haomeiwen.com/subject/zzcnjctx.html