使用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;

    }