接上一篇文章：

echarts的簡單應用之（一）柱形圖：https://www.cnblogs.com/jylee/p/9359363.html

本篇文章講述餅圖，撇過折線圖不說，是因為折線圖與柱形圖的數據傳遞方式一樣，能理解柱形圖就能理解折線圖。

Echarts官網上有實例可以查看到靜態的餅圖模型，這裏只說後臺數據的傳遞格式。

解釋： 第一行中的代碼中pie是圖表的id選擇器；

　　levels: 等級的數組；

　　brower： 是一個name，value相對應的數組，這也是餅圖的數據格式的要求，當然你也可以直接在後臺數據中封裝好再傳到前臺。

 1 var myChart = echarts.init(pie[0]);
 
 2         
 3       var  levels = [];
 4       var  brower =[];
 5         // 從後臺獲取數據
 6         $.ajax({
 7             type : "post",
 8             url : "getPieInfo.action",
 9             dataType: "json",
10             data : {},
11             success : function(result){
12                 if(result != null
 
 && result.length > 0){
13                     for(var i=0; i<result.length; i++){
14                          levels.push(result[i].level);
15                          brower.push({
16                              value: result[i].num,
17                              name : result[i].level
 
18                          })
19                      }
20                 }
21                 myChart.setOption({
22                     title : {
23                     text: ‘告警級別比例統計‘,
24 //                    subtext: ‘自定義數據‘,
25                     x:‘center‘
26                 },
27                 tooltip : {
28                     trigger: ‘item‘,
29                     formatter: "{a} <br/>{b} : {c} ({d}%)"    // 拖拽重新計算
30                 },
31                 legend: {
32                     orient : ‘vertical‘,
33                     x : ‘left‘,
34                     data: levels
35                 },
36                 toolbox: {
37                     show : true,
38                     feature : {
39                         mark : {show: true},
40                         dataView : {show: true, readOnly: false},    // 數據視圖
41                         magicType : {        // 動態類型轉換
42                             show: true, 
43                             type: [‘pie‘, ‘funnel‘],    // 餅圖、漏鬥形互轉
44                             option: {
45                                 funnel: {
46                                     x: ‘25%‘,
47                                     width: ‘50%‘,
48                                     funnelAlign: ‘center‘    // 水平方向上對齊格式
49                                 }
50                             }
51                         },
52                         restore : {show: true},    // 還原
53                         saveAsImage : {show: true}    // 保存圖片
54                     }
55                 },
56                 calculable : true,    //拖拽重新計算
57                 series : {
58                         name:‘訪問來源‘,
59                         type:‘pie‘,
60                         radius : ["45",‘70%‘],        // 內半徑，外半徑
61 //                        center: [‘50%‘, ‘60%‘],        // 圓心坐標
62                         data: brower
63                     }
64                 });
65             }
66         })

後臺是基於SSM框架寫的，不多敘述，有問題的話歡迎交流。

數據庫如下：

顯示結果：

如果文中有什麽錯誤或問題可以和我交流，郵箱[email protected].

echarts的簡單應用之（二）餅圖