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%',
                                     width: '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.