画太极(echarts)

最新推荐文章于 2022-02-02 11:08:40 发布

weixin_33686714

最新推荐文章于 2022-02-02 11:08:40 发布

阅读量391

点赞数

文章标签： javascript java python ViewUI

原文链接：https://my.oschina.net/oisanblog/blog/1571089

版权

2019独角兽企业重金招聘Python工程师标准>>>

用饼图画太极，

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>太极</title>
    <script src="echarts.js"></script>
</head>

<body>
    <div id="main" style="width:800;height:500;position:absolute;top:10%;left:20%;"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            backgroundColor: '#515151',
            title: {
                text: '太极',
                left: 'center',
                top:'5%',
                textStyle: {
                    color: '#ccc'
                }
            },

            color: ['#FFFFFF', '#000000'],
            series: [{
                name: '大圆',
                type: 'pie',
                radius: '60%',
                center: ['50%', '50%'],
                data: [{
                    value: 50,
                    name: '阴'
                }, {
                    value: 50,
                    name: '阳'
                },],
                roseType: 'radius',
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false,
                    }
                }
            }, {
                name: '白色圆',
                type: 'pie',
                zlevel: 2,
                radius: '30%',
                center: ['50%', '65%'],
                data: [{
                    value: 50,
                    name: ''
                },],
                roseType: 'radius',
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false,
                    }
                }
            },

            {
                name: '黑色圆',
                type: 'pie',
                zlevel: 2,
                radius: '30%',
                center: ['50%', '35%'],
                data: [{
                    value: 50,
                    name: ''
                },],
                roseType: 'radius',
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false,
                    }
                },
                itemStyle: {
                    label: {
                        color: '#000000'
                    }
                }
            },

            {
                name: '白色圆小',
                type: 'pie',
                zlevel: 3,
                radius: '10%',
                center: ['50%', '35%'],
                data: [{
                    value: 50,
                    name: ''
                },],
                roseType: 'radius',
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false,
                    }
                }
            },

            {
                name: '黑色圆小',
                type: 'pie',
                zlevel: 3,
                radius: '10%',
                center: ['50%', '65%'],
                data: [{
                    value: 50,
                    name: ''
                },],
                roseType: 'radius',
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false,
                    }
                }

            }
            ]
        };
        myChart.setOption(option);
    </script>
</body>

</html>

如图，