一、需求分析
会员可以通过移动端自助进行体检预约，在预约时需要选择预约的体检套餐。我们要通过饼形图直观的展示出会员预约的各个套餐占比情况。
二、代码实现
实现步骤：
步骤一：将echarts.js文件复制到工程的plugins目录下
步骤二：在页面引入echarts.js文件
<script src="../plugins/echarts/echarts.js"></script>
步骤三：参照官方实例导入折线图
<div class="box"><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="chart1" style="height:600px;"></div>
</div> <script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart1 = echarts.init(document.getElementById('chart1'));// 使用刚指定的配置项和数据显示图表。//myChart.setOption(option);axios.get("/report/getExaminationReport.do").then((res)=>{myChart1.setOption({title : {text: '套餐预约占比',subtext: '',x:'center'},tooltip : {//提示框组件trigger: 'item',//触发类型，在饼形图中为itemformatter: "{a} <br/>{b} : {c} ({d}%)"//提示内容格式},legend: {//图例orient: 'vertical',left: 'left',data: res.data.data.setmealNames},series : [//数据系列{name: '套餐预约占比',type: 'pie',//饼形图radius : '55%',center: ['50%', '60%'],data:res.data.data.setmealCount,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});});</script>步骤四：根据饼形图对数据格式的要求，我们发送ajax请求，服务端需要返回如下格式的数据：
{"data":{"setmealNames":["套餐1","套餐2","套餐3"],"setmealCount":[{"name":"套餐1","value":10},{"name":"套餐2","value":30},{"name":"套餐3","value":25}]},"flag":true,"message":"获取套餐统计数据成功"
}步骤五：编写controller代码，编写测试数据 测试
@RequestMapping("/getExaminationReport")public Result getExaminationReport(){//使用模拟数据测试Map<String,Object> data = new HashMap<>();List<String> setmealNames = new ArrayList<>();setmealNames.add("体检套餐");setmealNames.add("孕前检查套餐");data.put("setmealNames",setmealNames);List<Map<String,Object>> setmealCount = new ArrayList<>();Map map1 = new HashMap();map1.put("name","体检套餐");map1.put("value",200);Map map2 = new HashMap();map2.put("name","孕前检查套餐");map2.put("value",300);setmealCount.add(map1);setmealCount.add(map2);data.put("setmealCount",setmealCount);return new Result(true,MessageConstant.GET_SETMEAL_COUNT_REPORT_SUCCESS,data);}步骤六：编写代码，实现
