推广 热搜: 行业  设备    系统  参数  经纪    教师  机械  中国 

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

   日期:2024-11-10     作者:n19v1    caijiyuan   评论:0    移动:http://dh99988.xhstdz.com/mobile/news/2657.html
核心提示:ECharts缩写来自Enterprise Charts,商业级数据图表,是apache的一个开源的使用 JavaScript实现的数据可视化工具&#x

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内容

本文地址:http://dh99988.xhstdz.com/news/2657.html    物流园资讯网 http://dh99988.xhstdz.com/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

 
 
更多>同类最新文章
0相关评论

文章列表
相关文章
最新动态
推荐图文
最新文章
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号