java——插件echarts数据可视化图表库

已于 2023-12-02 20:52:08 修改
阅读量7.9k 收藏 97
点赞数 10
分类专栏： java日常 文章标签： echarts java 数据可视化 插件
于 2021-09-17 05:40:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42858422/article/details/120340964
版权

插件echarts数据可视化图表库

一、使用idea创建javaWeb工程

创建工程，因为我这里已经配置好JDK跟Tomcat服务器了，就直接选择了。

在这里插入图片描述
下一步

在这里插入图片描述
下一步

在这里插入图片描述

项目创建完成了只后，我们创建两个文件夹，分别用来存放编译后的文件，跟jar包
在这里插入图片描述
接着，我们对着两个包进行配置，首先配置classes，选择classes的位置

在这里插入图片描述

下一步，接着配置 lib

在这里插入图片描述
选择对应的位置

在这里插入图片描述

选择，OK，直接无脑下一步

在这里插入图片描述

二、下载echarts导入js文件

去到echarts的官网，点击快速入门

在这里插入图片描述
下一步，我们就拿这个快速上手的例子，绘制一个简单的图表来演示。

在这里插入图片描述
点击这个下载，我们把它整个的压缩包都下载下来，不大，只有7M

在这里插入图片描述

下载解压之后，找到echarts.js复制

在这里插入图片描述
回到我们的idea，我们创建一个js包，粘贴进来。

在这里插入图片描述

三、使用echarts。

我们创建一个servlet

在这里插入图片描述
在web.xml里配置我们的servlet

在这里插入图片描述
接着，我们在index.jsp页面中，弄一个简单的表单，请求的地址是我们刚刚写的servlet。

在这里插入图片描述
再创建一个yanshi.jsp页面，注意，这里我们用到标签库，所以我们要导入依赖的jar包。

在这里插入图片描述

把我们刚刚从echarts首页快速入门看到的例子，拿过来粘贴，修改的只是这一部分，我们不用他原来的数据，我们用我们自己后台的数据。

在这里插入图片描述
启动Tomcat服务器

在这里插入图片描述
效果出来了，数据不是他原来的了，是我们自己从我们的后台拿出来的。。

在这里插入图片描述

