【百度echarts】实现圆环进度条-代码示例代码demo

￡神魔★判官ぃ 2022-05-10 03:16 233阅读 0赞

【百度echarts】实现圆环进度条-代码示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
        <title>圆环进度条</title>
    </head>
    <body>
    <div id="pie" style="width: 1366px;height:450px;">
    </body>
    <script type="text/javascript">
            //柱状图
            var asd =document.getElementById('pie');
            var pieChart = echarts.init(asd);
            var labelTop = {//上层样式
                normal : {
                    color :'#0099cc',
                    label : {
                        show : true,
                        position : 'center',
                        formatter : '{b}',
                        textStyle: {
                            baseline : 'bottom',
                            fontSize:26
                        }
                    },
                    labelLine : {
                        show : false
                    }
                }
            };
            var labelFromatter = {//环内样式
                normal : {//默认样式
                    label : {//标签
                        formatter : function (a,b,c){return 100 - c + '%'},
                        // labelLine.length：30,  //线长，从外边缘起计算，可为负值
                        textStyle: {//标签文本样式
                            color:'black',
                            align :'center',
                            baseline : 'top'//垂直对其方式
                        }
                    }
                },
            };
            var labelBottom = {//底层样式
                normal : {
                    color: '#99ccff',
                    label : {
                        show : true,
                        position : 'center',
                        fontSize:22
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis: {//悬浮式样式
                    color: 'rgba( 0,0,0,0)'
                }
            };
            var radius = [80,122];// 半径[内半径，外半径]
    
            var pieChartOption = {
                title : {
                    text: '',
                    subtext: '',
                    x:'center',
                    //正标题样式
                    textStyle: {
                        fontSize:44,
                        fontFamily:'Arial',
                        fontWeight:100,
                        //color:'#1a4eb0',
                    },
                    //副标题样式
                    subtextStyle: {
                        fontSize:28,
                        fontFamily:'Arial',
                        color:"#1a4eb0",
                    },
                },
                animation:false,
                tooltip : {         // 提示框. Can be overwrited by series or data
                    trigger: 'axis',
                    //show: true,   //default true
                    showDelay: 0,
                    hideDelay: 50,
                    transitionDuration:0,
                    borderRadius : 8,
                    borderWidth: 2,
                    padding: 10,    // [5, 10, 15, 20]
                },
                series : [
                    {
                        type : 'pie',
                        center : ['50%', '70%'],//圆心坐标（div中的%比例）
                        radius : radius,//半径
                        x: '0%', // for funnel
                        itemStyle : labelTop,//graphStyleA,//图形样式 // 当查到的数据不存在（并非为0），此属性隐藏
                        data : [
                            {name:'CPU', value:79,itemStyle : labelTop},
                            {name:'79%', value:21, itemStyle : labelBottom}
                        ]
                    }
                ]
            };
            pieChart.setOption(pieChartOption);
    </script>
    </html>