使用echarts繪制餅狀圖

前端代碼：

<script src="${ctx}/static/plugin/echarts/echarts-v4.2.0/echarts.common.min.js"></script>
 <div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    /* 基於准備好的dom，初始化echarts實例 */
    var myChart = echarts.init(document.getElementById('main'));
    /* 核心顯示設置 */
    var option = {
            /* 標題設置 */
            title : {
                text: '配貨比例統計',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            /* 顏色和選項的對應關系 */
            legend: {
                orient: 'vertical',
                left: 'left',
                data: []            //待填充數據項1
            },
            /* 內容顯示 */
            series : [
                {
                    name: '比例',      //鼠標移至不同扇形區提示信息的標題
                    type: 'pie',    //指定數據生成的圖表類型
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[],         //待填充數據項2
                    /* 陰影區域設置 */
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
    /* 發送ajax請求 */
    var data = {};
    //發送key-value類型的請求數據
        //例如：data.xxx = 1;
    $.ajax({
        type: "POST",
          //當發送json數據時添加：
           /*  contentType: "application/json; charset=utf-8", */
        url: "${ctx}/ksCunhuo/getChart.mvc",
        data: data,
        error: function (data) {
            alert("出錯了！" );
        },
        success: function (data) {
            //對echarts模板進行數據填充 
            option.legend.data = data.title;
            option.series[0].data = data.number; 
              //重新加載圖表顯示
            myChart.setOption(option);
        }
    });
</script>

后台代碼：

1.實體類Item

public class Item {
    
    private List<String> title;
    private List<HashMap<String, Object>> number;
    
    public List<String> getTitle() {
        return title;
    }
    public void setTitle(List<String> title) {
        this.title = title;
    }
    public List<HashMap<String, Object>> getNumber() {
        return number;
    }
    public void setNumber(List<HashMap<String, Object>> number) {
        this.number = number;
    }    
 
}

2.controller層代碼：

@RequestMapping("getChart")
    @ResponseBody
    public Item  getChart(){
        Map<String, Object> keyMap = new HashMap<String, Object>();
        //構建返回的數據項
        List<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
        List<String> names = new ArrayList<String>();
        names.add("已配貨比例");
        names.add("未配貨比列");
        //模擬數據
        try {
            List list1 = ksCunhuoService.findByQuery1();
            List list2 = ksCunhuoService.findAll1();
            double len1 = list1.size();
            double len2 = list2.size();
            double d1 = len1/len2;
            double d2 = (len2-len1)/len2;
            int data1 =  (int) (d1*100);
            int data2 =  (int) (d2*100);
            for (String name : names) {
                HashMap<String, Object> vals = new HashMap<String, Object>();
                    vals.put("name", name);
                    if("已配貨比例".equals(name)) {
                        vals.put("value", data2);
                    } else {
                         vals.put("value", data1);
                    }
                    list.add(vals);
                }
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } 
       //封裝成pojo對象
       Item item = new Item ();
       item.setNumber(list);
       item.setTitle(names);
       return item;

    }