Javaweb使用Echart繪制扇形統計圖

需要導入的轉換JSON的依賴包：百度網盤鏈接: https://pan.baidu.com/s/1c3UMzCjJZ_-c5-uEy4t_9A  提取碼: uqmj

功能：從數據庫查詢不同年度的數據並繪制扇形圖

servlet：

    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        QueryFromMySql queryFromMySql=new QueryFromMySql();
        ArrayList<LeiXinTj> leiXinTjs=queryFromMySql.QueryBySend_time();   //查詢數據庫得到的結果
        response.setContentType("text/html; charset=utf-8");
        JSONArray jsonArray=JSONArray.fromObject(leiXinTjs);   //將數據轉為json類型
        System.out.println(jsonArray.toString());
        PrintWriter writer = response.getWriter();
        writer.println(jsonArray);
        writer.flush();
        writer.close();
    }
　　數據庫的查詢結果：

html：

<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
window.onload=function(){
    jQuery(document).ready(function($) {
         
         var myChart = echarts.init(document.getElementById('container'));
         var nav=document.getElementById("nav");
            var reg = new RegExp("(d=)([a-z]*)");
            var str=window.location.search.substr(1).match(reg);
                nav.innerHTML='<i class="Hui-iconfont">&#xe67f;</i> 首頁 <span class="c-gray en">&gt;</span> 年度統計<span class="c-gray en">&gt;</span> 統計圖 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>';
         
//圖表的配置項設置
var  option = {
            title : {   //圖表顯示的標題
                text: '年度統計(2016-11-22到2020-02-13)',
                subtext: '真實數據',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {   //圖表中顯示的一個個小格子 
                orient: 'vertical',
                left:20,
                data:[]
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                       // type: ['pie', 'funnel']
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [    //扇形的設置
                {
                    name:'年度統計',
                    type:'pie',
                    radius: ['20%', '75%'],
                    center : ['50%', '60%'],
                    x: '50%',               // for funnel
                    max: 40,                // for funnel
                    sort : 'ascending',     // for funnel
                    data:[]
                }
            ]
        };
         
         
        //調用設置函數
        myChart.setOption(option);

        $.ajax({    //用Ajax將上面servlet轉換的json數據導入數據設置中
            type : "post",
            async : true,
            url : "../QueryBySend_time",
            type:"POST",
            data:
                {
                "method":"shan"
                },
            dataType:"json",
            
            success:function(result) {
               // alert(result.selected);
                if(result)
                {
                        var d=result;
                        var leblist = [];
                        var valuelist2 = [];
                     
                    for(var i=0;i<d.length;i++){
                     
                             var m={};
                             
                            m["value"]=d[i].num;
                            m["name"]=d[i].name;
                            
                            valuelist2.push(m);   //扇形顯示的數據
                            leblist.push(d[i].name);  //扇形旁邊顯示的小格子的數據

                    }
                     
                    // 將數據添加到數據圖表中
                        myChart.setOption({
                            legend: {
                                data:leblist
                            },
                            series: [
                            {
                                name:'年度統計',
                                data: valuelist2
                            }]
                        });
                          
           }
            },
            error : function(errorMsg) {
                //請求失敗時執行該函數
            alert("請求數據失敗!");
           // myChart.hideLoading();
            }
        });
        //獲取和處理數據
         
        });
}
</script>
<body>
<nav class="breadcrumb" id="nav">
</nav>
<div class="page-container">
    <div id="container" style="min-width:700px;height:400px"></div>
</div>

效果圖：