0
点赞
收藏
分享

微信扫一扫

Echarts图表之圆形进度条(三)

caoxingyu 2022-01-24 阅读 65

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Echarts图表</title>
        <!-- 引入echarts.min.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var current = 25;
            var all = 100;
            var option = {
                backgroundColor: 'rgba(1,202,217,.2)',
                series: [{
                    type: 'pie',
                    //不显示标签
                    label: {
                        show: false
                    },
                    //圆的位置
                    center: ['50%', '50%'],
                    //两个圆的空隙
                    radius: ['50%', '70%'],
                    //起始位置
                    startAngle: 180,
                    data: [{
                            name: '用量',
                            value: current,
                            itemStyle: {
                                color: '#ff9900'
                            }
                        },
                        {
                            name: 'rest',
                            value: all - current,
                            itemStyle: {
                                color: 'skyblue'
                            }
                        },
                        {
                            name: 'bottom',
                            value: all,
                            itemStyle: {
                                color: 'transparent'
                            }
                        }
                    ]
                }]
            };
            myChart.setOption(option);
        </script>
    </body>
</html>

举报

相关推荐

0 条评论