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

一、需求分析

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

二、代码实现

实现步骤:
步骤一:将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);}

步骤六:编写代码,实现

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/885674.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多媒体信息检索

文章目录 一、绪论二、文本检索 (Text Retrieval)(一) 索引1.倒排索引2.TF-IDF (二) 信息检索模型 (IR模型&#xff0c;Information Retrieval)1.布尔模型 (Boolean模型)(1)扩展的布尔模型 (两个词)(2)P-Norm模型 (多个词) 2.向量空间模型 (Vector Space Model&#xff0c;VSM)…

gan的所有种类,人工智能 机器学习,gan的所有算法

参考最全汇总GAN网络及其各种变体&#xff08;附论文及代码实现&#xff09;_gan网络代码-CSDN博客 这是我找到的关于您提问的答案: 1. **GAN类型**: Auxiliary Classifier GAN **参考论文**: 《Conditional Image Synthesis With Auxiliary Classifier GANs》 **代码地址**: …

【漏洞复现】万户OA-ezOFFICE getAutoCode.jsp Sql注入漏洞

免责声明: 本文旨在提供有关特定漏洞的信息,以帮助用户了解潜在风险。发布此信息旨在促进网络安全意识和技术进步,并非出于恶意。读者应理解,利用本文提到的漏洞或进行相关测试可能违反法律或服务协议。未经授权访问系统、网络或应用程序可能导致法律责任或严重后果…

在vscode中如何利用git 查看某一个文件的提交记录

在 Visual Studio Code (VSCode) 中&#xff0c;你可以使用内置的 Git 集成来查看某个文件的提交历史。以下是具体步骤&#xff1a; 使用 VSCode 内置 Git 功能 打开项目&#xff1a; 打开你的项目文件夹&#xff0c;确保该项目已经是一个 Git 仓库&#xff08;即项目根目录下…

vue2 -- el-form组件动态增减表单项及表单项验证

需求 在数据录入场景(如订单信息录入)中,可根据实际情况(如商品种类增加)动态添加表单项(如商品相关信息)。包含必填项验证和数据格式验证(如邮箱、电话格式),防止错误数据提交。 效果 代码一 <template><div>

【uiautomator】自动化测试camera【一】

文章目录 1 概述2 准备工作3 写个demo 1 概述 本文档是自己写andorid camera自动化测试的随笔 测试机器为 OPPO Find x7 测试Apk为oppo的系统相机. 2 准备工作 我电脑是有装conda环境的,所以我直接用conda创建虚拟环境专门用于相关的测试. https://mirrors.tuna.tsinghua.ed…

使用 Elasticsearch 构建食谱搜索(一)

作者&#xff1a;来自 Elastic Andre Luiz 了解如何使用 Elasticsearch 构建基于语义搜索的食谱搜索。 简介 许多电子商务网站都希望增强其食谱搜索体验。正确使用语义搜索可以让客户根据更自然的查询&#xff08;例如 “something for Valentines Day - 情人节的礼物” 或 “…

SystemVerilog学习笔记(七):函数与任务

函数 函数的主要用途是编写一段可以随时调用n次的代码&#xff0c;只需调用函数名即可&#xff0c;不需要任何模拟时间来执行。函数是返回类型&#xff0c;仅返回函数声明中提到的单个值&#xff0c;如果未声明则返回一个位的值。 语法&#xff1a; initial begin functio…

物理验证Calibre LVS | SMIC Process过LVS时VNW和VPW要如何做处理?

SMIC家工艺的数字后端实现PR chipfinish写出来的带PG netlist如下图所示。我们可以看到标准单元没有VNW和VPW pin的逻辑连接关系。 前几天小编在社区星球上分享了T12nm ananke_core CPU低功耗设计项目的Calibre LVS案例&#xff0c;就是关于标准单元VPP和VBB的连接问题。 目前…

【编程概念基础知识】

、编程基础 一、面向对象的三大特性 1、封装&#xff1a; 盒子、零件、按钮 隐藏对象 的内部状态&#xff0c;并且只通过对象的方法来访问数据 想象你有一个小盒子&#xff08;这个盒子就是一个类&#xff09;&#xff0c;里面装着一些零件&#xff08;这些零件就是数据&a…

Oracle 第23章:大数据与NoSQL集成

第23章 大数据与NoSQL集成 在当今的数字化时代&#xff0c;数据量的爆炸性增长给传统的关系型数据库带来了前所未有的挑战。为了应对这些挑战&#xff0c;NoSQL&#xff08;Not Only SQL&#xff09;数据库应运而生&#xff0c;它提供了灵活的数据模型和可扩展的架构来处理大规…

纯前端实现在线预览excel文件(插件: LuckyExcel、Luckysheet)

概述 在实际开发中&#xff0c;遇到需要在线预览各种文件的需求&#xff0c;最近遇到在线预览excel文件的需求&#xff0c;在此记录一下&#xff01;本文主要功能实现&#xff0c;用于插件 LuckyExcel &#xff0c;Luckysheet&#xff01;废话不多说&#xff0c;上代码&#xf…

实验05多重循环---7-09 打印金字塔图案

打印一个由 m 行字符 * 组成的金字塔形图案。 输入格式: 输入一个整数&#xff0c;表示行数 m&#xff0c;其中 m 满足 2≤m≤10。 输出格式: 由字符 * 组成的 m 行金字塔形图案。 输入样例: 5 输出样例: **************** *********//自己写的 #define _CRT_SECURE_NO_WAR…

LocalDate和LocalDateTime类

在Java 8中引入的LocalDate表示一个格式为yyyy-MM-dd的日期&#xff0c;如2024-06-13。它不存储时间或时区。我们可以从LocalDate中获取许多其他的日期字段&#xff0c;如年日(day-of-year)、周日(day-of-week)、月日(month-of-year)等等。 1 初始化 LocalDate以年月日的格式输…

信息安全工程师(82)操作系统安全概述

一、操作系统安全的概念 操作系统安全是指操作系统在基本功能的基础上增加了安全机制与措施&#xff0c;从而满足安全策略要求&#xff0c;具有相应的安全功能&#xff0c;并符合特定的安全标准。在一定约束条件下&#xff0c;操作系统安全能够抵御常见的网络安全威胁&#xff…

gitlab ci/cd搭建及使用笔记

记录下使用gitlab的ci/cd的devops构建过程中&#xff0c;一些易忘点或者踩坑点&#xff1a; 官方文档中英文&#xff08;建议英文&#xff09; https://docs.gitlab.com/ee/ci/yaml/artifacts_reports.html https://gitlab.cn/docs/jh/ci/pipelines/schedules.html为什么创建了…

SQL注入(SQL Injection)详解

SQL注入&#xff08;SQL Injection&#xff09;是一种代码注入技术&#xff0c;它通过在应用程序的输入字段中插入或“注入”恶意的SQL语句&#xff0c;从而操控后端数据库服务器执行非预期的命令。这种攻击方式常用于绕过应用程序的安全措施&#xff0c;未经授权地访问、修改或…

小程序源码-模版 100多套小程序(附源码)

一、搭建开发环境 搭建环境可以从这里开始&#xff1a; 微信小程序从零开始开发步骤&#xff08;一&#xff09;搭建开发环境 - 简书 二、程序示例 1、AppleMusic https://download.csdn.net/download/m0_54925305/89977187 2、仿B站首页 https://download.csdn.net/downlo…

安装baidubce库

直接pip install baidubce会带来一系列后续文件缺失问题&#xff0c;应该&#xff1a; pip install bce-python-sdk

【鉴权】提升 JWT 安全性的最佳实践:防范常见风险与应对策略

目录 引言一、JWT简介二、JWT的安全风险与防护措施2.1 签名算法不安全2.2 中间人攻击&#xff08;MITM&#xff09;2.3 重放攻击2.4 防止JWT泄露2.5 密钥管理与轮换2.6 验证JWT的来源和受众2.7 监控与审计 三、提高 JWT 安全性的关键措施3.1 选择安全的签名算法3.2 强制使用 HT…