echarts的简单应用之（二）饼图

　　接上一篇文章：

echarts的简单应用之（一）柱形图：https://www.cnblogs.com/jylee/p/9359363.html

本篇文章讲述饼图，撇过折线图不说，是因为折线图与柱形图的数据传递方式一样，能理解柱形图就能理解折线图。

Echarts官网上有实例可以查看到静态的饼图模型，这里只说后台数据的传递格式。

 解释： 第一行中的代码中pie是图表的id选择器；

　　levels: 等级的数组；

　　brower： 是一个name，value相对应的数组，这也是饼图的数据格式的要求，当然你也可以直接在后台数据中封装好再传到前台。

var myChart = echarts.init(pie[0]);
        
      var  levels = [];
      var  brower =[];
        // 从后台获取数据
        $.ajax({
            type : "post",
            url : "getPieInfo.action",
            dataType: "json",
            data : {},
            success : function(result){
                if(result != null && result.length > 0){
                    for(var i=0; i<result.length; i++){
                         levels.push(result[i].level);
                         brower.push({
                             value: result[i].num,
                             name : result[i].level
                         })
                     }
                }
                myChart.setOption({
                    title : {
                    text: '告警级别比例统计',
//                    subtext: '自定义数据',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"    // 拖拽重新计算
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data: levels
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},    // 数据视图
                        magicType : {        // 动态类型转换
                            show: true, 
                            type: ['pie', 'funnel'],    // 饼图、漏斗形互转
                            option: {
                                funnel: {
                                    x: '25%',
                                     '50%',
                                    funnelAlign: 'center'    // 水平方向上对齐格式
                                }
                            }
                        },
                        restore : {show: true},    // 还原
                        saveAsImage : {show: true}    // 保存图片
                    }
                },
                calculable : true,    //拖拽重新计算
                series : {
                        name:'访问来源',
                        type:'pie',
                        radius : ["45",'70%'],        // 内半径，外半径
//                        center: ['50%', '60%'],        // 圆心坐标
                        data: brower
                    }
                });
            }
        })

后台是基于SSM框架写的，不多叙述，有问题的话欢迎交流。

数据库如下：

显示结果：

 如果文中有什么错误或问题可以和我交流，邮箱hellojylee@163.com.