特别鸣谢：感谢林老师传授 嘿嘿嘿
————————
创作不易，如觉不错，随手三连点赞，收藏，关注，谢谢~~
五月CG
关注
  • 10
    点赞
  • 踩
  • 97
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts-java
06-21
Echarts
Echarts数据可视化图表案例+数据可视化大屏模板
06-21
18个Echarts数据可视化图表案例，每个案例都有代码注释，简单易懂。 还有三套echarts可视化大屏模板，案例下载后在编辑器内打开html，可以根据需求修改样式和数据，学习echarts绘图，也可以制作新的数据可视化大屏。
Java Web 项目中使用 Echarts 笔记
Jason Weng的博客
10-04 2365
文章目录一、什么是 Echarts1.1 简介1.2 主要实现二、Echarts 的特色三、如何制作一个简单 Echarts 图表3.1 准备放置图表的容器3.2 对容器进行初始化和实例化3.3 添加选项配置并加载生成图表四、Echarts 常用操作4.1 增加新的数据或配置4.2 显示/隐藏加载效果4.3 清空图表和释放图表4.4 图表自适应方法4.5 图表点击事件(事件交互)五、前后端数据交互5.1 前端代码5.2 后端代码六、数据处理问题6.1 JS中将JSON字符串转JSON对象6.2 中文乱码问题
java基于springboot河南省气象数据可视化系统
QQ2083558048的博客
09-09 387
河南省气象数据可视化系统通过对国土气象数据大数据分析统计系统的建设以实现国土气象数据分析统计功能。通过对天气变化市场的充分研究，结合自身技术储备情况，设计并开发了一套基于SpringBoot后台框架、Mybaits数据库映射框架、Redis为缓存中间件、以MySQL为底层数据库，利用Boostrap作为前端布局的河南省气象数据可视化系统。完成了对河南省气象数据可视化系统的需求分析、功能模块实现的划分、Hadoop、SSM的框架搭建、数据库关系分析与设计以及编码的实现。
ECharts-Java使用Java快速开发ECharts图表
dawuafang
01-28 4690
ECharts-Java类库地址：http://git.oschina.net/free/ECharts 百度ECharts地址：http://echarts.baidu.com/ 大概在5个月前的时候，有个项目需要用到图表，百度ECharts很不错，就选择了ECharts。 我的项目是SpringMVC + Mybatis，当从数据库获取数据后，我不知道该如何处理这些数据了，是...
IDEA安装echarts教程保姆级教程
最新发布
weixin_63180557的博客
12-20 983
echarts安装
Echarts-Java 3.0.0.6.jar（附后台生成图片功能）
04-03
在官方代码的基础上增加了后台生成图片的功能，依赖Springboot，启动web服务后，由ImageUtil根据option的内容，生成html临时文件，并调用自带的打开浏览器功能进行预览，在浏览器端生成图片后，将图片的DataUrl发送到后端进行保存。 新增的ImageUtil提供了exportToImage方法，传入option对象（必填）、图片存储路径（选填）、图片名称（选填）、宽高（选填），生成图片后调用浏览器预览功能，等待文件保存完成，如果保存失败，自动重试3次，最后返回图片在服务器上的实际路径，便于后续处理，如导出到Word或Excel中。 后端接收图片的服务器端口和默认图片大小可通过echart.properties文件进行配置： #生成图片的服务器的url echart.server.url=http://localhost:8080 echart.server.action=/echart/saveImage #图片的宽高 echart.height=600 echart.width=800 压缩包中含ECharts-3.0.0.6.jar和ECharts-3.0.0.6-sources.jar
Java ECharts jar包
06-06
ECharts java jar包 直接面向对象生成echart图形对象，java返回的option对象在前台解析为json对象后，直接init就可以生成echart报表。方便快捷。
java图表库_Java版ECharts图表库ECharts-Java
weixin_35712571的博客
02-25 1535
ECharts是一款功能非常强大的JavaScript图表库，本项目是一个供Java开发使用的ECharts的开发包，主要目的是方便在Java中构造ECharts中可能用到的全部数据结构，如完整的结构 Option。Option中的数据Series，包含Bar-柱状图，Line-折线图，Pie-饼图，Chord-和弦图等，支持ECharts中的 所有图表。支持所有的Style类，如AreaStyl...
Pycharm软件的可视化数据库插件使用教程.docx
11-28
Pycharm数据库可视化插件基本使用教程
Echarts可视化工具的使用案例（idea）
11-12
Echart可视化工具的简单实用，本文章采用idea开发环境进行案例实施，运用到javaEE、ajax、serverlet技术
Java基于ECharts的数据可视化疫情分析系统源码.zip
05-28
一个基于ECharts的数据可视化疫情分析系统。涉及java爬虫、MySQL、MyBatis、Springboot等框架。
echarts-java.zip
11-19
用java封装了echarts。只要一行代码就可以得到option对象，大大减少化了后台的代码量和前台的代码量，同时也降低了开发难度，不需要了解太多echarts的知识，便可以以我封装出的组件做出图表。由于时间关系，暂时只封装了常用到的柱状图、柱状堆积图、折线图、面积图、柱状折线混搭图、饼图、环形图、玫瑰图、仪表盘、漏斗图等。代码里有示例。
echarts-Java.rar
03-26
Java后台生成echarts需要的js库: 包括echarts.min.js echarts-convert.js jquery.min.js phantomjs
Echarts数据可视化图表案例
01-11
Echarts数据可视化图表案例：包括柱图，饼图，折线图，地图等数据展示图表；案例下载后直接使用webstrom或idea打开，在编辑器内打开html
基于ECharts数据可视化大屏案例源码
12-03
基于ECharts数据可视化大屏案例源码
echarts数据可视化作业
01-14
echarts数据可视化 作业案例，js，html，css 帮助同学们更好的理解echarts 数据可视化 各个图表都做了案例
Echarts数据可视化通用模板
07-04
Echarts html 相关的 数据可视化通用模板，可借鉴设计
vue中做echarts数据可视化图表网站
06-12
要在Vue中使用echarts进行数据可视化图表，可以按照以下步骤进行： 1. 安装echarts插件：在命令行中运行`npm install echarts --save`，可以安装echarts插件。 2. 创建一个echarts实例：在Vue组件中，可以通过`import echarts from 'echarts'`引入echarts插件，并在`mounted`生命周期中创建一个echarts实例。 3. 设置echarts配置项：可根据需要对echarts配置项进行设置，如图表类型、数据源、样式等。 4. 渲染echarts图表：通过`echarts.init()`函数和`setOption()`函数，将配置项应用到echarts实例中，并渲染echarts图表。 以下是示例代码： ```html <template> <div id="chart" style="width: 600px;height:400px;"></div> </template> <script> import echarts from 'echarts' export default { mounted() { // 创建echarts实例 const chart = echarts.init(document.getElementById('chart')) // 设置echarts配置项 const option = { title: { text: '销售量统计' }, xAxis: { data: ['苹果', '香蕉', '橘子', '梨子', '西瓜'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10] }] } // 渲染echarts图表 chart.setOption(option) } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值