相关动态
百度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://fswenzheng.xhstdz.com/news/2657.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 物流园资讯移动站 http://fswenzheng.xhstdz.com/mobile/ , 查看更多   
最新文章
百度竞价的价格排名如何查看?切实有效的查询途径
百度竞价的价格排名如何查看?切实有效的查询途径:百度推广账户后台中关键词的价格近似于真实出价的价格,而且在账户的后台,存
防止人肉搜索/保护个人隐私,Google Voice教程/GV号小白使用经验分享
    最近一段时间,大家上网越来越注重个人隐私了,我当然也一样。    就在今年早些时候,我微博账号被冻结,创建新号的
掌握百度收录规则:优质内容与创新性助力网站成功收录
百度收录有其特定的规则,这对网站制作人员和内容制作者来说极为关键。掌握这些规则,能让更多人的目光落在自己的网页或文章上。
搜狐简单AI:开启AI绘画和文生图的新时代,提升创作效率
在一个充满竞争的数字时代,许多创作者深感压力,尤其是那些需要频繁生产高质量内容的个体。在这样的背景下,AI技术的崛起为创造
AI大模型与网球运动结合的应用场景及案例分析
        AI大模型与网球运动结合的未来前景是广阔的,它不仅能够提升运动员的训练和比赛表现,还能改善教练
最值得一看的精品网站之一,你绝不能错过!
在现代网络文学的浪潮中,精品小说层出不穷,吸引了无数读者的目光。推荐几部不可错过的网络佳作:首先是《全职高手》,讲述了电
郑州SEO优化攻略,揭秘助力企业网络飞跃的策略精髓
郑州SEO网络优化推广,为企业提供专业网络策略,提升网站排名,增强品牌曝光度。通过精准关键词、高质量内容、优化用户体验,助
揭秘网站刷关键词排名软件,效果与风险并存
随着互联网的飞速发展,网络营销已经成为企业推广产品和服务的重要手段,在众多网络营销策略中,提高网站在搜索引擎中的关键词排
科大讯飞AI智能写作:全方位助力文案创作与优化,解决多种写作需求
在数字化浪潮的推动下智能写作成为了提升工作效率、优化内容品质的关键工具。科大讯飞智能写作以其强大的语言解决能力和丰富的创
支付宝小程序搜索排名优化,算法规则基础了解
小程序市场可谓是百花齐放,争奇斗艳。小程序搜索排名优化则为小程序获利提供了强大的支持。做优化首先要知道平台的规则&#
相关文章