echarts 餅圖

時間 2019-11-25

標籤 echarts 餅圖简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.js"></script>
</head>

<body>
    <div id="pie01" style="width:500px;height:350px;margin-top:10px"></div>
    <script>
        var myChart2 = echarts.init(document.getElementById('pie01'));
        option = {
            title: {
                text: '當月流量池使用狀況',
                subtext: '',
                x: 'center'
            },
            tooltip: {},
            legend: {
                orient: 'vertical',
                x: 'left',
                y: 'top',
                data: ['當月未使用流量' + 30 + 'GB', '當月已使用流量' + 4 + 'GB']
            },
            color: ['#86d560', '#798af2'],
            series: [{
                name: '',
                type: 'pie',
                radius: '55%',
                center: ['50%', '65%'],
                data: [{
                        value: 30,
                        name: '當月未使用流量' + 30 + 'GB'
                    },
                    {
                        value: 4,
                        name: '當月已使用流量' + 4 + 'GB'
                    }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal: {
                        label: {
                            show: true,
                            position: 'inner',

                        }
                    }

                }
            }]
        };
        myChart2.setOption(option);

    </script>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。