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

一、需求分析

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

二、代码实现

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

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

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

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

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

使用 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的连接问题。 目前…

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

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

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…

小程序源码-模版 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

【Java】-- 异常

1. 异常的概念与体系结构 1.1 异常的概念 在Java中&#xff0c;将程序执行过程中发生的不正常行为称为异常。 public class Test {public static void main(String[] args) {//算术&#xff08;ArithmeticException&#xff09;异常 // int a 5/0; // System.…

从零开始:利用Portainer CE和cpolar搭建NextCloud私有云存储

文章目录 前言1. 在PortainerCE中创建NextCloud容器2. 公网远程访问本地NextCloud容器2.1 内网穿透工具安装3.2 创建远程连接公网地址 3. 固定NextCloud私有云盘公网地址 前言 本文将介绍如何在本地利用Portainer CE的可视化界面创建NextCloud私有云盘容器&#xff0c;并通过c…

[安洵杯 2019]easy_web 详细题解

知识点: 编码转换 命令执行 linux空格_关键字绕过 打开页面 发现url 是 /index.php?imgTXpVek5UTTFNbVUzTURabE5qYz0&cmd 有img参数和cmd参数 cmd参数是没赋值的,随便赋值为123456 页面没有反应 鼠标移动到图片下面时发现有东西,当然直接查看页面源代码也可以发现 尝…

第2章 数据的表示和运算

王道学习 考纲内容 &#xff08;一&#xff09;数制与编码 进位计数制及其相互转换&#xff1b;定点数的编码表示 &#xff08;二&#xff09;运算方法和运算电路 基本运算部件&#xff1a;加法器&#xff1b;算术逻辑单元&#xff08;ALU&#xff09;…

Web3 游戏周报(11.03 - 11.09)

回顾上周的区块链游戏概况&#xff0c;查看 Footprint Analytics 与 ABGA 最新发布的数据报告。 【11.03 - 11.09】Web3 游戏行业动态&#xff1a; Ton Accelerator 推出名为「Synergy」的 500 万美元计划&#xff0c;旨在推动跨链创新&#xff0c;创造 TON 用户与 EVM 网络适应…

数据分析:16s差异分析DESeq2 | Corncob | MaAsLin2 | ALDEx2

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍DESeq2原理计算步骤结果Corncob原理计算步骤结果MaAsLin2原理计算步骤结果ALDEx2原理计算步骤结果加载R包数据链接数据预处理微生物数据样本信息提取物种名称过滤零值保留结果读取…

H.264/H.265播放器EasyPlayer.js无插件H5播放器关于WASM的压缩优化

在当今的Web开发领域&#xff0c;流媒体播放器的性能和效率至关重要&#xff0c;尤其是在处理大型视频文件和高分辨率视频流时。EasyPlayer.js RTSP播放器作为一款先进的流媒体播放器&#xff0c;它在WebAssembly&#xff08;WASM&#xff09;的压缩优化方面表现出色&#xff0…

使用 Python 从 REST URL 下载文件

使用 Python 从 REST URL 下载文件&#xff0c;可以使用 requests 库来简化文件的下载和保存过程。以下是一个示例代码&#xff0c;展示了如何从给定的 REST API 或 URL 下载文件并保存到本地。 1、问题背景 我们需要编写一个脚本&#xff0c;从一个支持 REST URL 的网站下载一…

SpringMVC学习记录(三)之响应数据

SpringMVC学习记录&#xff08;三&#xff09;之响应数据 一、页面跳转控制1、快速返回模板视图2、转发和重定向 二、返回JSON数据1、前置准备2、ResponseBody 三、返回静态资源1、静态资源概念2、访问静态资源 /*** TODO: 一个controller的方法是控制层的一个处理器,我们称为h…