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

一、需求分析

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

二、代码实现

实现步骤：
步骤一：将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',//触发类型，在饼形图中为item
                    formatter: "{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);

}

步骤六：编写代码，实现

原文地址：https://blog.csdn.net/kong7906928/article/details/143667532

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！