1.数据可视化 idea+tomcat+Echarts

_胡杨_

已于 2022-06-03 18:30:24 修改

阅读量5.1k

点赞数 12

分类专栏： Echarts 文章标签： tomcat intellij-idea echarts

于 2022-05-07 11:05:10 首次发布

本文链接：https://blog.csdn.net/m0_45097792/article/details/124601838

版权

Echarts 专栏收录该内容

3 篇文章

订阅专栏

基于JDK1.8， idea2020.3， tomcat-8.5.78

1.安装jdk，配置环境变量

1.win + R 输入sysdm.cpl，打开系统属性
2.点击环境变量
在这里插入图片描述
3.编辑系统环境变量

变量名：

JAVA_HOME

java的安装路径：（路径不可直接复制，记得换成你的jdk安装路径）

C:\Program Files\Java\jdk1.8.0_321

在这里插入图片描述
4.打开Path : 新添加两个路径（直接复制即可）
注意：如果Path不是以下图片竖着填，各路径需要英文分号隔开！！！

%JAVA_HOME%\bin

%JAVA_HOME%\jre\bin

在这里插入图片描述
5.添加以下环境变量（复制即可）
变量名：

CLASSPATH

变量值：

.;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib\dt.jar

在这里插入图片描述
测试（如下图则为成功）：

java -version

在这里插入图片描述

配置JDK环境变量到此配置完成！！

2.安装idea(不在赘述)

3.安装tomcat

（apache官网下载）

1.将tomcat8.5 解压到硬盘
2.配置环境变量
变量名：

TOMCAT_HOME

变量值：（路径不可直接复制，记得换成你的 tomcat 路径）

D:\apache-tomcat-8.5.78

在这里插入图片描述
4.打开Path : 新添加一个路径（直接复制即可）

%TOMCAT_HOME%\bin

在这里插入图片描述
5.测试双击 tomcat—> bin—> startup.bat

在浏览器输入：http://localhost:8080/ 出现如下则为成功。

cmd命令行界面输入startup出现如下也是成功：

注：双击startup.bat命令窗口乱码解决方案：
如果双击startup.bat能够正常启动，但是乱码的话，可以到tomcat目录找到conf文件夹中的logging.properties，将这里的UTF-8改GBK，再双击startup.bat命令窗口就不会乱码了。

4.设置账号密码（这里可有可无）

进入
http://localhost:8080/manager/status
localhost:8080/manager/html
localhost:8080/host-manager/html
等页面时需要账户密码

下面设置账户密码：
tomcat进入管理界面
找到tomcat目录的conf文件夹下的tomcat-users.xml，双击打开
tomcat的这部分默认是注释掉的，我们在下面添加：

 <role rolename="admin-gui"/>
 <role rolename="manager-gui"/>
 <user username="你的名字" password="你的密码" roles="admin-gui,manager-gui"/>
 </tomcat-users>

5.安装配置maven

1.将下载下载好的压缩包，解压至你想要安装的目录下。
2.复制Maven的根目录
3.配置Maven环境
win + R 输入sysdm.cpl，打开系统属性，配置环境变量
变量名：MAVEN_HOME
变量值（你自己的maven路径）：D:\IDEA\tomcat\apache-maven-3.6.3-bin\apache-maven-3.6.3
Path中新建：%MAVEN_HOME%\bin
4.测试

mvn -v

如下则为成功：
在这里插入图片描述
5.对Maven进行修改（配置国内服务器等）:
打开Maven的安装目录>conf文件夹>setting.xml将国内服务器代码放到下列位置

<mirror>
		 <id>nexus-aliyun</id>
		 <mirrorOf>*</mirrorOf>
		 <name>Nexus aliyun</name>
		 <url>http://maven.aliyun.com/nexus/content/groups/public</url>
	</mirror>

改默认仓库的位置（先建立文件夹）

 <localRepository>D:\Software\.m2\repository</localRepository>

6.在Idea上配置Maven工具

在这里插入图片描述

7.在idea下新建web工程

（上面的Maven配置不好无法进行这一步）

1.File > new > project > maven > create from archetype->maven-archetype-webapp，点击next即可
请添加图片描述
2.勾选override后选择自己maven所在位置，配好。
在这里插入图片描述
3.finish即可，等待创建完成

8.将tomcat配置到idea

在这里插入图片描述

选择Tomcat解压位置：

点击Fix：

选择如下（名字可修改，一般修改为项目名）：

点击OK退出后运行测试（如下则成功）：
在这里插入图片描述

9.新建html文件，进行Echarts可视化

1.下载Echarts.min.js
2.将echarts.min.js放入到新建的js文件夹里
在这里插入图片描述
2.在main下webapp新建test.html，测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 1.安装echarts后,引入js文件 -->
  <script src="./node_modules/echarts/dist/echarts.min.js"></script>
  <title>Document</title>
</head>
<body>
  <!-- 定义显示图标的div -->
  <div id="echart" style="width: 600px;height: 600px;"></div>
  <script>
    // 初始化 echarts 实例
    var echart = echarts.init(document.getElementById('echart'))
    // 配置图表所需的数据
    var option = {
      title: {
        text: 'echart测试'
      },
      xAxis: {
        data: ['java', 'C++', 'C', 'Python']
      },
      yAxis: {},
      series: {
        type: 'bar',
        data: [123,456,324,555]
      }
    }
    // 调用 setOption 方法绘制图表
    echart.setOption(option)
  </script>
</body>
</html>