相关动态
百度ECharts图形报表的介绍以及应用案例理解
2024-11-10 17:30

ECharts缩写来自Enterprise Charts,商业级数据图表,是apache的一个开源的使用 Javascript实现的数据可视化工具,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等,底层依赖轻量级的矢量图 形库 ZRender,提供直观、交互丰富、可高度个性化定制的数据可视化图表。

百度ECharts图形报表的介绍以及应用案例理解

官网 https://echarts.apache.org/zh/index.html

下载地址:https://echarts.apache.org/zh/download.html

解压后的文件中只需要将echarts.js 导入到工程中即可

通过标签方式直接引入构建好的 echarts 文件

 

为 ECharts 准备一个具备高宽的 DOM 容器。

 

通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图

 

效果如下

通过官方案例我们可以发现,使用ECharts展示图表效果,关键点在于确定此图表所需的 数据格式,然后按照此数据格式提供数据就可以了,我们无须关注效果是如何渲染出来 的。在实际应用中,我们要展示的数据往往存储在数据库中,所以我们可以发送ajax请求获取 数据库中的数据并转为图表所需的数据即可。

1、使用Echarts绘制会员数量的折线图

前端代码
 

需要的json格式数据为:

 
后端代码

controller

 

接口中方法

 

实现类

 

2、绘制饼图

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

前端代码
 
后台代码

controller

 

接口方法

 

接口方法实现

 

Mapper的接口中添加方法

 

Mapper.xml的sql内容

 

加方法**

 

Mapper.xml的sql内容

    以上就是本篇文章【百度ECharts图形报表的介绍以及应用案例理解】的全部内容了,欢迎阅览 ! 文章地址:http://yybeili.xhstdz.com/news/2657.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 物流园资讯移动站 http://yybeili.xhstdz.com/mobile/ , 查看更多   
最新文章
国际站:SEO Checker诊断工具助力商家诊断详情页,提升seo效果
国际站商家看过来:众所周知,一个优质的商品描述,可以提升买家转化的同时,还可以带来更多免费流量,从而让商家获得更多询盘和
【富蕴网站优化】在网站优化中有哪些常用的网站推广方式?
1、,百度,google的优化,针对,音乐,mp3下载,电影、游戏等一级,二级,甚至关键字优化。Seo介绍的网站很多,就不在这里重复
公众号简单爬虫--把公众号文章全部转载到网站(二)
根据上一篇的方法,我们得到了一个获取列表信息的地址,而且是用get方法就可以的地址.那么事情就变得很简单了,就是常规的爬取信息
1.【typecho】个人博客安装—使用群晖演示
哈喽,大家好今天给大家带来的是最近在群晖上安装一个博客的演示。先给大家看一下安装好之后的效果。虽然说现在使用博客和看博客
SEO优化攻略,揭秘网站排名提升与流量最大化技巧
本文深入解析SEO优化策略,通过关键词研究、高质量内容创作、链接建设等技术手段,帮助提升网站在搜索引擎中的排名,从而实现流
【HMNOTE搜狗手机输入法下载】小米HMNOTE搜狗手机输入法12.1.1免费下载
搜狗输入法,拥有超大中文词库,输入更加精准,智能。搜狗智能旺仔带你用表达,斗图,妙语,输入更加有趣。******特色功能******
vivo S19 Pro:全焦段人像拍照的5G游戏续航新宠
在智能手机市场日益同质化的今天,vivo S19 Pro以其独特的全焦段人像拍照功能、强大的5G性能以及出色的游戏续航能力,成为了众多
12月12日,星期四, 每天60秒读懂全世界!
新闻来源:百度热搜榜1. 25年老员工被开除 法院判赔98万近日,工作25年的李某被安排学习员工手册,全程玩手机遭公司开除,引发热
刚子扯谈:网站运营在左 技术在右 真TM扯
2013年8月5日,雨未下,天猴焖开片语:今天的扯谈内容是我转载我Java学习交流群里面一个哥们,当然我推荐他加入了朋友的网络分析
做seo营销网站/百度惠生活商家入驻
假定我们定义了一个Persion的message type,我们的用法可能如下定义 和 package tutorial;message Person {required int
相关文章