ECharts缩写来自Enterprise Charts,商业级数据图表,是apache的一个开源的使用 Javascript实现的数据可视化工具,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图 形库 ZRender,提供直观、交互丰富、可高度个性化定制的数据可视化图表。
官网 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://gzhdwind.xhstdz.com/news/2657.html
栏目首页
相关文章
动态
同类文章
热门文章
网站地图
返回首页 物流园资讯移动站 http://gzhdwind.xhstdz.com/mobile/ , 查看更多