基于Echarts的饼图使用小案例

偏执的太偏执、 2022-03-01 11:16 298阅读 0赞

<html>
    <meta charset="utf-8">
    <head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="echarts.js"></script>
    <script>
        $(function(){
            var myChart = echarts.init(document.getElementById('main'));
            /*   data1 表示每个饼状图的名字，每个培训类型
                 data2 表示每个饼状图，即每个培训类型的统计结果
             */
            var data1=[];
            var data2=[];
            var array=[];
    
            $.ajax({
                type:"post",
                url:"/getTrainInforStatic",
                data:{},
                cache:false,
                async: false,
                dataType:"json",
                success : function (result) {
                   $.each(result, function (key, value) {
                        data1.push(key);data2.push(value);
                        var map={};map.name=key;map.value=value;
                        array.push(map);
                    })
                    myChart.setOption({ //加载数据图表
    
                        title : {
                            text: '培训信息数据统计',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient : 'vertical',
                            x : 'left',
                            data:data1
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {
                                    show: true,
                                    type: ['pie', 'funnel'],
                                    option: {
                                        funnel: {
                                            x: '25%',
                                            width: '50%',
                                            funnelAlign: 'left',
                                            max: 1548
                                        }
                                    }
                                },
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        series : [
                            {
                                name:'统计结果:',
                                type:'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:array
                            }
                        ]
                    });
                },
                error : function(result) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
    
        })
    </script>
    </head>
    
    <body>
    <div id="main" style="height:560px"></div>
    </body>
    
    </html>