使用echarts绘制饼状图

Posted 2021-03-08 zeevy

前端代码：

 1 <script src="${ctx}/static/plugin/echarts/echarts-v4.2.0/echarts.common.min.js"></script>
 2  <div id="main" style="width: 600px;height:400px;"></div>
 3 <script type="text/javascript">
 4     /* 基于准备好的dom，初始化echarts实例 */
 5     var myChart = echarts.init(document.getElementById(‘main‘));
 6     /* 核心显示设置 */
 7     var option = {
 8             /* 标题设置 */
 9             title : {
10                 text: ‘配货比例统计‘,
11                 x:‘center‘
12             },
13             tooltip : {
14                 trigger: ‘item‘,
15                 formatter: "{a} <br/>{b} : {c} ({d}%)"
16             },
17             /* 颜色和选项的对应关系 */
18             legend: {
19                 orient: ‘vertical‘,
20                 left: ‘left‘,
21                 data: []            //待填充数据项1
22             },
23             /* 内容显示 */
24             series : [
25                 {
26                     name: ‘比例‘,      //鼠标移至不同扇形区提示信息的标题
27                     type: ‘pie‘,    //指定数据生成的图表类型
28                     radius : ‘55%‘,
29                     center: [‘50%‘, ‘60%‘],
30                     data:[],         //待填充数据项2
31                     /* 阴影区域设置 */
32                     itemStyle: {
33                         emphasis: {
34                             shadowBlur: 10,
35                             shadowOffsetX: 0,
36                             shadowColor: ‘rgba(0, 0, 0, 0.5)‘
37                         }
38                     }
39                 }
40             ]
41         };
42     /* 发送ajax请求 */
43     var data = {};
44     //发送key-value类型的请求数据
45         //例如：data.xxx = 1;
46     $.ajax({
47         type: "POST",
48           //当发送json数据时添加：
49            /*  contentType: "application/json; charset=utf-8", */
50         url: "${ctx}/ksCunhuo/getChart.mvc",
51         data: data,
52         error: function (data) {
53             alert("出错了！" );
54         },
55         success: function (data) {
56             //对echarts模板进行数据填充 
57             option.legend.data = data.title;
58             option.series[0].data = data.number; 
59               //重新加载图表显示
60             myChart.setOption(option);
61         }
62     });
63 </script>

后台代码：

1.实体类Item

 1 public class Item {
 2     
 3     private List<String> title;
 4     private List<HashMap<String, Object>> number;
 5     
 6     public List<String> getTitle() {
 7         return title;
 8     }
 9     public void setTitle(List<String> title) {
10         this.title = title;
11     }
12     public List<HashMap<String, Object>> getNumber() {
13         return number;
14     }
15     public void setNumber(List<HashMap<String, Object>> number) {
16         this.number = number;
17     }    
18  
19 }

2.controller层代码：

 1 @RequestMapping("getChart")
 2     @ResponseBody
 3     public Item  getChart(){
 4         Map<String, Object> keyMap = new HashMap<String, Object>();
 5         //构建返回的数据项
 6         List<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
 7         List<String> names = new ArrayList<String>();
 8         names.add("已配货比例");
 9         names.add("未配货比列");
10         //模拟数据
11         try {
12             List list1 = ksCunhuoService.findByQuery1();
13             List list2 = ksCunhuoService.findAll1();
14             double len1 = list1.size();
15             double len2 = list2.size();
16             double d1 = len1/len2;
17             double d2 = (len2-len1)/len2;
18             int data1 =  (int) (d1*100);
19             int data2 =  (int) (d2*100);
20             for (String name : names) {
21                 HashMap<String, Object> vals = new HashMap<String, Object>();
22                     vals.put("name", name);
23                     if("已配货比例".equals(name)) {
24                         vals.put("value", data2);
25                     } else {
26                          vals.put("value", data1);
27                     }
28                     list.add(vals);
29                 }
30         } catch (Exception e) {
31             // TODO Auto-generated catch block
32             e.printStackTrace();
33         } 
34        //封装成pojo对象
35        Item item = new Item ();
36        item.setNumber(list);
37        item.setTitle(names);
38        return item;
39 
40     }