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

插件echarts数据可视化图表库

      • 一、使用idea创建javaWeb工程
      • 二、下载echarts导入js文件
      • 三、使用echarts。
        • 特别鸣谢:感谢林老师传授 嘿嘿嘿
        • ————————
        • 创作不易,如觉不错,随手三连点赞,收藏,关注,谢谢~~

一、使用idea创建javaWeb工程

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

java——插件echarts数据可视化图表库_第1张图片
下一步

java——插件echarts数据可视化图表库_第2张图片
下一步

java——插件echarts数据可视化图表库_第3张图片

项目创建完成了只后,我们创建两个文件夹,分别用来存放编译后的文件,跟jar包
java——插件echarts数据可视化图表库_第4张图片
接着,我们对着两个包进行配置,首先配置classes,选择classes的位置

java——插件echarts数据可视化图表库_第5张图片

下一步,接着配置 lib

java——插件echarts数据可视化图表库_第6张图片
选择对应的位置

java——插件echarts数据可视化图表库_第7张图片

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

java——插件echarts数据可视化图表库_第8张图片

二、下载echarts导入js文件

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

java——插件echarts数据可视化图表库_第9张图片
下一步,我们就拿这个快速上手的例子,绘制一个简单的图表来演示。

java——插件echarts数据可视化图表库_第10张图片
点击这个下载,我们把它整个的压缩包都下载下来,不大,只有7M

java——插件echarts数据可视化图表库_第11张图片

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

java——插件echarts数据可视化图表库_第12张图片
回到我们的idea,我们创建一个js包,粘贴进来。

java——插件echarts数据可视化图表库_第13张图片

三、使用echarts。

我们创建一个servlet

java——插件echarts数据可视化图表库_第14张图片
在web.xml里配置我们的servlet

java——插件echarts数据可视化图表库_第15张图片
接着,我们在index.jsp页面中,弄一个简单的表单,请求的地址是我们刚刚写的servlet。

java——插件echarts数据可视化图表库_第16张图片
再创建一个yanshi.jsp页面,注意,这里我们用到标签库,所以我们要导入依赖的jar包。

java——插件echarts数据可视化图表库_第17张图片

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

java——插件echarts数据可视化图表库_第18张图片
启动Tomcat服务器

java——插件echarts数据可视化图表库_第19张图片
效果出来了,数据不是他原来的了,是我们自己从我们的后台拿出来的。。

java——插件echarts数据可视化图表库_第20张图片

特别鸣谢:感谢林老师传授 嘿嘿嘿

————————

创作不易,如觉不错,随手三连点赞,收藏,关注,谢谢~~

你可能感兴趣的:(java日常,echarts,java,数据可视化,插件)