使用Echarts图表动态加载饼图数据 pie

---

* Echarts简介*

ECharts是一款开源、功能强大的数据可视化产品。
—— [ Echarts官网 ]

---

具体实现代码如下：

HTML代码:

    
<div id="main" style="height:300px;width:500px;">div>
   
   
   
   

    
    
    
    
1
    
    
    
    
2
   
   
   
   

JavaScript代码:

•  1.写入ajax代码通过servlet获取Json数据

<script type="text/javascript">

$.ajax({
    type : 'post',
    async : false, //同步执行
        url :'adm_index/goods.ad', //web.xml中注册的Servlet的url-pattern
        data : {}, //无参数
        dataType : 'json', //返回数据形式为json
        success : function(result) {
            if (result) {
                //把result(即Json数据)以参数形式放入Echarts代码中
                bind(result);
            }
        },
        error : function(errorMsg) {
            alert("加载数据失败");
        }
    }); //ajax
script>


   
   
   
   

    
    
    
    
1
    
    
    
    
2
    
    
    
    
3
    
    
    
    
4
    
    
    
    
5
    
    
    
    
6
    
    
    
    
7
    
    
    
    
8
    
    
    
    
9
    
    
    
    
10
    
    
    
    
11
    
    
    
    
12
    
    
    
    
13
    
    
    
    
14
    
    
    
    
15
    
    
    
    
16
    
    
    
    
17
    
    
    
    
18
    
    
    
    
19
    
    
    
    
20
    
    
    
    
21
    
    
    
    
22
   
   
   
   

-  2.把Json数据传入Echarts代码当中

<script type="text/javascript">

//JS成功后的代码
function bind(result){
    // 基于准备好的dom，初始化echarts图表
    var TypeSalesChart = echarts.init(document.getElementById('main'));
    var option = {
        tooltip : {
        trigger: 'item',
        formatter: "{a} 
{b} : {c} ({d}%)"
     },
    legend: {
            orient : 'vertical',
            x : 'left',
            data:(function(){
                    var res = [];
                    var len = result.length;
                        for(var i=0,size=len;ireturn res;
                })()

        },
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:(function(){
                    var res = [];
                    var len = result.length;
                        for(var i=0,size=len;i//通过把result进行遍历循环来获取数据并放入Echarts中
                             name: result[i].typeName,
                             value: result[i].sales
                         });
                        }
                        return res;
                })()
            }
        ]
    };
    // 为echarts对象加载数据 
    TypeSalesChart.setOption(option);
}

script>


   
   
   
   

    
    
    
    
1
    
    
    
    
2
    
    
    
    
3
    
    
    
    
4
    
    
    
    
5
    
    
    
    
6
    
    
    
    
7
    
    
    
    
8
    
    
    
    
9
    
    
    
    
10
    
    
    
    
11
    
    
    
    
12
    
    
    
    
13
    
    
    
    
14
    
    
    
    
15
    
    
    
    
16
    
    
    
    
17
    
    
    
    
18
    
    
    
    
19
    
    
    
    
20
    
    
    
    
21
    
    
    
    
22
    
    
    
    
23
    
    
    
    
24
    
    
    
    
25
    
    
    
    
26
    
    
    
    
27
    
    
    
    
28
    
    
    
    
29
    
    
    
    
30
    
    
    
    
31
    
    
    
    
32
    
    
    
    
33
    
    
    
    
34
    
    
    
    
35
    
    
    
    
36
    
    
    
    
37
    
    
    
    
38
    
    
    
    
39
    
    
    
    
40
    
    
    
    
41
    
    
    
    
42
    
    
    
    
43
    
    
    
    
44
    
    
    
    
45
    
    
    
    
46
    
    
    
    
47
    
    
    
    
48
    
    
    
    
49
    
    
    
    
50
    
    
    
    
51
    
    
    
    
52
    
    
    
    
53
    
    
    
    
54
    
    
    
    
55
   
   
   
   

* 上面就是以最简单的方式显示饼状图数据了，如果有问题欢迎在下方评论，谢谢！*