基于Echarts的饼图使用小案例

最新推荐文章于 2024-04-24 22:52:34 发布

Hekliu

最新推荐文章于 2024-04-24 22:52:34 发布

阅读量506

点赞数

分类专栏： JavaScript 文章标签： JavaScript Echarts

本文链接：https://blog.csdn.net/liu59412/article/details/88739795

版权

JavaScript 专栏收录该内容

2 篇文章 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>

Hekliu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于Echarts的饼图使用小案例

<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><sc...
复制链接

扫一扫