项目功能--套餐预约占比饼形图

一、需求分析

        会员可以通过移动端自助举行体检预约，在预约时必要选择预约的体检套餐。我们要通过饼形图直观的展示出会员预约的各个套餐占比情况。
二、代码实现

实现步骤：
步骤一：将echarts.js文件复制到工程的plugins目录下
步骤二：在页面引入echarts.js文件

1. <script src="../plugins/echarts/echarts.js"></script>

复制代码

步骤三：参照官方实例导入折线图

1. <div class="box">
2.   <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
3.   <div id="chart1" style="height:600px;"></div>
4. </div>

复制代码

1.     <script type="text/javascript">
2.         // 基于准备好的dom，初始化echarts实例
3.         var myChart1 = echarts.init(document.getElementById('chart1'));
4.         // 使用刚指定的配置项和数据显示图表。
5.         //myChart.setOption(option);
6.         axios.get("/report/getExaminationReport.do").then((res)=>{
7.             myChart1.setOption({
8.                 title : {
9.                     text: '套餐预约占比',
10.                     subtext: '',
11.                     x:'center'
12.                 },
13.                 tooltip : {//提示框组件
14.                     trigger: 'item',//触发类型，在饼形图中为item
15.                     formatter: "{a} <br/>{b} : {c} ({d}%)"//提示内容格式
16.                 },
17.                 legend: {//图例
18.                     orient: 'vertical',
19.                     left: 'left',
20.                     data: res.data.data.setmealNames
21.                 },
22.                 series : [//数据系列
23.                     {
24.                         name: '套餐预约占比',
25.                         type: 'pie',//饼形图
26.                         radius : '55%',
27.                         center: ['50%', '60%'],
28.                         data:res.data.data.setmealCount,
29.                         itemStyle: {
30.                             emphasis: {
31.                                 shadowBlur: 10,
32.                                 shadowOffsetX: 0,
33.                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
34.                             }
35.                         }
36.                     }
37.                 ]
38.             });
39.         });
40.     </script>

复制代码

步骤四：根据饼形图对数据格式的要求，我们发送ajax请求，服务端必要返回如下格式的数据：

1. {
2.     "data":{
3.             "setmealNames":["套餐1","套餐2","套餐3"],
4.             "setmealCount":[
5.                             {"name":"套餐1","value":10},
6.                             {"name":"套餐2","value":30},
7.                             {"name":"套餐3","value":25}
8.                            ]
9.            },
10.     "flag":true,
11.     "message":"获取套餐统计数据成功"
12. }

复制代码

步骤五：编写controller代码，编写测试数据 测试

1. @RequestMapping("/getExaminationReport")
2.     public Result getExaminationReport(){
3.         //使用模拟数据测试
4.         Map<String,Object> data = new HashMap<>();
6.         List<String> setmealNames = new ArrayList<>();
7.         setmealNames.add("体检套餐");
8.         setmealNames.add("孕前检查套餐");
9.         data.put("setmealNames",setmealNames);
11.         List<Map<String,Object>> setmealCount = new ArrayList<>();
13.         Map map1 = new HashMap();
14.         map1.put("name","体检套餐");
15.         map1.put("value",200);
17.         Map map2 = new HashMap();
18.         map2.put("name","孕前检查套餐");
19.         map2.put("value",300);
21.         setmealCount.add(map1);
22.         setmealCount.add(map2);
23.         data.put("setmealCount",setmealCount);
24.         return new Result(true,MessageConstant.GET_SETMEAL_COUNT_REPORT_SUCCESS,data);
26. }

复制代码

步骤六：编写代码，实现




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。